'use client';

import { useState } from 'react';
import type { Metadata } from 'next';
import Pricing from '@/components/Pricing';
import styles from './pricing.module.css';

export default function PricingPage() {
    const [openFaqIndex, setOpenFaqIndex] = useState<number | null>(0);

    const faqs = [
        {
            question: 'Can I change plans later?',
            answer: "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges."
        },
        {
            question: 'What payment methods do you accept?',
            answer: 'We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans.'
        },
        {
            question: 'Is there a free trial?',
            answer: 'Yes! All paid plans come with a 14-day free trial. No credit card required to start.'
        },
        {
            question: 'Can I cancel anytime?',
            answer: 'Absolutely. You can cancel your subscription at any time with no cancellation fees. Your access continues until the end of your billing period.'
        },
        {
            question: 'Do you offer discounts for nonprofits?',
            answer: 'Yes! We offer special pricing for nonprofits and educational institutions. Contact our sales team for details.'
        },
        {
            question: 'What happens to my data if I cancel?',
            answer: 'Your data is safely stored for 30 days after cancellation. You can export all your data at any time before deletion.'
        }
    ];

    const toggleFaq = (index: number) => {
        setOpenFaqIndex(openFaqIndex === index ? null : index);
    };

    return (
        <div className={styles.pricingPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>Pricing</h1>
                        <div className={styles.breadcrumb}>
                            <a href="/">Home</a> / <span>Pricing</span>
                        </div>
                    </div>
                </div>
            </section>

            <Pricing />

            {/* FAQ Section */}
            <section className="section">
                <div className="container">
                    <div className={styles.faqContainer}>
                        <div className={styles.faqDecorativeSection}>
                            <div className={styles.imageFrameWrapper}>
                                {/* Diagonal Background Lines */}
                                <div className={styles.diagonalLines}>
                                    <div className={styles.diagonalLinePink}></div>
                                    <div className={styles.diagonalLineBlue}></div>
                                </div>

                                {/* Image with Decorative Borders */}
                                <div className={styles.imageFrame}>
                                    <div className={styles.frameBorderTopLeft}></div>
                                    <div className={styles.frameBorderBottomRight}></div>
                                    <img
                                        src="/faq-workspace.jpg"
                                        alt="Social media management workspace"
                                        className={styles.frameImage}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className={styles.faqContent}>
                            <div className={styles.faqHeader}>
                                <h2 className={styles.faqTitle}>Frequently Asked Questions</h2>
                            </div>
                            <div className={styles.faqList}>
                                {faqs.map((faq, index) => (
                                    <div key={index} className={styles.faqItem}>
                                        <button
                                            className={styles.faqQuestion}
                                            onClick={() => toggleFaq(index)}
                                            aria-expanded={openFaqIndex === index}
                                        >
                                            <span>{faq.question}</span>
                                            <span className={`${styles.faqIcon} ${openFaqIndex === index ? styles.faqIconOpen : ''}`}>
                                                +
                                            </span>
                                        </button>
                                        <div className={`${styles.faqAnswer} ${openFaqIndex === index ? styles.faqAnswerOpen : ''}`}>
                                            <p>{faq.answer}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}