'use client';

import { useState } from 'react';
import Link from 'next/link';
import styles from './Pricing.module.css';

export default function Pricing() {
    const [isAnnual, setIsAnnual] = useState(false);

    const plans = [
        {
            name: 'Free',
            description: 'Perfect for individuals getting started',
            price: { monthly: 0, annual: 0 },
            features: [
                '1 social media account',
                '10 scheduled posts per month',
                'Basic analytics',
                'Email support',
                'Mobile app access',
            ],
            cta: 'Get Started',
            popular: false,
        },
        {
            name: 'Pro',
            description: 'Ideal for growing businesses',
            price: { monthly: 29, annual: 290 },
            features: [
                '5 social media accounts',
                'Unlimited scheduled posts',
                'Advanced analytics & reports',
                'Priority email support',
                'Team collaboration (3 members)',
                'AI content assistant',
                'Custom branding',
            ],
            cta: 'Start Free Trial',
            popular: true,
        },
        {
            name: 'Premium',
            description: 'For agencies and enterprises',
            price: { monthly: 99, annual: 990 },
            features: [
                'Unlimited social media accounts',
                'Unlimited scheduled posts',
                'Enterprise analytics & insights',
                '24/7 priority support',
                'Unlimited team members',
                'Advanced AI features',
                'White-label solutions',
                'API access',
                'Dedicated account manager',
            ],
            cta: 'Contact Sales',
            popular: false,
        },
    ];

    return (
        <section className="section" id="pricing">
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.badge}>
                        <span>💎</span>
                        <span>Pricing</span>
                    </div>
                    <h2 className={styles.title}>
                        Simple, <span className="gradient-text">Transparent</span> Pricing
                    </h2>
                    <p className={styles.subtitle}>
                        Choose the perfect plan for your needs. All plans include a 14-day free trial.
                    </p>

                    <div className={styles.toggle}>
                        <span className={isAnnual ? '' : styles.active}>Monthly</span>
                        <button
                            className={styles.toggleButton}
                            onClick={() => setIsAnnual(!isAnnual)}
                            aria-label="Toggle pricing"
                        >
                            <span className={`${styles.toggleSlider} ${isAnnual ? styles.annual : ''}`}></span>
                        </button>
                        <span className={isAnnual ? styles.active : ''}>
                            Annual
                            <span className={styles.saveBadge}>Save 17%</span>
                        </span>
                    </div>
                </div>

                <div className={styles.pricingGrid}>
                    {plans.map((plan, index) => (
                        <div
                            key={index}
                            className={`${styles.pricingCard} ${plan.popular ? styles.popular : ''}`}
                            style={{ animationDelay: `${index * 0.1}s` }}
                        >
                            {plan.popular && <div className={styles.popularBadge}>Most Popular</div>}

                            <div className={styles.planHeader}>
                                <h3 className={styles.planName}>{plan.name}</h3>
                                <p className={styles.planDescription}>{plan.description}</p>
                            </div>

                            <div className={styles.priceSection}>
                                <div className={styles.price}>
                                    <span className={styles.currency}>$</span>
                                    <span className={styles.amount}>
                                        {isAnnual ? Math.floor(plan.price.annual / 12) : plan.price.monthly}
                                    </span>
                                    <span className={styles.period}>/mo</span>
                                </div>
                                {isAnnual && plan.price.annual > 0 && (
                                    <p className={styles.billedAnnually}>
                                        Billed ${plan.price.annual} annually
                                    </p>
                                )}
                            </div>

                            <div className={styles.features}>
                                {plan.features.map((feature, idx) => (
                                    <div key={idx} className={styles.feature}>
                                        <span className={styles.checkIcon}>✓</span>
                                        <span>{feature}</span>
                                    </div>
                                ))}
                            </div>

                            <a
                                href="https://app.socialbuddy.co/signup"
                                className={`btn ${plan.popular ? 'btn-primary' : 'btn-secondary'} ${styles.ctaButton}`}
                            >
                                {plan.cta}
                            </a>
                        </div>
                    ))}
                </div>

                <div className={styles.guarantee}>
                    <p>
                        <strong>💯 30-Day Money-Back Guarantee</strong> - Try risk-free. Cancel anytime.
                    </p>
                </div>
            </div>
        </section>
    );
}