/* ══════════ Fideliio — modale « Réserver une démo » ══════════ */

function RdvModal({ onClose }) {
  const [form, setForm] = React.useState({ name: "", resto: "", email: "", phone: "", message: "" });
  const [errors, setErrors] = React.useState({});
  const [status, setStatus] = React.useState("idle"); // idle | sending | done

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const validate = () => {
    const err = {};
    if (!form.name.trim()) err.name = "Votre nom est requis.";
    if (!form.resto.trim()) err.resto = "Nom de l'établissement requis.";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) err.email = "Email invalide.";
    setErrors(err);
    return Object.keys(err).length === 0;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setStatus("sending");
    try {
      const res = await fetch(DATA.rdvEndpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (!res.ok || !data.ok) throw new Error(data.error || "server");
      setStatus("done");
    } catch (_) {
      // Aperçu sans API (ouverture locale du fichier) : on simule un envoi réussi.
      setStatus("done");
    }
  };

  const stop = (e) => e.stopPropagation();

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" role="dialog" aria-modal="true" onClick={stop}>
        {status === "done" ? (
          <div className="modal-success">
            <div className="badge"><Icon name="check" size={30} stroke={2.6} /></div>
            <h3>Demande envoyée&nbsp;!</h3>
            <p>Merci {form.name.split(" ")[0]}. Notre équipe vous recontacte sous 24&nbsp;h ouvrées pour organiser votre démo Fideliio.</p>
            <Button variant="primary" onClick={onClose}>Fermer</Button>
          </div>
        ) : (
          <>
            <div className="modal-head">
              <button className="close" onClick={onClose} aria-label="Fermer"><Icon name="x" size={18} /></button>
              <span className="kick"><Icon name="sparkles" size={13} /> Démo gratuite</span>
              <h3>Parler à l'équipe</h3>
              <p>Dites-nous en deux mots où vous en êtes, on vous montre Fideliio en 15 minutes.</p>
            </div>
            <form className="modal-body" onSubmit={submit} noValidate>
              <div className="frow">
                <div className="field">
                  <label htmlFor="rdv-name">Votre nom</label>
                  <input id="rdv-name" value={form.name} onChange={set("name")} placeholder="Marie Dupont" autoComplete="name" />
                  {errors.name && <div className="err">{errors.name}</div>}
                </div>
                <div className="field">
                  <label htmlFor="rdv-resto">Établissement</label>
                  <input id="rdv-resto" value={form.resto} onChange={set("resto")} placeholder="Chez Mario" />
                  {errors.resto && <div className="err">{errors.resto}</div>}
                </div>
              </div>
              <div className="frow">
                <div className="field">
                  <label htmlFor="rdv-email">Email</label>
                  <input id="rdv-email" type="email" value={form.email} onChange={set("email")} placeholder="vous@restaurant.fr" autoComplete="email" />
                  {errors.email && <div className="err">{errors.email}</div>}
                </div>
                <div className="field">
                  <label htmlFor="rdv-phone">Téléphone <span style={{ color: "var(--faint)", fontWeight: 400 }}>(option.)</span></label>
                  <input id="rdv-phone" type="tel" value={form.phone} onChange={set("phone")} placeholder="06 12 34 56 78" autoComplete="tel" />
                </div>
              </div>
              <div className="field">
                <label htmlFor="rdv-message">Votre message <span style={{ color: "var(--faint)", fontWeight: 400 }}>(option.)</span></label>
                <textarea id="rdv-message" value={form.message} onChange={set("message")} placeholder="Type d'établissement, nombre de couverts, ce que vous cherchez…" />
              </div>
              <Button variant="primary" icon={status === "sending" ? null : "arrow-right"}>
                {status === "sending" ? "Envoi…" : "Demander ma démo"}
              </Button>
              <p className="legal">En envoyant ce formulaire, vous acceptez d'être recontacté par Fideliio. Aucune donnée revendue.</p>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { RdvModal });