SocialBuddyMarketingWebsite/app/channels/[slug]/page.tsx

import { channels } from '@/data/channels';
import { notFound } from 'next/navigation';
import styles from './channel-page.module.css';
import SafeImage from '@/components/SafeImage';
import Link from 'next/link';
import ChannelTestimonialSlider from '@/components/ChannelTestimonialSlider';
import ChannelFAQ from '@/components/ChannelFAQ';
import {
    Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck,
    Palette, Layout, Smartphone, Zap, PenTool, Repeat,
    CheckCircle
} from 'lucide-react';

// Define Props interface
interface PageProps {
    params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
    return channels.map((channel) => ({
        slug: channel.slug,
    }));
}

export async function generateMetadata(props: PageProps) {
    const params = await props.params;
    const channel = channels.find((c) => c.slug === params.slug);
    if (!channel) return { title: 'Channel Not Found' };

    return {
        title: `${channel.title} Management Tool - SocialBuddy`,
        description: channel.description,
    };
}

// Icon mapping helper
const getIcon = (iconName: string) => {
    switch (iconName) {
        case 'Calendar': return <Calendar />;
        case 'Eye': return <Eye />;
        case 'BarChart': return <BarChart />;
        case 'Trophy': return <Trophy />;
        case 'Inbox': return <Inbox />;
        case 'ShieldCheck': return <ShieldCheck />;
        case 'Palette': return <Palette />;
        case 'Layout': return <Layout />;
        case 'Smartphone': return <Smartphone />;
        case 'Zap': return <Zap />;
        case 'PenTool': return <PenTool />;
        case 'Repeat': return <Repeat />;
        case 'CheckCircle': return <CheckCircle />;
        default: return <CheckCircle />;
    }
};

export default async function ChannelPage(props: PageProps) {
    const params = await props.params;

    // Ensure params exists
    if (!params?.slug) {
        notFound();
    }

    const channel = channels.find((c) => c.slug === params.slug);

    if (!channel) {
        notFound();
    }

    return (
        <main className={styles.page}>
            {/* 1. Hero Section */}
            <section className={styles.hero}>
                <div className={styles.container}>
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>{channel.title}</h1>
                        <div className={styles.breadcrumbs}>
                            <Link href="/">Home</Link> <span>/</span> <span>Channels</span> <span>/</span> {channel.title}
                        </div>
                    </div>
                </div>
            </section>

            {/* 2. About Section */}
            {channel.about && (
                <section className={styles.aboutSection}>
                    <div className={styles.container}>
                        <div className={styles.aboutGrid}>
                            <div className={styles.aboutImages}>
                                <div className={styles.aboutImageFrame}></div>
                                <div className={styles.aboutMainImgWrapper}>
                                    <SafeImage
                                        src={channel.about.mainImage}
                                        alt={`${channel.title} Main Feature`}
                                        className={styles.img}
                                        fallbackSrc={`https://placehold.co/600x800/png?text=${encodeURIComponent(channel.title)}+Main`}
                                    />
                                </div>
                            </div>
                            <div className={styles.aboutContent}>
                                <span className={styles.sectionSubtitle}>{channel.about.subTitle}</span>
                                <h2 className={styles.sectionTitle}>{channel.about.title}</h2>
                                <p className={styles.aboutDescription}>{channel.about.description}</p>
                                <div className={styles.aboutPoints}>
                                    {channel.about.bulletPoints.map((point, i) => (
                                        <div key={i} className={styles.aboutPointItem}>
                                            <span className={styles.aboutPointIcon}>
                                                {getIcon(point.icon)}
                                            </span>
                                            <span className={styles.aboutPointText}>{point.text}</span>
                                        </div>
                                    ))}
                                </div>
                                <a href="https://app.socialbuddy.co/signup" className="btn btn-primary">Start Free Trial</a>
                            </div>
                        </div>
                    </div>
                </section>
            )}

            {/* 3. Benefits / Why Choose */}
            <section className={styles.benefitsSection}>
                <div className={styles.container}>
                    <div className={styles.benefitsHeader}>
                        <span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
                        <h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
                        <p className={styles.sectionDescriptionCentered}>
                            We've built specific tools to help you succeed on {channel.title}.
                            Stop guessing and start growing with data-driven insights.
                        </p>
                    </div>

                    <div className={styles.benefitsGrid}>
                        {channel.benefits.slice(0, 4).map((benefit, index) => (
                            <div key={index} className={styles.benefitCard}>
                                <div className={styles.benefitNumber}>0{index + 1}</div>
                                <div className={styles.benefitCardContent}>
                                    <h3 className={styles.benefitCardTitle}>{benefit.title}</h3>
                                    <p className={styles.benefitCardDesc}>{benefit.description}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* 4. Testimonials */}
            {channel.testimonials && channel.testimonials.length > 0 && (
                <section className={styles.testimonialSection}>
                    <div className={styles.container}>
                        <div className={styles.testimonialCenteredHeader}>
                            <span className={styles.sectionSubtitle}>Testimonials</span>
                            <h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
                        </div>
                        <ChannelTestimonialSlider testimonials={channel.testimonials} />
                        <div style={{ textAlign: 'center', marginTop: '3rem' }}>
                            <a href="#" className="btn btn-primary">
                                Review us on Google
                            </a>
                        </div>
                    </div>
                </section>
            )}

            {/* 5. FAQ */}
            {channel.faqs && channel.faqs.length > 0 && (
                <ChannelFAQ faqs={channel.faqs} channelTitle={channel.title} />
            )}

            {/* 6. CTA (Full Width Floating) */}
            <section className={styles.ctaFullWidth}>
                <SafeImage
                    src="/images/shape-left.png"
                    alt=""
                    className={`${styles.floatElem} ${styles.floatLeft}`}
                    fallbackSrc="https://placehold.co/150x150/png?text=Shape"
                />
                <SafeImage
                    src="/images/shape-right.png"
                    alt=""
                    className={`${styles.floatElem} ${styles.floatRight}`}
                    fallbackSrc="https://placehold.co/150x150/png?text=Shape"
                />

                <div className={styles.ctaContentCentered}>
                    <h2 className={styles.ctaFullTitle}>Ready to Master {channel.title}?</h2>
                    <p className={styles.ctaFullText}>
                        Join thousands of marketers who are growing their {channel.title} presence with SocialBuddy.
                    </p>
                    <a href="https://app.socialbuddy.co/signup" className={styles.ctaFullBtn}>
                        Start Free Trial
                    </a>
                </div>
            </section>
        </main>
    );
}