/* global React */
const { useState: usePbState } = React;

/* Lead-magnet download band — captures the email via Web3Forms (so the
   owner is notified at yaro@pausa.pt) and then serves the PDF. */
const PLAYBOOK_KEY = "e1f43f3f-17b9-4164-a588-cc235cdb160d";
const PLAYBOOK_PDF = "pausa/CSRD-Wellbeing-Playbook-2026.pdf";
const PLAYBOOK_FILENAME = "The CSRD Wellbeing Playbook 2026 — Pausa.pdf";

const PB_POINTS = [
  "What CSRD / ESRS S1 actually requires of you",
  "A 12-month implementation roadmap",
  "ESRS S1 readiness checklist — 12 items",
  "The Pausa methodology — in plain language",
];

function PbCheck() {
  return (
    <span className="pb-check" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="1.2" opacity="0.55" />
        <path d="M7.5 12.4l3 3 6-6.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
  );
}

function DownloadIcon() {
  return (
    <svg className="pb-dl-ico" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 3.5v11M12 14.5l-4.2-4.2M12 14.5l4.2-4.2" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M4.5 18.5h15" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
    </svg>
  );
}

function Playbook() {
  const [email, setEmail] = usePbState("");
  const [status, setStatus] = usePbState("idle"); // idle | sending | done
  const [err, setErr] = usePbState("");

  function triggerDownload() {
    const a = document.createElement("a");
    a.href = PLAYBOOK_PDF;
    a.download = PLAYBOOK_FILENAME;
    a.rel = "noopener";
    document.body.appendChild(a);
    a.click();
    a.remove();
  }

  async function submit(ev) {
    ev.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      setErr("Enter a valid email so we can send it over.");
      return;
    }
    setErr("");
    setStatus("sending");
    const payload = {
      access_key: PLAYBOOK_KEY,
      subject: "New CSRD Playbook download — " + email.trim(),
      from_name: "Pausa · Playbook download",
      email: email.trim(),
      resource: "The CSRD Wellbeing Playbook 2026",
      message: email.trim() + " downloaded The CSRD Wellbeing Playbook 2026 from pausa.pt.",
    };
    try {
      await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(payload),
      });
    } catch (e) {
      /* never block the download on a network hiccup */
    }
    setStatus("done");
    triggerDownload();
  }

  return (
    <section className="playbook" id="playbook">
      <div className="wrap pb-grid">
        <div className="pb-intro">
          <span className="pb-eyebrow reveal">Free resource</span>
          <h2 className="display pb-title reveal">The CSRD Wellbeing Playbook</h2>
          <p className="pb-lede reveal" style={{ transitionDelay: "100ms" }}>
            Everything your team needs to understand ESRS S1, measure psychosocial risk, and implement a compliant wellbeing programme — in one practical guide built for HR leaders.
          </p>
          <ul className="pb-list reveal" style={{ transitionDelay: "160ms" }}>
            {PB_POINTS.map((p) => (
              <li className="pb-item" key={p}><PbCheck /><span>{p}</span></li>
            ))}
          </ul>
        </div>

        <div className="pb-card reveal" style={{ transitionDelay: "120ms" }}>
          <h3 className="pb-card-title">The CSRD Wellbeing Playbook</h3>
          <span className="pb-card-meta">Pausa · Lisbon · 2026 · Free</span>

          {status === "done" ? (
            <div className="pb-done">
              <span className="pb-done-ico" aria-hidden="true">
                <svg viewBox="0 0 26 26" fill="none"><path d="M6 13.5l4.6 4.5L20 7.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </span>
              <p className="pb-done-title">Your download is starting.</p>
              <p className="pb-done-sub">
                Thanks — the PDF should be in your downloads. Didn't get it?{" "}
                <a onClick={triggerDownload}>Download again</a>.
              </p>
            </div>
          ) : (
            <form className="pb-form" onSubmit={submit} noValidate>
              <div className={"pb-field" + (err ? " invalid" : "")}>
                <input
                  type="email" value={email} inputMode="email" autoComplete="email"
                  onChange={(e) => { setEmail(e.target.value); if (err) setErr(""); }}
                  placeholder="your@email.com" aria-label="Your email"
                />
                {err ? <span className="pb-err">{err}</span> : null}
              </div>
              <button type="submit" className="pb-btn" disabled={status === "sending"}>
                <DownloadIcon />
                {status === "sending" ? "Preparing…" : "Download the playbook — free"}
              </button>
              <p className="pb-micro">PDF · Free · No spam.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Playbook });