SocialBuddyMarketingWebsite/app/pricing/page.tsx

'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 my plan later?',
            answer: "Absolutely. You can upgrade or downgrade your plan at any time directly from your dashboard. Upgrades take effect immediately (perfect for scaling teams), while downgrades apply at the start of the next billing cycle."
        },
        {
            question: 'What payment methods do you accept?',
            answer: 'We securely process all major credit cards (Visa, MasterCard, Amex) via Stripe. For Enterprise accounts, we also offer invoice-based billing and bank transfers.'
        },
        {
            question: 'Does the 7-day free trial limit features?',
            answer: 'Not at all. You get full access to every feature in your chosen plan (including Premium Analytics and Team Tools) so you can experience the real power of SocialBuddy before committing.'
        },
        {
            question: 'Is there a long-term contract?',
            answer: 'No. Our monthly plans are pay-as-you-go, and you can cancel anytime. If you choose an annual plan to save 20%, you are committed for the year but pay a lower effective monthly rate.'
        },
        {
            question: 'Do you offer discounts for non-profits?',
            answer: 'Yes! We love supporting organizations that do good. Registered non-profits and educational institutions are eligible for a special lifetime discount. Contact our support team for details.'
        },
        {
            question: 'What happens to my data if I cancel?',
            answer: 'We believe your data belongs to you. If you cancel, we keep your account dormant for 60 days in case you change your mind. You can also export all your reports and content calendars before you go.'
        }
    ];

    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 className={styles.breadcrumbActive}>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="/images/pricing/pricing.webp"
                                        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>
    );
}