/* 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_URL = "https://manual.pausa.pt/";

const PB_POINTS = [
  "What's really driving performance risk in your leadership team",
  "The five pillars Pausa tracks: sleep, stress, recovery, attention, behaviour",
  "How to read your Energy Load Index",
  "A first-step protocol for your 90 days",
];

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 triggerRedirect() {
    window.open(PLAYBOOK_URL, '_blank', 'noopener,noreferrer');
  }

  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 Leader Wellbeing Manual request — " + email.trim(),
      from_name: "Pausa · Manual request",
      email: email.trim(),
      resource: "The Leader Wellbeing Manual",
      message: email.trim() + " requested The Leader Wellbeing Manual 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");
    triggerRedirect();
  }

  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 Leader Wellbeing Manual</h2>
          <p className="pb-lede reveal" style={{ transitionDelay: "100ms" }}>
            A practical guide for founders and leadership teams: understand your energy load, spot early burnout signals, and build a protocol that holds under pressure.
          </p>

        </div>

        <div className="pb-card reveal" style={{ transitionDelay: "120ms" }}>
          <h3 className="pb-card-title">The Leader Wellbeing Manual</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 manual is opening now.{" "}
                <a href={PLAYBOOK_URL} target="_blank" rel="noopener noreferrer">Open 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" ? "Opening…" : "Get the manual — free"}
              </button>
              <p className="pb-micro">PDF · Free · No spam.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Playbook });