'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import {
    Globe, Layers, Zap, BarChart, CheckCircle2,
    ArrowRight, MessageSquare, Heart
} from 'lucide-react';
import Pricing from '@/components/Pricing';
import FAQ from '@/components/FAQ';
import styles from './channels.module.css';

export default function ChannelsPage() {
    const [currentSlide, setCurrentSlide] = useState(0);

    const testimonials = [
        {
            quote: "SocialBuddy revolutionized how we handle our multi-channel strategy. It's simply brilliant.",
            author: "Sarah Jenkins",
            role: "Marketing Director, TechFlow"
        },
        {
            quote: "The analytics across all channels provided insights we never had before. Highly recommended.",
            author: "Mike Ross",
            role: "CEO, Pearson Specter"
        },
        {
            quote: "Managing 5 different platforms used to be a nightmare. Now it's our competitive advantage.",
            author: "Jessica Pearson",
            role: "Managing Partner, PSB"
        }
    ];

    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentSlide((prev) => (prev + 1) % testimonials.length);
        }, 5000);
        return () => clearInterval(timer);
    }, [testimonials.length]);

    return (
        <div className={styles.channelsPage}>

            {/* 1. About/Intro Section (Ref Image 1: Left Image Frame, Right Content) */}
            <section className={styles.introSection}>
                <div className="container">
                    <div className={styles.introContainer}>
                        {/* Left Image with Frame */}
                        <div className={styles.introImageWrapper}>
                            <div className={styles.introFrame}></div>
                            <div className={styles.introImgContainer}>
                                <Image
                                    src="/images/about/team-meeting.png"
                                    alt="Channel Management"
                                    width={450}
                                    height={550}
                                    className={styles.introImg}
                                />
                            </div>
                        </div>

                        {/* Right Content */}
                        <div className={styles.introContent}>
                            <h2>Master Every Channel with <br /> Precision</h2>
                            <p>
                                Whether it's the professional network of LinkedIn, the visual appeal of Instagram, or the fast-paced world of Twitter, SocialBuddy optimizes your presence everywhere.
                            </p>
                            <p>
                                Our unified platform ensures your brand voice remains consistent while adapting to the unique nuances of each platform. Connect, engage, and grow without the chaos.
                            </p>
                            <button className={styles.learnMoreBtn}>Start Connecting</button>
                        </div>
                    </div>
                </div>
            </section>

            {/* 2. Process/Learning Section (Ref Image 2: Grid of 4 Icons) */}
            <section className={styles.processSection}>
                <div className="container">
                    <div className={styles.processHeader}>
                        <h2>Learning Your Channels</h2>
                        <p style={{ color: 'var(--text-secondary)' }}>
                            Understand the core pillars of effective multi-channel management.
                        </p>
                    </div>

                    <div className={styles.processGrid}>
                        <div className={styles.processCard}>
                            <div className={styles.processIcon}><Globe /></div>
                            <h3>Global Reach</h3>
                            <p>Expand your audience across borders with localized content strategies.</p>
                        </div>
                        <div className={styles.processCard}>
                            <div className={styles.processIcon}><Layers /></div>
                            <h3>Content Sync</h3>
                            <p>Seamlessly synchronize posts while customizing for each platform's format.</p>
                        </div>
                        <div className={styles.processCard}>
                            <div className={styles.processIcon}><Zap /></div>
                            <h3>Fast Execution</h3>
                            <p>Schedule and deploy campaigns in minutes, not hours.</p>
                        </div>
                        <div className={styles.processCard}>
                            <div className={styles.processIcon}><BarChart /></div>
                            <h3>Deep Analytics</h3>
                            <p>Get granular data on performance for every single channel.</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* 3. Testimonial Section (Left Slider, Right Image) */}
            <section className={styles.testimonialSection}>
                <div className="container">
                    <div className={styles.testimonialGrid}>
                        {/* Left Content Slider */}
                        <div className={styles.testimonialContent}>
                            {testimonials.map((t, index) => (
                                <div
                                    key={index}
                                    className={`${styles.testimonialSlide} ${index === currentSlide ? styles.active : ''}`}
                                >
                                    <div className={styles.quoteIcon}>❝</div>
                                    <p className={styles.quoteText}>{t.quote}</p>
                                    <div className={styles.author}>
                                        <h4>{t.author}</h4>
                                        <p>{t.role}</p>
                                    </div>
                                </div>
                            ))}

                            {/* Dots */}
                            <div className={styles.dots}>
                                {testimonials.map((_, index) => (
                                    <div
                                        key={index}
                                        className={`${styles.dot} ${index === currentSlide ? styles.active : ''}`}
                                        onClick={() => setCurrentSlide(index)}
                                    />
                                ))}
                            </div>
                        </div>

                        {/* Right Image */}
                        <div className={styles.testimonialImageWrapper}>
                            <Image
                                src="/hero-slide-3.png"
                                alt="Success Story"
                                width={500}
                                height={400}
                                className={styles.testimonialImg}
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* Reused Components */}
            <Pricing />
            <FAQ />
        </div>
    );
}