'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: 'Basic Buddy',
            description: 'Perfect for individual creators.',
            price: { monthly: 10, annual: 100 },
            features: [
                '1 Social Profiles',
                'Basic Analytics',
                'Content Scheduling',
                'Standard Support',
            ],
            cta: 'Get Started',
            popular: false,
        },
        {
            name: 'Standard Buddy',
            description: 'For growing businesses and influencers.',
            price: { monthly: 50, annual: 500 },
            features: [
                '10 Social Profiles',
                'Advanced Analytics',
                'AI Content Generation',
                'Priority Support',
                'Team Collaboration (up to 3)',
            ],
            cta: 'Get Started',
            popular: true,
        },
        {
            name: 'Premium Buddy',
            description: 'Ultimate solution for agencies.',
            price: { monthly: 150, annual: 1500 },
            features: [
                '25 Social Profiles',
                'White Label Reports',
                'Dedicated Account Manager',
                'API Access',
                'Unlimited Team Members',
            ],
            cta: 'Get Started',
            popular: false,
        },
    ];

    return (
        <section className="section" id="pricing">
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.subTitle}>Pricing</div>
                    <h2 className={styles.title}>
                        Clear Plans with <span className="gradient-text"><br />No Hidden Costs</span>
                    </h2>
                    <p className={styles.subtitle}>
                        Select a package that fits your goals. Every option comes with a risk-free 7-day trial so you can explore confidently.
                    </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 : ''}>
                            Yearly
                            <span className={styles.saveBadge}>Save 20%</span>
                        </span>
                    </div>
                </div>

                <div className={styles.pricingGrid}>
                    {plans.map((plan, index) => (
                        <div
                            key={index}
                            className={`${styles.pricingCard} ${styles[`cardVariant${index + 1}`]}`}
                            style={{ animationDelay: `${index * 0.1}s` }}
                        >
                            <div className={styles.planHeader}>
                                <h3 className={styles.planName}>{plan.name}</h3>
                                <p className={styles.planDescription}>{plan.description}</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>

                            <div className={styles.cardFooter}>
                                <div className={styles.priceInfo}>
                                    <div className={styles.priceAmount}>
                                        <span className={styles.currency}>$</span>
                                        {isAnnual ? Math.floor(plan.price.annual) : plan.price.monthly}
                                    </div>
                                    <div className={styles.period}>per {isAnnual ? 'year' : 'month'}</div>
                                </div>

                                <a href="https://app.socialbuddy.co/signup" className={styles.signupBtn}>
                                    Get Started <span className={styles.btnArrow}>▶</span>
                                </a>
                            </div>
                        </div>
                    ))}
                </div>

                <div className={styles.guarantee}>
                    <p>
                        <strong>Start confidently and stop anytime.</strong>
                    </p>
                </div>
            </div>
        </section>
    );
}