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

export default function Offer() {
  const benefits = [
    { icon: <ImageIcon className="w-5 h-5 text-pink-500" />, text: "30 créditos para gerar artes do catálogo com 21+ modelos" },
    { icon: <Check className="w-5 h-5 text-pink-500" />, text: "Personagem 3D exclusivo do seu filho gerado por IA" },
    { icon: <Check className="w-5 h-5 text-pink-500" />, text: "Arquivos em PDF prontos para imprimir em HD" },
    { icon: <Download className="w-5 h-5 text-pink-500" />, text: "Download em lote de todas as artes" },
    { icon: <Clock className="w-5 h-5 text-pink-500" />, text: "Créditos válidos por 60 dias" },
    { icon: <Headphones className="w-5 h-5 text-pink-500" />, text: "Suporte prioritário via WhatsApp" },
    { icon: <Zap className="w-5 h-5 text-pink-500" />, text: "Acesso imediato após o pagamento" },
  ];

  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; }

    if (typeof window !== 'undefined' && 'fbq' in window) {
      (window as any).fbq('track', 'InitiateCheckout');
    }

    setIsLoading(true);
    setError('');
    window.location.href = `/checkout?plan=popular&source=landing-30&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-12">
          <h2 className="text-4xl md:text-5xl font-display font-bold mb-4 text-white">
            Kit Festa Completo:<br className="hidden md:block" /><span className="text-pink-400">30 Artes por R$19,99.</span>
          </h2>
          <p className="text-indigo-200 text-lg max-w-2xl mx-auto">
            Menos de <strong className="text-white">R$0,67 por imagem</strong> — kit de decoradora pelo preço de um guaraná na lanchonete.
          </p>
        </div>

        {/* Comparação de valor */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12"
        >
          <div className="flex items-center gap-3 px-6 py-3 rounded-2xl bg-white/10 border border-white/20 text-white">
            <Tag className="w-5 h-5 text-red-400 shrink-0" />
            <span className="text-sm font-semibold">Decoradora profissional cobraria <span className="line-through text-white/50">R$400+</span></span>
          </div>
          <div className="hidden sm:block text-white/40 text-2xl font-bold">→</div>
          <div className="flex items-center gap-3 px-6 py-3 rounded-2xl bg-pink-500/20 border border-pink-400/40 text-white">
            <Check className="w-5 h-5 text-pink-400 shrink-0" />
            <span className="text-sm font-bold text-pink-300">Você paga só <span className="text-white">R$19,99</span> · −33% por imagem</span>
          </div>
        </motion.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">

          {/* Lista de benefícios */}
          <div className="flex-1 w-full">
            <h3 className="text-3xl font-display font-bold text-indigo-950 mb-6">
              Kit Festa
            </h3>
            <div className="space-y-3 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">
                    {benefit.icon}
                  </div>
                  <span className="text-indigo-900 font-medium text-base leading-relaxed">{benefit.text}</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 text-sm">Primeira imagem é por nossa conta — não consome créditos!</p>
            </div>
          </div>

          {/* Bloco de preço e CTA */}
          <div className="w-full md:w-[340px] 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">

            {/* Badge -33% */}
            <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-pink-500 to-violet-500 text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-lg whitespace-nowrap">
              −33% por imagem vs. a média do mercado
            </div>

            <div className="mb-2 text-pink-600 font-bold text-sm tracking-[0.2em] uppercase mt-3">Kit Festa · 30 Imagens</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">19</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-semibold mb-1">R$0,67 por imagem · Pagamento único</p>
            <p className="text-xs text-indigo-400 font-medium mb-6">Créditos válidos por 60 dias</p>

            <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"
                  disabled={isLoading}
                  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"
                  )}
                />
                {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>
  );
}
