'use client';

import Image from 'next/image';
import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import styles from './FAQ.module.css';

interface FAQItem {
    question: string;
    answer: string;
}

interface FAQCategory {
    id: string;
    title: string;
    description: string;
    icon: string;
    colorClass: string;
    faqs: FAQItem[];
}

export default function FAQ() {
    const [activeCategoryIndex, setActiveCategoryIndex] = useState(0);
    const [openIndex, setOpenIndex] = useState<number | null>(0);

    const categories: FAQCategory[] = [
        {
            id: 'scheduling',
            title: 'Convenient Scheduling',
            description: 'Easily plan and schedule your content across all platforms.',
            icon: '/images/home/schedule.webp',
            colorClass: 'orange',
            faqs: [
                {
                    question: 'How does the unified calendar streamline my workflow?',
                    answer: 'Our drag-and-drop calendar gives you a bird\'s-eye view of your entire strategy. Schedule posts for Facebook, Instagram, LinkedIn, X, and Pinterest simultaneously, or tweak them individually for platform-specific engagement—all from one screen.'
                },
                {
                    question: 'Can I truly set it and forget it with bulk scheduling?',
                    answer: 'Absolutely. Upload months of content in minutes via CSV. Our system automatically maps your columns to captions, dates, and media, allowing you to fill your queue without manual entry fatigue.'
                },
                {
                    question: 'Does SocialBuddy help me beat the algorithm?',
                    answer: 'Yes. Our "Smart Schedule" feature analyzes your specific audience behavior to recommend the exact minute you should post for maximum visibility, taking the guesswork out of engagement.'
                },
                {
                    question: 'Is there a limit on how much I can plan ahead?',
                    answer: 'We believe in limitless growth. Pro and Agency plans offer unlimited scheduled posts, so you can plan your Q4 campaigns in Q1 if you want to. Starter plans include a generous 50-post monthly cap.'
                },
                {
                    question: 'Will my posts look right on every device?',
                    answer: 'No more "link in bio" broken texts. Our Pixel-Perfect Preview shows you exactly how your content will render on mobile and desktop feeds before you hit publish, ensuring your brand always looks polished.'
                }
            ]
        },
        {
            id: 'ai',
            title: 'Best AI Content Team',
            description: 'Leverage advanced AI to generate captions and ideas instantly.',
            icon: '/images/home/content-team.webp',
            colorClass: 'red',
            faqs: [
                {
                    question: 'Will the AI sound like a robot?',
                    answer: 'Not on our watch. Our "Brand Persona" engine allows you to define your unique voice—whether it\'s professional, witty, or empathetic. The AI generates content that sounds indistinguishable from your best copywriter.'
                },
                {
                    question: 'Can it help me come up with content ideas?',
                    answer: 'Writer\'s block is cured. Simply type a broad topic like "Monday Motivation" or "Product Launch," and our AI will generate 10+ engaging hooks, captions, and script ideas instantly.'
                },
                {
                    question: 'Does it optimize for SEO and discovery?',
                    answer: 'Yes. The AI suggests trending, high-impact hashtags relevant to your specific image and caption, increasing the likelihood of your content appearing in Explore feeds and search results.'
                },
                {
                    question: 'Is the content plagiarism-free?',
                    answer: '100%. Our model generates unique output every single time based on your specific inputs. You own the copyright to everything created within the platform.'
                },
                {
                    question: 'Can I rewrite existing content with AI?',
                    answer: 'Absolutely. Use the "Remix" feature to turn a single blog post into a week\'s worth of Tweets, LinkedIn posts, and Instagram captions with one click.'
                }
            ]
        },
        {
            id: 'growth',
            title: 'Guaranteed Satisfaction',
            description: 'Experience significant growth in engagement and reach.',
            icon: '/images/home/satisfaction.webp',
            colorClass: 'blue',
            faqs: [
                {
                    question: 'How quickly will I see results?',
                    answer: 'While consistency takes time, our users typically report a 40% increase in engagement within the first 30 days of using our Smart Scheduling and AI tools to optimize their strategy.'
                },
                {
                    question: 'Is my data safe with SocialBuddy?',
                    answer: 'We treat your data like a bank vault. We utilize 256-bit AES encryption and adhere to strict SOC2 compliance standards. We rely exclusively on official social media APIs, keeping your accounts 100% compliant and secure.'
                },
                {
                    question: 'What if I need to cancel?',
                    answer: 'We believe you should stay because you love the product, not because you\'re trapped. Cancel your monthly subscription instantly from your dashboard—no phone calls, no guilt trips.'
                },
                {
                    question: 'Can I collaborate with my team?',
                    answer: 'Collaboration is built-in. Assign roles (Admin, Editor, Viewer) to your team members and clients. Set up approval workflows so no post goes live without a manager\'s sign-off.'
                },
                {
                    question: 'Do you offer support if I get stuck?',
                    answer: 'We pride ourselves on human support. Our team of social media experts is available 24/7 via live chat. No bots, just real people helping you grow.'
                }
            ]
        }
    ];

    const currentCategory = categories[activeCategoryIndex];

    const toggleFAQ = (index: number) => {
        setOpenIndex(openIndex === index ? null : index);
    };

    const handleCategoryClick = (index: number) => {
        setActiveCategoryIndex(index);
        setOpenIndex(0); // Reset to first item open or closed when switching? Let's open first item.
    };

    return (
        <section className={styles.section} id="faq">
            <div className={styles.container}>
                <div className={styles.grid}>
                    {/* Left Column: Interactive Categories */}
                    <div className={styles.leftColumn}>
                        <span className={styles.label}>FAQ</span>
                        <h2 className={styles.heading}>
                            A Platform You Can Rely On <span className="gradient-text">for Growth</span>
                        </h2>

                        <div className={styles.featureList}>
                            {categories.map((category, index) => (
                                <div
                                    key={category.id}
                                    className={`${styles.featureItem} ${activeCategoryIndex === index ? styles.active : ''}`}
                                    onClick={() => handleCategoryClick(index)}
                                    role="button"
                                    tabIndex={0}
                                >
                                    <div className={`${styles.iconWrapper} ${styles[category.colorClass]} ${activeCategoryIndex === index ? styles.activeIcon : ''}`}>
                                        <Image
                                            src={category.icon}
                                            alt={category.title}
                                            width={31}
                                            height={31}
                                            className={styles.iconImage}
                                        />
                                    </div>
                                    <div className={styles.featureContent}>
                                        <h4>{category.title}</h4>
                                        <p>{category.description}</p>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div className={styles.supportSection}>
                            <p className={styles.supportText}>Still have questions?</p>
                            <a href="/contact" className={styles.contactBtn}>
                                Contact Support
                            </a>
                        </div>
                    </div>

                    {/* Right Column: Dynamic FAQs */}
                    <div className={styles.faqList}>
                        <h3 className={styles.mobileCategoryTitle}>{currentCategory.title} FAQs</h3>
                        {currentCategory.faqs.map((faq, index) => (
                            <div
                                key={index}
                                className={styles.faqItem}
                                data-state={openIndex === index ? 'open' : 'closed'}
                            >
                                <button
                                    className={styles.faqButton}
                                    onClick={() => toggleFAQ(index)}
                                    aria-expanded={openIndex === index}
                                >
                                    <span className={styles.question}>{faq.question}</span>
                                    <ChevronDown
                                        className={styles.chevron}
                                        size={20}
                                        strokeWidth={2.5}
                                    />
                                </button>
                                <div className={styles.answer}>
                                    <div className={styles.answerContent}>
                                        <div className={styles.answerInner}>
                                            {faq.answer}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}
