function ContactForm() {
  const [form, setForm] = React.useState({
    empresa: "", nombre: "", email: "", telefono: "",
    tipoEvento: "", aforo: "", mensaje: "",
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError("");
    try {
      const res = await fetch("https://formspree.io/f/mdabbpza", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          Empresa: form.empresa,
          Nombre: form.nombre,
          Email: form.email,
          "Teléfono": form.telefono,
          "Tipo de evento": form.tipoEvento,
          Aforo: form.aforo,
          Mensaje: form.mensaje,
        }),
      });
      if (res.ok) setSubmitted(true);
      else setError("Ha ocurrido un error. Por favor, escríbenos directamente a zeruaevents@gmail.com");
    } catch {
      setError("Ha ocurrido un error. Por favor, escríbenos directamente a zeruaevents@gmail.com");
    } finally {
      setSending(false);
    }
  };

  if (submitted) {
    return (
      <div
        className="text-center py-16 px-8"
        style={{ backgroundColor: "rgba(245, 237, 224, 0.1)", border: "1px solid rgba(245, 237, 224, 0.2)" }}
      >
        <div className="flex justify-center mb-4">
          <Check size={40} style={{ color: "#B2A496" }} />
        </div>
        <h3 className="text-2xl mb-3" style={{ fontFamily: "'Playfair Display', serif", color: "#F5EDE0" }}>
          Gracias por contactarnos
        </h3>
        <p style={{ color: "rgba(245, 237, 224, 0.8)", fontFamily: "'DM Sans', sans-serif" }}>
          Nos pondremos en contacto contigo en menos de 24 horas con una propuesta personalizada.
        </p>
      </div>
    );
  }

  const inputStyle = {
    backgroundColor: "rgba(245, 237, 224, 0.08)",
    border: "1px solid rgba(245, 237, 224, 0.2)",
    color: "#F5EDE0",
    fontFamily: "'DM Sans', sans-serif",
  };
  const labelStyle = {
    color: "rgba(245, 237, 224, 0.6)",
    fontFamily: "'DM Sans', sans-serif",
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
          <label className="block text-xs font-medium mb-2 tracking-widest uppercase" style={labelStyle}>Empresa *</label>
          <input type="text" required value={form.empresa}
            onChange={(e) => setForm({ ...form, empresa: e.target.value })}
            className="w-full px-4 py-3 text-sm outline-none" style={inputStyle}
            placeholder="Nombre de tu empresa" />
        </div>
        <div>
          <label className="block text-xs font-medium mb-2 tracking-widest uppercase" style={labelStyle}>Nombre *</label>
          <input type="text" required value={form.nombre}
            onChange={(e) => setForm({ ...form, nombre: e.target.value })}
            className="w-full px-4 py-3 text-sm outline-none" style={inputStyle}
            placeholder="Tu nombre" />
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
          <label className="block text-xs font-medium mb-2 tracking-widest uppercase" style={labelStyle}>Email *</label>
          <input type="email" required value={form.email}
            onChange={(e) => setForm({ ...form, email: e.target.value })}
            className="w-full px-4 py-3 text-sm outline-none" style={inputStyle}
            placeholder="tu@empresa.com" />
        </div>
        <div>
          <label className="block text-xs font-medium mb-2 tracking-widest uppercase" style={labelStyle}>Teléfono</label>
          <input type="tel" value={form.telefono}
            onChange={(e) => setForm({ ...form, telefono: e.target.value })}
            className="w-full px-4 py-3 text-sm outline-none" style={inputStyle}
            placeholder="+34 600 000 000" />
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
          <label className="block text-xs font-medium mb-2 tracking-widest uppercase" style={labelStyle}>Tipo de evento</label>
          <select value={form.tipoEvento}
            onChange={(e) => setForm({ ...form, tipoEvento: e.target.value })}
            className="w-full px-4 py-3 text-sm outline-none"
            style={{ ...inputStyle, color: form.tipoEvento ? "#F5EDE0" : "rgba(245, 237, 224, 0.5)" }}>
            <option value="" style={{ backgroundColor: "#5E3719" }}>Selecciona un formato</option>
            <option value="afterwork" style={{ backgroundColor: "#5E3719" }}>Corporate Afterwork</option>
            <option value="team" style={{ backgroundColor: "#5E3719" }}>Team Celebration</option>
            <option value="client" style={{ backgroundColor: "#5E3719" }}>Client Rooftop Experience</option>
            <option value="otro" style={{ backgroundColor: "#5E3719" }}>Otro / No lo sé aún</option>
          </select>
        </div>
        <div>
          <label className="block text-xs font-medium mb-2 tracking-widest uppercase" style={labelStyle}>Aforo estimado</label>
          <select value={form.aforo}
            onChange={(e) => setForm({ ...form, aforo: e.target.value })}
            className="w-full px-4 py-3 text-sm outline-none"
            style={{ ...inputStyle, color: form.aforo ? "#F5EDE0" : "rgba(245, 237, 224, 0.5)" }}>
            <option value="" style={{ backgroundColor: "#5E3719" }}>Número de personas</option>
            <option value="10-25" style={{ backgroundColor: "#5E3719" }}>10 – 25 personas</option>
            <option value="25-50" style={{ backgroundColor: "#5E3719" }}>25 – 50 personas</option>
            <option value="50-100" style={{ backgroundColor: "#5E3719" }}>50 – 100 personas</option>
            <option value="100+" style={{ backgroundColor: "#5E3719" }}>Más de 100 personas</option>
          </select>
        </div>
      </div>
      <div>
        <label className="block text-xs font-medium mb-2 tracking-widest uppercase" style={labelStyle}>Cuéntanos más</label>
        <textarea rows={4} value={form.mensaje}
          onChange={(e) => setForm({ ...form, mensaje: e.target.value })}
          className="w-full px-4 py-3 text-sm outline-none resize-none" style={inputStyle}
          placeholder="Fecha tentativa, objetivo del evento, presupuesto orientativo..." />
      </div>
      {error && (
        <p className="text-sm text-center" style={{ color: "#F5B8A0", fontFamily: "'DM Sans', sans-serif" }}>{error}</p>
      )}
      <button
        type="submit"
        disabled={sending}
        className="w-full py-4 text-sm font-medium tracking-widest uppercase transition-all duration-300"
        style={{ backgroundColor: "#F5EDE0", color: "#5E3719", fontFamily: "'DM Sans', sans-serif", border: "1px solid #F5EDE0", opacity: sending ? 0.7 : 1 }}
        onMouseEnter={(e) => { if (!sending) e.target.style.backgroundColor = "#EDE0CF"; }}
        onMouseLeave={(e) => { if (!sending) e.target.style.backgroundColor = "#F5EDE0"; }}
      >
        {sending ? "Enviando..." : "Solicitar propuesta personalizada"}
      </button>
    </form>
  );
}

window.ContactForm = ContactForm;