function ContactModal() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [step, setStep] = React.useState(1);
  const [selection, setSelection] = React.useState({ need: "", extra: "" });
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState("");
  const [formData, setFormData] = React.useState({
    fullName: "",
    phoneWhatsapp: "",
    email: "",
    details: "",
  });

  React.useEffect(() => {
    const handleOpen = () => { setIsOpen(true); setStep(1); };
    window.addEventListener("openContactModal", handleOpen);
    return () => window.removeEventListener("openContactModal", handleOpen);
  }, []);

  if (!isOpen) return null;

  const close = () => {
    setIsOpen(false);
    setTimeout(() => {
      setStep(1);
      setSelection({ need: "", extra: "" });
      setSubmitting(false);
      setSubmitError("");
      setFormData({ fullName: "", phoneWhatsapp: "", email: "", details: "" });
    }, 300);
  };

  const handleNeed = (n) => {
    setSelection(prev => ({ ...prev, need: n }));
    setStep(2);
  };

  const handleExtra = (x) => {
    setSelection(prev => ({ ...prev, extra: x }));
    setStep(3);
  };

  const onFieldChange = (field) => (e) => {
    const value = e.target.value;
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const submit = async (e) => {
    e.preventDefault();
    setSubmitError("");
    setSubmitting(true);

    const payload = {
      full_name: formData.fullName.trim(),
      phone_whatsapp: formData.phoneWhatsapp.trim(),
      email: formData.email.trim(),
      details: formData.details.trim() || null,
      need: selection.need || null,
      urgency: selection.extra || null,
      source_page: window.location.pathname + window.location.hash,
    };

    if (!window.DiscoverSupabase || typeof window.DiscoverSupabase.insertContactLead !== "function") {
      setSubmitting(false);
      setSubmitError("Connexion base de donnees non configuree. Ajoutez vos cles Supabase.");
      return;
    }

    const result = await window.DiscoverSupabase.insertContactLead(payload);
    setSubmitting(false);

    if (!result.ok) {
      setSubmitError("Impossible d'envoyer le formulaire pour le moment. Verifiez la configuration Supabase.");
      return;
    }

    setStep(4);
  };

  return (
    <div className="modal-backdrop" onClick={close}>
      <div className="modal-box popup-anim" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={close}><Icon.X /></button>
        <div className="modal-body">
          {step === 1 && (
            <div className="modal-step popup-anim">
              <span className="modal-sup">Étape 1 sur 3</span>
              <h3>Quel est ton besoin principal ?</h3>
              <p className="modal-desc">Sélectionne le besoin qui correspond le mieux à tes attentes.</p>
              <div className="modal-options">
                <button className="modal-opt" onClick={() => handleNeed("Création de site vitrine")}>Création de site vitrine</button>
                <button className="modal-opt" onClick={() => handleNeed("Boutique e-commerce")}>Boutique e-commerce</button>
                <button className="modal-opt" onClick={() => handleNeed("Infogérance & Maintenance")}>Infogérance & Maintenance</button>
                <button className="modal-opt" onClick={() => handleNeed("Autre demande IT")}>Autre demande IT</button>
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="modal-step popup-anim">
              <span className="modal-sup">Étape 2 sur 3</span>
              <h3>Une précision supplémentaire ?</h3>
              <p className="modal-desc">Ceci nous aidera à diriger ta demande au bon expert.</p>
              <div className="modal-options">
                <button className="modal-opt" onClick={() => handleExtra("Urgent")}>🚨 C est plutôt urgent (Ce mois-ci)</button>
                <button className="modal-opt" onClick={() => handleExtra("Pas urgent")}>☕ Pas d urgence immédiate</button>
                <button className="modal-opt" onClick={() => handleExtra("Refonte")}>♻️ Refonte totale d un existant</button>
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="modal-step popup-anim">
             <span className="modal-sup">Étape 3 sur 3</span>
              <h3>Où peut-on te recontacter ?</h3>
               <p className="modal-desc">Laisse-nous tes coordonnées, nous revenons vers toi très vite.</p>
              <form onSubmit={submit} className="modal-form">
                <input
                  type="text"
                  placeholder="Nom et prénom"
                  value={formData.fullName}
                  onChange={onFieldChange("fullName")}
                  required
                />
                <input
                  type="tel"
                  placeholder="Numéro de téléphone / WhatsApp"
                  value={formData.phoneWhatsapp}
                  onChange={onFieldChange("phoneWhatsapp")}
                  required
                />
                <input
                  type="email"
                  placeholder="Adresse email"
                  value={formData.email}
                  onChange={onFieldChange("email")}
                  required
                />
                <textarea
                  rows="3"
                  placeholder="Détails"
                  value={formData.details}
                  onChange={onFieldChange("details")}
                ></textarea>
                {submitError && <div className="modal-error">{submitError}</div>}
                <button
                  type="submit"
                  className="btn btn-primary"
                  disabled={submitting}
                  style={{ width: "100%", justifyContent: "center", marginTop: 10 }}
                >
                  {submitting ? "Envoi en cours..." : "Envoyer ma demande"}
                </button>
              </form>
            </div>
          )}
          {step === 4 && (
            <div className="modal-step popup-anim">
              <span className="modal-sup">Demande envoyée</span>
              <h3>Merci, ta demande a bien été envoyée.</h3>
              <p className="modal-desc">Tu peux nous écrire directement sur WhatsApp pour accélérer les échanges.</p>
              <div className="modal-options">
                <a
                  className="btn btn-primary"
                  href="https://wa.me/4917687563348"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ width: "100%", justifyContent: "center" }}
                >
                  Contacter sur WhatsApp
                </a>
                <button
                  className="modal-opt"
                  onClick={close}
                  style={{ textAlign: "center" }}
                >
                  Fermer
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.ContactModal = ContactModal;