import { useState, type FormEvent } from 'react';
import { motion } from 'framer-motion';
import { Check, ShieldCheck, Gift, ArrowRight, Loader2 } from 'lucide-react';
import { cn } from '../lib/utils';


export default function Offer() {
  const benefits = [
    "Criação do Personagem com IA Exclusivo",
    "10 créditos para escolher e gerar os itens que quiser do catálogo de 21 modelos (1 item = 1 crédito)",
    "Arquivos em PDF já formatados, prontos para impressão",
    "Acesso imediato à plataforma"
  ];

  const [email, setEmail] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleCheckout = async (e: FormEvent) => {
    e.preventDefault();
    if (!email) {
      setError('Por favor, informe seu e-mail.');
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError('Por favor, informe um e-mail válido.');
      return;
    }

    // Fire InitiateCheckout parameter for Meta Pixel
    if (typeof window !== 'undefined' && 'fbq' in window) {
      (window as any).fbq('track', 'InitiateCheckout');
    }
    
    setIsLoading(true);
    setError('');

    window.location.href = `/checkout?plan=starter&source=landing&email=${encodeURIComponent(email)}`;
  };

  return (
    <section className="py-24 bg-indigo-950 relative overflow-hidden" id="oferta">
      <div className="absolute top-0 right-0 w-full h-full bg-[url('https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp')] bg-cover bg-center opacity-5 mix-blend-overlay" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-pink-500/20 blur-[130px] rounded-full pointer-events-none mix-blend-screen" />
      
      <div className="container mx-auto px-6 max-w-5xl relative z-10">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-display font-bold mb-4 text-white">
            Crie a melhor festa que <br className="hidden md:block"/><span className="text-pink-400">seu filho já teve.</span>
          </h2>
          <p className="text-indigo-200 text-lg">
            Adquira o pacote inicial e receba <strong className="text-white">10 créditos para escolher e gerar seus itens favoritos</strong> do catálogo com 21 modelos exclusivos, por um valor simbólico.
          </p>
        </div>

        <div className="bg-white rounded-[2.5rem] p-8 md:p-12 shadow-[0_30px_60px_-15px_rgba(236,72,153,0.3)] relative overflow-hidden flex flex-col md:flex-row items-center gap-12 max-w-4xl mx-auto border border-pink-100">
          
          <div className="flex-1 w-full">
            <h3 className="text-3xl font-display font-bold text-indigo-950 mb-6">
              O Kit Mágico
            </h3>
            <div className="space-y-4 mb-8">
              {benefits.map((benefit, i) => (
                <div key={i} className="flex items-center gap-4">
                  <div className="w-6 h-6 rounded-full bg-pink-100 flex items-center justify-center shrink-0">
                    <Check className="w-4 h-4 text-pink-600" strokeWidth={3} />
                  </div>
                  <span className="text-indigo-900 font-medium text-lg leading-relaxed">{benefit}</span>
                </div>
              ))}
            </div>
            
            <div className="pt-6 border-t border-indigo-100 flex items-center gap-3">
              <Gift className="w-6 h-6 text-pink-500" />
              <p className="text-indigo-800 font-bold">Surpreenda todos os convidados!</p>
            </div>
          </div>

          <div className="w-full md:w-[360px] rounded-3xl p-6 md:p-8 text-center flex flex-col justify-center relative bg-gradient-to-b from-indigo-50 to-white border border-indigo-100 shadow-inner">
            <div className="mb-4 text-pink-600 font-bold text-sm tracking-[0.2em] uppercase">Pacote Inicial</div>
            
            <div className="flex items-start justify-center mb-1">
              <span className="text-2xl font-bold text-indigo-950 mt-2 mr-1">R$</span>
              <span className="text-8xl font-display font-black tracking-tight text-indigo-950">9</span>
              <span className="text-2xl font-bold mb-1 text-indigo-950 mt-2">,99</span>
            </div>
            <p className="text-sm text-indigo-500 font-medium mb-4">Pagamento único. Acesso imediato.</p>

            <div className="mb-6 px-4 py-3 rounded-2xl bg-emerald-50 border border-emerald-100 flex items-start gap-2.5 text-left">
              <Gift className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" />
              <p className="text-sm text-emerald-800 font-semibold leading-snug">
                Sua primeira imagem é por nossa conta — não consome nenhum dos seus créditos. É a chance de ver a mágica antes de usar o pacote completo.
              </p>
            </div>

            <form onSubmit={handleCheckout} className="flex flex-col gap-3 w-full mb-4">
              <div className="flex flex-col gap-1 text-left">
                <input
                  type="email"
                  value={email}
                  onChange={(e) => {
                    setEmail(e.target.value);
                    if (error) setError('');
                  }}
                  placeholder="Seu melhor e-mail"
                  className={cn(
                    "w-full h-14 px-5 rounded-full border-2 bg-white outline-none transition-all placeholder:text-gray-400 font-medium",
                    error ? "border-red-400 focus:border-red-500" : "border-indigo-100 focus:border-pink-500/50"
                  )}
                  disabled={isLoading}
                />
                {error && <span className="text-red-500 text-xs px-2 font-medium">{error}</span>}
              </div>
              <button 
                type="submit" 
                disabled={isLoading}
                className="w-full h-16 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 text-white font-bold text-lg hover:shadow-[0_0_30px_rgba(236,72,153,0.5)] hover:scale-105 transition-all flex items-center justify-center gap-2 disabled:opacity-70 disabled:hover:scale-100 disabled:hover:shadow-none"
              >
                {isLoading ? (
                  <>Gerando Pedido... <Loader2 className="w-5 h-5 animate-spin" /></>
                ) : (
                  <>Gerar Tema Agora <ArrowRight className="w-5 h-5" /></>
                )}
              </button>
            </form>
            
            <div className="flex items-center justify-center gap-2 text-sm text-indigo-400 font-medium">
              <ShieldCheck className="w-5 h-5 text-emerald-500" />
              <span>Compra 100% segura pelo Stripe.</span>
            </div>
          </div>
          
        </div>
      </div>
    </section>
  );
}
