/* =============================================================
   Klikk på en knapp i demoen → vi innrømmer at det er en demo,
   og spør om de vil snakke om akkurat den tjenesten.
   ============================================================= */

function apneDemoSkjema(tjeneste) {
  window.dispatchEvent(new CustomEvent("sl:apne-demo", { detail: { tjeneste } }));
}

function DemoSkjema() {
  const [apen, setApen]     = useState(false);
  const [tjeneste, setTj]   = useState("");
  const [steg, setSteg]     = useState(0);
  const [sendt, setSendt]   = useState(false);
  const [feil, setFeil]     = useState("");
  const [data, setData]     = useState({ navn:"", epost:"", nyhetsbrev:false });

  const panelRef  = useRef(null);
  const forsteRef = useRef(null);
  const utloserRef = useRef(null);

  const sett = (k, v) => setData(d => ({ ...d, [k]: v }));

  useEffect(() => {
    const paaApne = (e) => {
      utloserRef.current = document.activeElement;
      setTj((e.detail && e.detail.tjeneste) || "dette");
      setApen(true); setSteg(0); setSendt(false); setFeil("");
    };
    window.addEventListener("sl:apne-demo", paaApne);
    return () => window.removeEventListener("sl:apne-demo", paaApne);
  }, []);

  useEffect(() => {
    document.body.style.overflow = apen ? "hidden" : "";
    if (!apen && utloserRef.current) utloserRef.current.focus();
    return () => { document.body.style.overflow = ""; };
  }, [apen]);

  useEffect(() => {
    if (apen && forsteRef.current) {
      const t = setTimeout(() => forsteRef.current && forsteRef.current.focus(), 260);
      return () => clearTimeout(t);
    }
  }, [apen, steg, sendt]);

  useEffect(() => {
    if (!apen) return;
    const tast = (e) => {
      if (e.key === "Escape") { setApen(false); return; }
      if (e.key !== "Tab" || !panelRef.current) return;
      const f = panelRef.current.querySelectorAll("button:not([disabled]), input, [href]");
      if (!f.length) return;
      const a = f[0], b = f[f.length - 1];
      if (e.shiftKey && document.activeElement === a) { e.preventDefault(); b.focus(); }
      else if (!e.shiftKey && document.activeElement === b) { e.preventDefault(); a.focus(); }
    };
    document.addEventListener("keydown", tast);
    return () => document.removeEventListener("keydown", tast);
  }, [apen]);

  const gyldigEpost = v => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim());

  const send = async () => {
    if (data.navn.trim().length < 2) { setFeil("Skriv inn navnet ditt."); return; }
    if (!gyldigEpost(data.epost))    { setFeil("Sjekk e-postadressen."); return; }
    setFeil("");
    const nyttelast = { ...data, tjeneste, kilde: "demo-" + tjeneste.toLowerCase() };
    if (typeof SKJEMA_ENDEPUNKT !== "undefined" && SKJEMA_ENDEPUNKT) {
      try {
        const r = await fetch(SKJEMA_ENDEPUNKT, {
          method:"POST", headers:{ "Content-Type":"application/json" },
          body: JSON.stringify(nyttelast),
        });
        if (!r.ok) throw new Error();
        setSendt(true);
      } catch { setFeil("Noe gikk galt. Send oss gjerne en e-post: " + MOTTAKER); }
      return;
    }
    window.location.href = "mailto:" + MOTTAKER +
      "?subject=" + encodeURIComponent("Demo — " + tjeneste + " — " + data.navn) +
      "&body=" + encodeURIComponent(
        "Klikket i " + tjeneste + "-demoen på solidlab.no\n\nNavn: " + data.navn +
        "\nE-post: " + data.epost +
        "\nNyhetsbrev: " + (data.nyhetsbrev ? "ja, samtykker" : "nei"));
    setSendt(true);
  };

  const paaTast = e => { if (e.key === "Enter") { e.preventDefault(); send(); } };

  if (!apen) return null;

  return (
    <div className="sl-modal" role="presentation">
      <div className="sl-modal__backdrop" onClick={() => setApen(false)}></div>
      <div className="sl-modal__panel sl-modal__panel--smal" role="dialog" aria-modal="true"
           aria-labelledby="sl-demo-tittel" ref={panelRef}>
        <button className="sl-modal__lukk" onClick={() => setApen(false)} aria-label="Lukk">×</button>

        {sendt ? (
          <div className="sl-modal__ferdig">
            <div className="sl-modal__hake" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
                   strokeLinecap="round" strokeLinejoin="round"><path d="m4 12.5 5.2 5.2L20 7"/></svg>
            </div>
            <h2 id="sl-demo-tittel" className="sl-modal__sporsmaal">Takk, {data.navn.split(" ")[0]}.</h2>
            <p className="sl-modal__hjelp">
              Vi tar kontakt innen én arbeidsdag om {tjeneste.toLowerCase()}.
              {data.nyhetsbrev && " Du er også påmeldt nyhetsbrevet."}
            </p>
            <div className="sl-modal__knapper">
              <button className="sl-btn sl-btn--primary" ref={forsteRef} onClick={() => setApen(false)}>
                Tilbake til demoen
              </button>
            </div>
          </div>
        ) : steg === 0 ? (
          <div className="sl-modal__innhold">
            <span className="sl-slash sl-modal__teller">/ avslørt</span>
            <h2 id="sl-demo-tittel" className="sl-modal__sporsmaal">Dette er bare en demo.</h2>
            <p className="sl-modal__hjelp">
              Knappen gjør ingenting — men vi bygger sånne på ordentlig.
              Vil du snakke med oss om {tjeneste.toLowerCase()}?
            </p>
            <div className="sl-modal__knapper">
              <button className="sl-btn sl-btn--primary" ref={forsteRef} onClick={() => setSteg(1)}>
                Ja, ta kontakt →
              </button>
              <button className="sl-btn sl-btn--ghost" onClick={() => setApen(false)}>
                Nei takk, jeg bare klikker rundt
              </button>
            </div>
          </div>
        ) : (
          <div className="sl-modal__innhold">
            <span className="sl-slash sl-modal__teller">/ {tjeneste.toLowerCase()}</span>
            <h2 id="sl-demo-tittel" className="sl-modal__sporsmaal">Hyggelig. Hvem er du?</h2>
            <p className="sl-modal__hjelp">To felter, så er du ferdig.</p>

            <div className="sl-modal__felt">
              <input ref={forsteRef} className="sl-felt" type="text" value={data.navn}
                     onChange={e => sett("navn", e.target.value)} onKeyDown={paaTast}
                     placeholder="Fornavn og etternavn" autoComplete="name" aria-label="Navn"/>
              <input className="sl-felt" type="email" value={data.epost}
                     onChange={e => sett("epost", e.target.value)} onKeyDown={paaTast}
                     placeholder="din@firma.no" autoComplete="email" aria-label="E-post"/>
              <label className="sl-avkrys">
                <input type="checkbox" checked={data.nyhetsbrev}
                       onChange={e => sett("nyhetsbrev", e.target.checked)}/>
                <span className="sl-avkrys__boks" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
                       strokeLinecap="round" strokeLinejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>
                </span>
                <span className="sl-avkrys__tekst">
                  Ønsker du tilgang på vårt nyhetsbrev?
                  <span className="sl-avkrys__note">Noen ganger i året. Meld deg av når som helst.</span>
                </span>
              </label>
            </div>

            {feil && <p className="sl-modal__feil" role="alert">{feil}</p>}

            <div className="sl-modal__knapper">
              <button className="sl-btn sl-btn--ghost" onClick={() => { setFeil(""); setSteg(0); }}>← Tilbake</button>
              <button className="sl-btn sl-btn--primary" onClick={send}>Send →</button>
              <span className="sl-modal__hint">eller trykk <kbd>Enter</kbd></span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}