// Framework + gamified leadership dashboard, report modal, cohort, cohort email capture (Sandy Carter).
function SectionHead({ eyebrow, title, lede, wide }) {
  return (
    <>
      <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>
      <Reveal delay={0.05}><h2 className="section-title">{title}</h2></Reveal>
      {lede && <Reveal delay={0.1}><p className="section-lede" style={wide ? { maxWidth: 760 } : null}>{lede}</p></Reveal>}
    </>
  );
}

function MaturityDashboard({ m }) {
  const xpPct = (() => { const n = parseFloat(String(m.xpNow).replace(/[^0-9.]/g, "")) || 0; const mx = parseFloat(String(m.xpMax).replace(/[^0-9.]/g, "")) || 1; return Math.round((n / mx) * 100) + "%"; })();
  const seg = (i) => { const n = i + 1; if (n < m.level) return "seg-done"; if (n === m.level) return "seg-cur"; return "seg-lock"; };
  return (
    <Reveal delay={0.14} className="dash">
      <div className="dash-top">
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div className="lvl-ring"><div style={{ textAlign: "center", lineHeight: 1 }}><div style={{ fontSize: 26, fontWeight: 800, color: "#fff" }}>{m.level}</div><div className="mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--text-2)", fontWeight: 700 }}>LVL</div></div></div>
          <div>
            <div style={{ fontFamily: "'Playfair Display',Georgia,serif", fontWeight: 800, fontSize: 21 }}>Agentic Leadership</div>
            <div className="mono" style={{ color: "var(--violet-bright)", fontWeight: 800, fontSize: 11.5, letterSpacing: "0.14em" }}>{m.rankLabel}</div>
          </div>
        </div>
        <div className="dash-segs">
          <div style={{ display: "flex", gap: 8 }}>{[0, 1, 2, 3, 4, 5, 6].map((i) => <span key={i} className={"seg " + seg(i)}></span>)}</div>
          <div className="mono dash-seg-nums">{["01", "02", "03", "04", "05", "06", "07"].map((n, i) => <span key={i} style={i + 1 === m.level ? { color: "var(--text-2)" } : null}>{n}</span>)}</div>
        </div>
        <div className="dash-xp">
          <div className="mono" style={{ fontSize: 10.5, color: "var(--text-3)", letterSpacing: "0.12em", fontWeight: 700 }}>XP TO {String(m.nextRank).toUpperCase()}</div>
          <div style={{ fontSize: 24, fontWeight: 800, color: "#fff", marginTop: 4 }} className="tabular">{m.xpNow} <span style={{ color: "var(--text-3)", fontSize: 15, fontWeight: 700 }}>/ {m.xpMax}</span></div>
          <div className="xp-track"><span style={{ width: xpPct }}></span></div>
        </div>
      </div>
      <div className="dash-dims">
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--text-3)", marginBottom: 18 }}>LEADERSHIP DIMENSIONS · SCORED /5</div>
        <div className="dims-grid">
          {m.dims.map((dm, i) => (
            <div key={i} className="dim-row">
              <span style={{ fontWeight: 700, fontSize: 13, color: "var(--text)" }}>{dm.name}</span>
              <span className="dim-bar"><span style={{ width: dm.pct + "%" }}></span></span>
              <span style={{ fontSize: 13, fontWeight: 800, color: "var(--text-2)", textAlign: "right" }} className="tabular">{dm.score}</span>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

function Framework({ m, onOpenReport }) {
  return (
    <section data-screen-label="Agentic leadership" className="wrap section-pad" style={{ borderBottom: "1px solid var(--line)" }}>
      <SectionHead eyebrow="The framework" title="The Agentic Leadership Index"
        lede={<>A maturity model for how ready a company’s leadership is for the agentic era — distilled from building a <strong>$5B division at AWS</strong>, scaling a unicorn at Unstoppable Domains, and taking a trust-first company to market at Equs.AI. Seven ranks from Curious to Category-Defining, scored across five executive dimensions.</>} wide />
      <Reveal delay={0.12} style={{ margin: "4px 0 24px" }}><button onClick={onOpenReport} className="btn btn-primary">View leadership report {Ico.arrow({ size: 14 })}</button></Reveal>
      <MaturityDashboard m={m} />
    </section>
  );
}

function ReportModal({ report, onClose }) {
  useEffect(() => { const k = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k); }, [onClose]);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div style={{ fontFamily: "'Playfair Display',Georgia,serif", fontWeight: 800, fontSize: 22 }}>Agentic Leadership Report</div>
            <div style={{ fontSize: 12.5, color: "var(--text-3)", fontWeight: 600 }}>{report.name} · ActionBoard.ai</div>
          </div>
          <button onClick={onClose} className="modal-x">✕</button>
        </div>
        <div style={{ padding: "24px 26px", display: "flex", flexDirection: "column", gap: 24 }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 20, alignItems: "center" }}>
            <div className="lvl-ring"><div style={{ textAlign: "center", lineHeight: 1 }}><div style={{ fontSize: 28, fontWeight: 800, color: "#fff" }}>{report.level}</div><div className="mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--text-2)", fontWeight: 700 }}>LVL</div></div></div>
            <div>
              <div style={{ fontFamily: "'Playfair Display',Georgia,serif", fontWeight: 800, fontSize: 18, color: "#fff" }}>{report.rankLabel}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-3)", fontWeight: 700, margin: "2px 0 10px" }}>Overall score {report.overall} / 5.0</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--text-3)", letterSpacing: "0.1em", fontWeight: 700 }}>XP TO {String(report.nextRank).toUpperCase()} · {report.xpNow} / {report.xpMax}</div>
              <div className="xp-track" style={{ marginTop: 6 }}><span style={{ width: report.xpPct }}></span></div>
            </div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--text-3)", marginBottom: 6 }}>RANK LADDER</div>
            {report.ranks.map((rk, i) => (
              <div key={i} className="rank-row">
                <span className={"rank-badge " + rk.state} >{rk.n}</span>
                <span style={{ fontWeight: 700, fontSize: 13.5, color: rk.state === "locked" ? "var(--text-3)" : "var(--text)" }}>{rk.label}</span>
                <span style={{ marginLeft: "auto", fontSize: 11.5, fontWeight: 700 }} className={"rank-state rs-" + rk.state}>{rk.stateText}</span>
              </div>
            ))}
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--text-3)", marginBottom: 12 }}>DIMENSION SCORES</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {report.dims.map((dd, i) => (
                <div key={i} className="rep-dim">
                  <span style={{ fontWeight: 700, fontSize: 13, color: "var(--text)" }}>{dd.name}</span>
                  <span className="dim-bar"><span style={{ width: dd.pctStr }}></span></span>
                  <span style={{ fontSize: 13, fontWeight: 800, color: "var(--text-2)", textAlign: "right" }} className="tabular">{dd.score}</span>
                  <span style={{ fontSize: 11, fontWeight: 800, textAlign: "right", color: dd.tierColor }}>{dd.tier}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="rec-box">
            <div style={{ fontWeight: 800, fontSize: 14, marginBottom: 6, color: "#fff" }}>Recommended next step</div>
            <div style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.55 }}>Join the Agentic CEO Cohort to advance from {report.rankLabel} toward {report.nextRank} — 90 days of peer work on vision & trust, operating model, and scaling your category.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Cohort({ c }) {
  return (
    <section data-screen-label="Cohort" className="wrap section-pad" style={{ borderBottom: "1px solid var(--line)" }}>
      <SectionHead eyebrow="Cohort program" title={c.heading} lede={c.intro} wide />
      <div className="cohort-grid">
        <Reveal className="cohort-photo" y={26}>
          <image-slot id="sandy-cohort" shape="rect" fit="cover" placeholder="Drop in a cohort or keynote photo" src="assets/sandy-cohort-crop.jpg" style={{ width: "100%", height: "100%" }}></image-slot>
        </Reveal>
        <div className="cohort-weeks">
          {c.weeks.map((w, i) => (
            <Reveal key={i} delay={i * 0.07} className="week-card">
              <span className="week-badge mono">{w.w}</span>
              <div><div style={{ fontWeight: 800, fontSize: 15, marginBottom: 4, color: "var(--head)" }}>{w.title}</div><div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-2)" }}>{w.body}</div></div>
            </Reveal>
          ))}
        </div>
      </div>
      <Reveal delay={0.1} className="quote-band">
        <span className="quote-mark">“</span>
        <div style={{ fontSize: 15.5, lineHeight: 1.55, color: "var(--head)", fontWeight: 600 }}>{c.quote} <span style={{ color: "var(--text-2)", fontWeight: 700 }}>— Sandy&#39;s operating principle</span></div>
      </Reveal>
    </section>
  );
}

// Collaborate: "Join my cohort" — email capture that sends the member a link.
function Collaborate({ email, setEmail, sent, error, onSubmit }) {
  return (
    <section data-screen-label="Connect" className="wrap section-pad" style={{ borderBottom: "1px solid var(--line)" }}>
      <SectionHead eyebrow="Join a cohort" title="Lead your AI transformation with Sandy" lede="Bring your executive team into the next Agentic CEO Cohort. Ninety days of peer work on trust, agentic operating models, and go-to-market — guided directly by Sandy and scored on the Agentic Leadership Index." />
      <Reveal delay={0.12} className="collab-card">
        <div className="collab-body">
          <span className="collab-ico">{Ico.arrow({ size: 20 })}</span>
          <div style={{ flex: 1, minWidth: 260 }}>
            <div style={{ fontWeight: 800, fontSize: 21, marginBottom: 8, color: "#fff" }}>Join the Agentic CEO Cohort</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {["90-day program", "CEO & C-suite peers", "Trust-first operating model"].map((t, i) => <span key={i} className="collab-tag">{t}</span>)}
            </div>
          </div>
          <div style={{ minWidth: 300, flex: "0 0 auto" }}>
            {sent
              ? <div className="collab-done"><span>{Ico.check({ size: 14 })}</span> Link sent to {sent} — check your inbox for your cohort invite.</div>
              : (
                <form onSubmit={onSubmit} noValidate>
                  <div className="cohort-form">
                    <input className="cohort-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" aria-label="Your work email" autoComplete="email" />
                    <button type="submit" className="btn btn-light btn-lg">Send me the link {Ico.arrow({ size: 15 })}</button>
                  </div>
                  <div className={"cohort-hint" + (error ? " cohort-err" : "")}>{error || "I\u2019ll email you a private link to join the next cohort — no spam, ever."}</div>
                </form>
              )}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

Object.assign(window, { SectionHead, MaturityDashboard, Framework, ReportModal, Cohort, Collaborate });