byom-core-frontend/src/pages/Pricing.jsx

import { Link } from 'react-router-dom';
import { useState } from 'react';
import { useLanguage } from '../context/LanguageContext';

function Pricing() {
    const [hoveredPlan, setHoveredPlan] = useState(null);
    const { t } = useLanguage();

    const plans = [
        {
            name: 'Starter',
            price: '29',
            features: [
                'Basic AI trend analysis',
                '25 AI image generations/month',
                'Basic analytics dashboard',
                'Content calendar',
                'Email support',
                'Single user'
            ],
        },
        {
            name: 'Professional',
            price: '99',
            popular: true,
            features: [
                'Advanced AI trend predictions',
                '150 AI image generations/month',
                'Advanced analytics & insights',
                'Content strategy AI assistant',
                'Priority support',
                'Up to 3 team members',
                'Brand growth recommendations',
                'Social media scheduling'
            ],
        },
        {
            name: 'Business',
            price: '249',
            features: [
                'Custom AI solutions',
                'Unlimited image generations',
                'Multi-brand analytics',
                'Dedicated account manager',
                'API access',
                'Unlimited team members',
                'Custom integrations',
                'White-label reports'
            ],
        },
    ];

    return (
        <div className="py-24 sm:py-32 relative overflow-hidden">
            {/* Background elements */}
            <div className="absolute inset-0 pointer-events-none">
                <div className="absolute top-1/4 left-0 w-72 h-72 bg-brand-purple/10 rounded-full blur-3xl"></div>
                <div className="absolute bottom-1/4 right-0 w-72 h-72 bg-brand-pink/10 rounded-full blur-3xl"></div>
            </div>

            <div className="mx-auto max-w-7xl px-6 lg:px-8 relative">
                <div className="mx-auto max-w-4xl text-center">
                    <h2 className="text-base font-semibold leading-7 text-brand-purple inline-flex items-center gap-2">
                        {t('pricing.title')}
                        <span className="inline-block w-1 h-1 bg-brand-pink rounded-full animate-pulse"></span>
                    </h2>
                    <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl relative">
                        {t('pricing.subtitle')}
                        <span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-blue rounded-full"></span>
                    </p>
                    <p className="mt-6 text-lg leading-8 text-gray-600">
                        {t('pricing.description')}
                    </p>
                </div>

                <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 relative">
                    {plans.map((plan) => (
                        <div
                            key={plan.name}
                            className={`relative rounded-3xl p-8 transition-all duration-300 
                                ${plan.popular ? 'ring-2 ring-brand-purple' : 'ring-1 ring-gray-200'}
                                ${hoveredPlan === plan.name ? 'transform scale-105 bg-gradient-to-br from-white to-brand-light' : ''}`}
                            onMouseEnter={() => setHoveredPlan(plan.name)}
                            onMouseLeave={() => setHoveredPlan(null)}
                        >
                            {plan.popular && (
                                <span className="absolute -top-4 left-1/2 -translate-x-1/2 bg-brand-purple text-white text-xs px-4 py-1 rounded-full">
                                    {t('pricing.mostPopular')}
                                </span>
                            )}
                            <h3 className="text-lg font-semibold leading-8 text-gray-900">{plan.name}</h3>
                            <p className="mt-4 flex items-baseline">
                                <span className="text-5xl font-bold tracking-tight text-gray-900">${plan.price}</span>
                                <span className="ml-2 text-sm text-gray-600">{t('pricing.perMonth')}</span>
                            </p>
                            <ul className="mt-8 space-y-3 text-sm leading-6 text-gray-600">
                                {plan.features.map((feature, index) => (
                                    <li
                                        key={feature}
                                        className="flex gap-x-3 items-center transition-all duration-300"
                                        style={{
                                            transform: hoveredPlan === plan.name ? 'translateX(8px)' : 'none',
                                            transitionDelay: `${index * 50}ms`
                                        }}
                                    >
                                        <svg className="h-6 w-5 flex-none text-black" viewBox="0 0 20 20" fill="currentColor">
                                            <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
                                        </svg>
                                        {feature}
                                    </li>
                                ))}
                            </ul>
                            <Link
                                to={`/register?plan=${plan.name.toLowerCase()}`}
                                className={`mt-8 block rounded-full px-8 py-4 text-center text-sm font-semibold shadow-sm transition-all duration-300
                                    ${plan.popular
                                        ? 'bg-brand-purple text-white hover:bg-brand-purple/90'
                                        : 'bg-brand-light text-black hover:bg-brand-light/80'
                                    }`}
                            >
                                {t('pricing.getStarted')} {plan.name}
                            </Link>
                        </div>
                    ))}
                </div>

                <div className="mt-16 text-center">
                    <p className="text-gray-600 text-sm flex items-center justify-center gap-2">
                        <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
                        {t('pricing.trial')}
                        <span className="w-1 h-1 bg-gray-400 rounded-full"></span>
                    </p>
                </div>
            </div>
        </div>
    );
}

export default Pricing;