/* Lead capture — modal opened from CTAs across the site */

function openLead(reason) {
  window.dispatchEvent(new CustomEvent("open-lead", { detail: { reason: reason || "alert" } }));
}

const LEAD_COPY = {
  alert: {
    icon: "mail", title: "Hlídat nové emise",
    sub: "Nechte nám kontakt a dáme vám vědět, jakmile do registru ČNB přibyde nová emise.",
    bullets: ["Upozornění e-mailem i SMS", "Jen nové emise, žádný spam", "Odhlásíte se jedním kliknutím"],
    cta: "Zapnout upozornění",
  },
  "pdf-bond": {
    icon: "download", title: "Stáhnout kartu dluhopisu",
    sub: "Pošleme vám 1-stránkové PDF s parametry této emise a upozorníme na nové emise emitenta.",
    bullets: ["1-stránkové PDF s parametry emise", "Upozornění na nové emise", "Zdarma, bez závazku"],
    cta: "Odeslat PDF a stáhnout",
  },
  "pdf-detail": {
    icon: "download", title: "Stáhnout přehled emitenta",
    sub: "Pošleme vám 1-stránkový přehled tohoto emitenta a jeho emisí na e-mail.",
    bullets: ["1-stránkové PDF s daty emitenta", "Upozornění na nové emise", "Zdarma, bez závazku"],
    cta: "Odeslat PDF a stáhnout",
  },
  "pdf-compare": {
    icon: "download", title: "Stáhnout srovnání v PDF",
    sub: "Pošleme vám PDF s vaším srovnáním a upozorníme na nové emise vybraných emitentů.",
    bullets: ["PDF s vaším srovnáním", "Upozornění na nové emise", "Zdarma, bez závazku"],
    cta: "Odeslat PDF a stáhnout",
  },
  "watch-issuer": {
    icon: "mail", title: "Sledovat emitenta",
    sub: "Upozorníme vás, jakmile tento emitent vydá novou emisi nebo se změní jeho registrace.",
    bullets: ["Upozornění na nové emise emitenta", "Změny v registru ČNB", "Zdarma, odhlásíte kdykoli"],
    cta: "Sledovat emitenta",
  },
};

function LeadModal() {
  const [open, setOpen] = React.useState(false);
  const [reason, setReason] = React.useState("alert");
  const [email, setEmail] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [done, setDone] = React.useState(false);
  const [consent, setConsent] = React.useState(false);
  const [err, setErr] = React.useState({ email: false, phone: false, consent: false });

  React.useEffect(() => {
    const onOpen = (e) => {
      setReason((e.detail && e.detail.reason) || "alert");
      setDone(false); setErr({ email: false, phone: false, consent: false }); setConsent(false);
      setOpen(true);
    };
    window.addEventListener("open-lead", onOpen);
    return () => window.removeEventListener("open-lead", onOpen);
  }, []);

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

  if (!open) return null;
  const c = LEAD_COPY[reason] || LEAD_COPY.alert;

  const submit = (e) => {
    e.preventDefault();
    const okEmail = /.+@.+\..+/.test(email.trim());
    const okPhone = phone.replace(/\D/g, "").length >= 9;
    if (okEmail && okPhone && consent) { setDone(true); setErr({ email: false, phone: false, consent: false }); }
    else setErr({ email: !okEmail, phone: !okPhone, consent: !consent });
  };
  const errMsg = err.email && err.phone ? "Zadejte platný e-mail i telefonní číslo."
    : err.email ? "Zadejte prosím platnou e-mailovou adresu."
    : err.phone ? "Zadejte prosím platné telefonní číslo (alespoň 9 číslic)." : "";

  return (
    <div className="lead-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
      <div className="lead-modal" role="dialog" aria-modal="true" aria-label={c.title}>
        <div className="lead-modal-top">
          <span className="lead-modal-ic"><Icon name={done ? "check" : c.icon} size={22} /></span>
          <div style={{ paddingTop: 2 }}>
            <h3 style={{ fontSize: 20 }}>{done ? "Hotovo, jste přihlášeni" : c.title}</h3>
          </div>
          <button className="lead-modal-close" onClick={() => setOpen(false)} aria-label="Zavřít"><Icon name="x" size={18} /></button>
        </div>
        <div className="lead-modal-body">
          {done ? (
            <div>
              <p style={{ color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.55 }}>
                {reason === "alert" || reason === "watch-issuer"
                  ? "Ozveme se e-mailem nebo SMS, jakmile bude co hlásit."
                  : "Dokument posíláme na váš e-mail. Zároveň vás upozorníme na nové emise."}
              </p>
              <div style={{ marginTop: 20 }}>
                <Btn variant="primary" onClick={() => setOpen(false)} style={{ width: "100%" }}>Zavřít</Btn>
              </div>
            </div>
          ) : (
            <>
              <p style={{ color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.55 }}>{c.sub}</p>
              <div className="lead-bullets">
                {c.bullets.map((b, i) => <div className="lb" key={i}><Icon name="check" size={15} /> {b}</div>)}
              </div>
              <form onSubmit={submit} noValidate>
                <div className="lead-input-wrap" style={{ marginBottom: 10 }}>
                  <Icon name="mail" size={17} />
                  <input type="email" placeholder="vas@email.cz" value={email} aria-invalid={err.email}
                    onChange={(e) => { setEmail(e.target.value); setErr((p) => ({ ...p, email: false })); }} aria-label="E-mailová adresa" />
                </div>
                <div className="lead-input-wrap">
                  <Icon name="phone" size={17} />
                  <input type="tel" placeholder="+420 777 123 456" value={phone} aria-invalid={err.phone}
                    onChange={(e) => { setPhone(e.target.value); setErr((p) => ({ ...p, phone: false })); }} aria-label="Telefonní číslo" />
                </div>
                {errMsg && <div className="lead-err">{errMsg}</div>}
                <label className={"lead-check" + (err.consent ? " err" : "")}>
                  <input type="checkbox" checked={consent} onChange={(e) => { setConsent(e.target.checked); setErr((p) => ({ ...p, consent: false })); }} />
                  <span>Souhlasím se zpracováním e-mailu a telefonu pro zasílání upozornění na nové emise. Odhlásím se kdykoli. Více v <a href="privacy.html" target="_blank" rel="noopener" style={{ color: "var(--accent-strong)", fontWeight: 500, textDecoration: "underline" }}>zásadách ochrany osobních údajů</a>.</span>
                </label>
                {err.consent && <div className="lead-err">Pro pokračování prosím potvrďte souhlas se zpracováním údajů.</div>}
                <button className="btn btn-primary" type="submit" disabled={!consent} style={{ width: "100%", marginTop: 16, justifyContent: "center" }}>{c.cta} <Icon name="arrowRight" size={16} /></button>
              </form>
              <div className="lead-consent" style={{ marginTop: 12 }}>Vaše údaje neprodáváme a nepředáváme třetím stranám. Více v zásadách GDPR.</div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { openLead, LeadModal });