"use client";

import React, { useState } from "react";
import { Mail, Sparkles, CheckCircle2, Tag } from "lucide-react";

export function NewsletterSection() {
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email.trim() || !email.includes("@")) return;
    setSubscribed(true);
  };

  return (
    <section className="py-16 bg-radial from-amber-900 to-amber-950 text-amber-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
        
        <div className="inline-flex items-center gap-1.5 bg-amber-500/20 text-amber-300 border border-amber-400/30 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
          <Sparkles className="w-3.5 h-3.5 text-amber-400" />
          <span>Club Gourmet Raúl Asencio</span>
        </div>

        <h2 className="font-serif text-3xl sm:text-4xl font-bold text-white tracking-tight">
          ¿Quieres un 10% de Descuento en tu Primer Pedido?
        </h2>

        <p className="text-amber-200/80 text-sm sm:text-base max-w-xl mx-auto font-light">
          Suscríbete a nuestra newsletter para enterarte en primicia de las nuevas ediciones limitadas, lanzamientos de temporada y sorteos exclusivos.
        </p>

        {subscribed ? (
          <div className="bg-amber-800/60 border border-amber-400/40 rounded-2xl p-6 max-w-md mx-auto animate-in zoom-in-95 duration-300 space-y-2">
            <div className="flex items-center justify-center gap-2 text-amber-300 font-bold text-sm">
              <CheckCircle2 className="w-5 h-5" />
              <span>¡Suscripción completada con éxito!</span>
            </div>
            <p className="text-xs text-amber-100">
              Usa el siguiente cupón en tu carrito de compra:
            </p>
            <div className="bg-white text-amber-950 px-4 py-2 rounded-xl font-mono font-bold text-base inline-flex items-center gap-2 border-2 border-dashed border-amber-400">
              <Tag className="w-4 h-4 text-amber-700" />
              <span>BIENVENIDO10</span>
            </div>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="max-w-md mx-auto flex flex-col sm:flex-row gap-2">
            <div className="relative flex-1">
              <Mail className="w-4 h-4 text-stone-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
              <input
                type="email"
                required
                placeholder="Tu correo electrónico..."
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full bg-white text-stone-900 placeholder-stone-400 text-xs sm:text-sm pl-10 pr-4 py-3 rounded-full outline-none focus:ring-2 focus:ring-amber-400 shadow-md"
              />
            </div>
            <button
              type="submit"
              className="bg-amber-500 hover:bg-amber-400 text-stone-950 font-bold px-6 py-3 rounded-full text-xs sm:text-sm transition shadow-md active:scale-95 shrink-0"
            >
              Obtener 10% Dto.
            </button>
          </form>
        )}

        <p className="text-[11px] text-amber-300/60">
          🔒 Respetamos tu privacidad. Puedes darte de baja en cualquier momento con un solo clic.
        </p>

      </div>
    </section>
  );
}