// Prospekt modal — shared between index.html and case.html
// Usage:
//   const [open, openModal, closeModal] = useProspektModal();
//   <button onClick={() => openModal('langedam')}>Hent prospekt</button>
//   <ProspektModal open={open} caseId={...} onClose={closeModal} />

function useProspektModal() {
  const [state, setState] = React.useState({ open: false, caseId: null });
  const openModal = React.useCallback((caseId) => setState({ open: true, caseId }), []);
  const closeModal = React.useCallback(() => setState((s) => ({ ...s, open: false })), []);
  return [state, openModal, closeModal];
}

function ProspektModal({ state, onClose }) {
  const { open, caseId } = state;
  const c = caseId && window.BJG_CASES ? window.BJG_CASES[caseId] : null;
  const [submitted, setSubmitted] = React.useState(false);
  const [status, setStatus] = React.useState("idle"); // idle | sending | error
  const [form, setForm] = React.useState({ navn: "", email: "", telefon: "", consent: false, hp: "" });
  const set = (patch) => setForm((f) => ({ ...f, ...patch }));

  React.useEffect(() => {
    if (!open) {
      // Reset success/form state when modal closes
      const t = setTimeout(() => { setSubmitted(false); setStatus("idle"); setForm({ navn: "", email: "", telefon: "", consent: false, hp: "" }); }, 500);
      return () => clearTimeout(t);
    }
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (status === "sending") return;
    if (form.hp) { setSubmitted(true); return; } // honeypot ramt
    setStatus("sending");
    submitLead({
      kilde: "prospekt",
      navn: form.navn, email: form.email, telefon: form.telefon,
      emne: "Prospekt: " + (c ? c.title : ""),
      besked: "Prospekt-anmodning for " + (c ? c.title : "") + ".",
      samtykke: form.consent ? "ja" : "nej"
    }).
    then(() => { setSubmitted(true); setStatus("idle"); }).
    catch(() => setStatus("error"));
  };

  if (!c) {
    return (
      <div className={"pmodal" + (open ? " is-open" : "")} aria-hidden={!open}>
        <div className="pmodal__veil" onClick={onClose} />
        <div className="pmodal__panel" />
      </div>
    );
  }

  return (
    <div className={"pmodal" + (open ? " is-open" : "")} aria-hidden={!open} role="dialog" aria-label="Hent prospekt">
      <div className="pmodal__veil" onClick={onClose} />
      <div className="pmodal__panel">
        <div className="pmodal__top">
          <span className="pmodal__top-eyebrow">Hent prospekt</span>
          <button className="pmodal__close" onClick={onClose} aria-label="Luk">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M6 6l12 12M18 6l-12 12" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        <div className="pmodal__hero" style={{ backgroundImage: `url('${c.heroImage}')` }}>
          <div className="pmodal__hero-text">
            <div className="pmodal__hero-eyebrow">{c.type} · {c.location}</div>
            <h3 className="pmodal__hero-title">{c.title}</h3>
          </div>
        </div>

        <div className="pmodal__body">
          {submitted ? (
            <div className="pmodal__success">
              <div className="pmodal__success-mark">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <h3>Prospektet er på vej.</h3>
              <p>Tak. Du modtager prospektet for {c.title} på den oplyste e-mail inden for et minut. Vi følger op telefonisk inden for to hverdage.</p>
            </div>
          ) : (
            <>
              <p className="pmodal__lede">{c.tagline} Indtast dine oplysninger for at modtage det fulde prospekt — inklusive risikobeskrivelse, juridisk struktur og økonomisk model.</p>

              <div className="pmodal__kpis">
                {c.kpis.map((k, i) => (
                  <div key={i} className="pmodal__kpi">
                    <div className="pmodal__kpi-value">{k.value}</div>
                    <div className="pmodal__kpi-label">{k.label}</div>
                  </div>
                ))}
              </div>

              <form className="pmodal__form" onSubmit={handleSubmit}>
                <div className="pmodal__field">
                  <label className="pmodal__label">Fulde navn</label>
                  <input className="pmodal__input" type="text" required placeholder="Fornavn Efternavn" value={form.navn} onChange={(e) => set({ navn: e.target.value })} />
                </div>
                <div className="pmodal__field">
                  <label className="pmodal__label">E-mail</label>
                  <input className="pmodal__input" type="email" required placeholder="navn@firma.dk" value={form.email} onChange={(e) => set({ email: e.target.value })} />
                </div>
                <div className="pmodal__field">
                  <label className="pmodal__label">Telefon</label>
                  <input className="pmodal__input" type="tel" placeholder="+45" value={form.telefon} onChange={(e) => set({ telefon: e.target.value })} />
                </div>
                {/* honeypot — skjult for mennesker, fanger bots */}
                <input type="text" name="company" tabIndex={-1} autoComplete="off" aria-hidden="true" value={form.hp} onChange={(e) => set({ hp: e.target.value })} style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }} />
                <label className="pmodal__check">
                  <input type="checkbox" required checked={form.consent} onChange={(e) => set({ consent: e.target.checked })} />
                  <span>Jeg bekræfter at være professionel investor eller kvalificeret detailinvestor og accepterer at modtage materialet med tilhørende risikoadvarsler.</span>
                </label>
                {status === "error" &&
                  <p className="pmodal__small" role="alert" style={{ color: "#b3261e" }}>Noget gik galt — prøv igen, eller skriv til kontakt@momentumrealestate.dk.</p>
                }
                <button type="submit" className="pmodal__submit" disabled={status === "sending"}>
                  {status === "sending" ? "Sender…" : "Send mig prospektet"}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
                <p className="pmodal__small">Vi behandler dine oplysninger fortroligt og deler dem ikke med tredjepart.</p>
              </form>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.useProspektModal = useProspektModal;
window.ProspektModal = ProspektModal;