import React from 'react';
import { Check, ShieldCheck, Sparkles, Star, Gift } from 'lucide-react';
import { useLanguage } from '@/contexts/LanguageContext';

interface PricingProps {
  onRegister: (plan: string) => void;
}

const Pricing: React.FC<PricingProps> = ({ onRegister }) => {
  const { t } = useLanguage();

  return (
    <section id="pricing" className="py-24 bg-white relative overflow-hidden scroll-mt-24">
      {/* Background Decor */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-50 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 -z-10"></div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold text-gray-900 sm:text-4xl mb-4 tracking-tight">{t.pricing.title}</h2>
          <p className="text-lg text-gray-600">{t.pricing.subtitle}</p>
        </div>

        {/* Free Plan Banner */}
        <div className="max-w-xl mx-auto mb-24 animate-in fade-in slide-in-from-bottom-4 duration-700 relative z-20">
          <div className="bg-brand-50 border border-brand-100 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-6 text-center sm:text-left shadow-sm">
            <div className="flex items-center gap-4">
              <div className="bg-brand-100 p-3 rounded-xl text-brand-600">
                <Gift size={24} strokeWidth={1.5} />
              </div>
              <div>
                <h3 className="font-bold text-gray-900">{t.pricing.freeTierTitle}</h3>
                <p className="text-sm text-gray-600">{t.pricing.freeTierDesc}</p>
              </div>
            </div>
            <button
              onClick={() => onRegister('starter')}
              className="whitespace-nowrap bg-white text-gray-900 border border-gray-200 hover:border-brand-500 hover:text-brand-600 font-bold py-2.5 px-6 rounded-xl text-sm transition-all shadow-sm"
            >
              {t.header.cta}
            </button>
          </div>
        </div>

                <div className="max-w-md mx-auto relative z-10">
          <div className="bg-brand-950 rounded-3xl border border-brand-800 p-8 flex flex-col relative shadow-2xl shadow-brand-900/20 ring-1 ring-brand-700/50">
            <div className="flex justify-between items-start mt-2">
              <div>
                <h3 className="flex items-center gap-2 text-xl font-bold text-white">
                  {t.pricing.plans.monthly.title}
                  <span className="bg-brand-500 rounded-full px-2 py-0.5 pb-[3px] text-[10px] font-bold uppercase tracking-wider text-white">PRO</span>
                </h3>
                <p className="text-brand-200 mt-1 text-sm opacity-90">{t.pricing.plans.monthly.description}</p>
              </div>
              <div className="bg-white/5 border-white/10 rounded-lg border p-2">
                <Sparkles className="text-accent-400" size={24} />
              </div>
            </div>

            <div className="mb-2 mt-6 flex items-baseline gap-1">
              <span className="text-5xl font-extrabold tracking-tight text-white">{t.pricing.plans.monthly.price}</span>
              <span className="text-brand-200 text-sm font-medium">{t.pricing.plans.monthly.period}</span>
            </div>
            <p className="text-brand-300 mb-8 text-xs font-medium uppercase tracking-wide">{t.pricing.plans.monthly.billingInfo}</p>

            <div className="from-transparent via-brand-800 to-transparent mb-8 h-px bg-gradient-to-r"></div>

            <ul className="mb-8 flex-grow space-y-4">
              {t.pricing.plans.monthly.features.map((item, i) => (
                <li key={i} className="flex items-start gap-3 text-sm text-gray-100">
                  <div className="bg-brand-600 mt-0.5 rounded-full p-0.5 text-white shadow-sm">
                    <Check className="h-3 w-3" strokeWidth={3} />
                  </div>
                  <span className="leading-snug">{item}</span>
                </li>
              ))}
            </ul>

            <button
              onClick={() => onRegister('monthly')}
              className="group from-brand-500 to-brand-600 hover:from-brand-400 hover:to-brand-500 shadow-brand-500/20 hover:-translate-y-0.5 relative block w-full overflow-hidden rounded-xl bg-gradient-to-r py-4 text-center text-sm font-bold text-white shadow-lg transition-all"
            >
              <div className="absolute inset-0 translate-y-full bg-white/20 transition-transform duration-300 group-hover:translate-y-0"></div>
              <span className="relative">{t.pricing.plans.monthly.btnText}</span>
            </button>
          </div>
        </div>\n        {/* --- PROFESSIONAL PLAN SECTION --- */}
        <div className="max-w-2xl mx-auto mt-16 animate-in fade-in slide-in-from-bottom-6 duration-700">
          <div className="relative bg-gray-900 rounded-2xl p-6 md:p-8 overflow-hidden shadow-xl border border-gray-800">
            {/* Abstract Shapes */}
            <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/10 rounded-full blur-[60px] -translate-y-1/2 translate-x-1/3"></div>

            <div className="relative z-10 flex flex-col sm:flex-row items-center gap-6">
              <div className="flex-1 text-center sm:text-left">
                <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-[10px] font-bold uppercase tracking-wider mb-3">
                  <Sparkles size={12} /> Para Nutris e Personais
                </div>
                <h3 className="text-xl font-bold text-white mb-2">Área Profissional</h3>
                <p className="text-gray-400 text-sm mb-0">
                  Sistema completo para gestão de alunos, treinos e dietas.
                </p>
              </div>

              <div className="bg-gray-800/50 backdrop-blur-md border border-gray-700 p-4 rounded-xl min-w-[200px] text-center">
                <span className="inline-block px-3 py-1 mb-2 rounded-full bg-gray-700 text-gray-300 text-[10px] font-bold uppercase tracking-wider">
                  Em Breve
                </span>
                <button
                  disabled
                  className="w-full bg-white/10 text-white/50 font-bold py-2 rounded-lg text-sm cursor-not-allowed hover:bg-white/10"
                >
                  Aguarde
                </button>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
};

export default Pricing;