// Framework + gamified maturity dashboard, report modal, cohort, collaborate.
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 }}>{m.title || "AIOps Maturity"}</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 }}>MATURITY 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, fw, onOpenReport }) {
  fw = fw || {};
  return (
    <section data-screen-label="AIOps maturity" className="wrap section-pad" style={{ borderBottom: "1px solid var(--line)" }}>
      <SectionHead eyebrow={fw.eyebrow || "The framework"} title={fw.title || "The AIOps Maturity framework"}
        lede={fw.lede || <>Developed over three years of field research applying cloud AIOps and distributed-systems engineering patterns — pioneered by AWS chief engineer <strong>James Hamilton</strong> — with enterprise customers and university students. Seven ranks from Reactive to Autonomous, scored across five operational dimensions. An education-first engineering practice, not a checklist.</>} wide />
      <Reveal delay={0.12} style={{ margin: "4px 0 24px" }}><button onClick={onOpenReport} className="btn btn-primary">View AIOps Maturity 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 }}>AIOps Maturity 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 }}>{report.recommend}</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}>
          {c.image === null ? (
            <div style={{ width: "100%", height: "100%", minHeight: 360, background: c.imageBg || "linear-gradient(150deg,#1b1030,#4C1D95 60%,#7C3AED)", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 30 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "rgba(255,255,255,0.72)", fontWeight: 700 }}>{c.imageKicker || "90-DAY PROGRAM"}</span>
              <div style={{ fontFamily: "'Playfair Display',Georgia,serif", fontWeight: 800, fontSize: "clamp(26px,3.4vw,38px)", lineHeight: 1.08, color: "#fff", textShadow: "0 6px 30px rgba(0,0,0,0.4)" }}>{c.heading}</div>
              <span style={{ fontSize: 13, color: "rgba(255,255,255,0.8)", fontWeight: 600 }}>{c.imageCaption || ""}</span>
            </div>
          ) : (
            <img src={c.image || "assets/sme-f3e00e84.jpg"} alt={c.imageAlt || "Jarjis Imam teaching an AIOps cohort session"} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          )}
        </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 }}>— {c.quoteAttr || "Jarjis's operating principle"}</span></div>
      </Reveal>
    </section>
  );
}

function Collaborate({ joinRequested, onRequestJoin, collab }) {
  const cb = collab || {};
  const tags = cb.tags || ["90-day program", "Maturity scoring", "Enterprise + student"];
  return (
    <section data-screen-label="Connect" className="wrap section-pad" style={{ borderBottom: "1px solid var(--line)" }}>
      <SectionHead eyebrow={cb.eyebrow || "Collaborate"} title={cb.title || "Work with this SME"} lede={cb.lede || "Enroll your team in the next 90-Day AIOps Challenge cohort. Work directly with Jarjis to lift your AIOps maturity — guided by the RAOARA framework and a scored day-one assessment."} />
      <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" }}>{cb.cardTitle || "Join the 90-Day AIOps Challenge"}</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {tags.map((t, i) => <span key={i} className="collab-tag">{t}</span>)}
            </div>
          </div>
          <div style={{ minWidth: 240, flex: "0 0 auto" }}>
            {joinRequested
              ? <div className="collab-done"><span>{Ico.check({ size: 14 })}</span> {cb.doneMsg || "Request sent — Jarjis's team will reach out about the next cohort."}</div>
              : <button onClick={onRequestJoin} className="btn btn-light btn-lg" style={{ width: "100%" }}>{cb.cta || "Request cohort access"} {Ico.arrow({ size: 15 })}</button>}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

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