/* Campus AI Framework, Sample AI strategies (#/strategy).
   A different altitude from Adoption pathways: this is the institution's AI
   STRATEGY by type x maturity stage. The framework and its tools are the
   instruments used to execute it. Gateway architecture: a summary grid of
   type x stage cards, each opening a robust, actionable strategy in a
   full-screen overlay (#/strategy/<typeId>/<stageId>). Reads ADOPTION.profiles,
   START tiers, and STRATEGY.detail so vocabulary stays consistent site-wide. */

function StrategyPage() {
  const A = window.ADOPTION;
  const S = window.START;
  const scrollRef = useRef(null);
  const [sel, setSel] = useState(A.profiles[0].id);
  useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; window.scrollTo(0, 0); }, []);
  const p = A.profiles.find(x => x.id === sel) || A.profiles[0];
  const order = S.tierOrder;

  return (
    <div className="page" ref={scrollRef}>
      <nav className="crumbs"><a href="#/">Home</a><Icon name="chevron" size={14} /><span>Sample AI strategies</span></nav>

      <header className="adp-hero">
        <div className="ov-eyebrow">Apply · Strategy</div>
        <h1 className="block-title" style={{ marginBottom: 12 }}>Sample AI strategies</h1>
        <p className="adp-lead">Starting patterns for an institution's AI strategy, by type and by how far along you already are. Find your column, read the priorities for your stage, then open the full strategy for the actionable detail, concrete moves, the governance to stand up, 90-day wins, and what to watch. This is <em>what</em> to pursue; the <a href="#/adoption">adoption pathway</a> is <em>how</em> you stand up the framework to deliver it.</p>
        <a className="strat-brief-link" href="Campus AI Framework - Sample Strategies Brief.html"><Icon name="doc" size={15} /> Printable strategies brief (PDF-ready)</a>
      </header>

      {/* Institution type selector (shared with Adoption pathways) */}
      <div className="adp-tabs">
        {A.profiles.map(pr => (
          <button key={pr.id} className={`adp-tab ${sel === pr.id ? "is-on" : ""}`} onClick={() => setSel(pr.id)}>
            <span className="adp-tab-name">{pr.name}</span>
            <span className="adp-tab-desc">{pr.descriptor}</span>
          </button>
        ))}
      </div>

      <p className="strat-posture">{p.posture}</p>

      {/* Strategy by maturity stage */}
      <div className="strat-stages">
        {order.map(tid => {
          const t = S.tiers[tid];
          const c = p.byStage[tid];
          const d = window.STRATEGY.detail[sel] && window.STRATEGY.detail[sel][tid];
          return (
            <article key={tid} className="strat-card">
              <div className="strat-card-head">
                <span className="strat-stage-ic"><Icon name={t.icon} size={19} /></span>
                <span className="strat-stage-titles">
                  <span className="strat-stage-name">{t.name}</span>
                  <span className="strat-stage-band">{t.band}</span>
                </span>
              </div>
              <p className="strat-where">{c.where}</p>
              <div className="strat-moves-label">Priority moves</div>
              <ul className="strat-moves">
                {c.moves.map((m, i) => <li key={i}><Icon name="arrowRight" size={14} /><span>{m}</span></li>)}
              </ul>
              <div className="strat-signal">
                <Icon name="check" size={14} />
                <span>{c.signal}</span>
              </div>
              {d && (
                <a className="strat-open" href={`#/strategy/${sel}/${tid}`}>
                  Open full strategy <Icon name="arrowRight" size={15} />
                </a>
              )}
            </article>
          );
        })}
      </div>

      <div className="adp-cta">
        <span>Execute with the toolkit:</span>
        <a href="#/maturity">Maturity Assessment</a>
        <a href="#/compass">Strategic Compass</a>
        <a href="#/playbook">Implementation Playbook</a>
        <a href="#/adoption" style={{ fontWeight: 700, color: "var(--accent-ink)" }}>Your adoption pathway →</a>
      </div>
    </div>
  );
}
window.StrategyPage = StrategyPage;

/* ---- Full strategy, in a full-screen overlay ---------------------------- */
function StrategyDetail({ typeId, stageId }) {
  const A = window.ADOPTION;
  const S = window.START;
  const p = A.profiles.find(x => x.id === typeId);
  const t = S.tiers[stageId];
  const d = window.STRATEGY.detail[typeId] && window.STRATEGY.detail[typeId][stageId];

  if (!p || !t || !d) {
    return (
      <ToolOverlay title="Strategy not found" closeHref="#/strategy">
        <div className="sd-wrap"><p className="strat-where">That strategy doesn't exist. <a href="#/strategy">Back to all strategies</a>.</p></div>
      </ToolOverlay>
    );
  }

  const idx = S.tierOrder.indexOf(stageId);
  const nextStage = S.tierOrder[idx + 1];

  return (
    <ToolOverlay
      title={p.name}
      subtitle={`${t.name} stage · sample AI strategy`}
      closeHref="#/strategy"
      newTabHref={`Campus AI Framework - Sample Strategies Brief.html#${typeId}`}
    >
      <div className="sd-wrap">
        {/* Header band */}
        <div className="sd-head">
          <div className="sd-stagechip"><Icon name={t.icon} size={16} /><span>{t.name}</span><span className="sd-band">{t.band}</span></div>
          <p className="sd-thesis">{d.thesis}</p>
          <div className="sd-meta">
            <span className="sd-horizon"><Icon name="target" size={14} /> {d.horizon}</span>
            <span className="sd-where">{p.byStage[stageId].where}</span>
          </div>
        </div>

        {/* Strategic priorities */}
        <section className="sd-sec">
          <h2 className="sd-h2"><span className="sd-h2-num">01</span> Strategic priorities</h2>
          <div className="sd-priorities">
            {d.priorities.map((pr, i) => (
              <article key={i} className="sd-pri">
                <div className="sd-pri-head">
                  <span className="sd-pri-n">{String(i + 1).padStart(2, "0")}</span>
                  <h3 className="sd-pri-name">{pr.name}</h3>
                </div>
                <p className="sd-pri-body">{pr.body}</p>
                <div className="sd-pri-actions-l">Do this now</div>
                <ul className="sd-pri-actions">
                  {pr.actions.map((a, j) => <li key={j}><Icon name="check" size={14} /><span>{a}</span></li>)}
                </ul>
                <a className="sd-pri-tool" href={pr.tool.to}><Icon name="arrowRight" size={14} /> Use the {pr.tool.label}</a>
              </article>
            ))}
          </div>
        </section>

        {/* Two-up: governance + watch-outs */}
        <section className="sd-sec sd-twoup">
          <div className="sd-block sd-gov">
            <h2 className="sd-h2"><span className="sd-h2-num">02</span> Governance to stand up</h2>
            <p className="sd-gov-body">{d.governance}</p>
          </div>
          <div className="sd-block sd-watch">
            <h2 className="sd-h2"><span className="sd-h2-num">03</span> Watch-outs</h2>
            <ul className="sd-watch-list">
              {d.watch.map((w, i) => <li key={i}><Icon name="alert" size={15} /><span>{w}</span></li>)}
            </ul>
          </div>
        </section>

        {/* Two-up: 90-day wins + metrics */}
        <section className="sd-sec sd-twoup">
          <div className="sd-block sd-wins">
            <h2 className="sd-h2"><span className="sd-h2-num">04</span> First 90-day wins</h2>
            <ul className="sd-wins-list">
              {d.wins.map((w, i) => <li key={i}><span className="sd-win-n">{i + 1}</span><span>{w}</span></li>)}
            </ul>
          </div>
          <div className="sd-block sd-metrics">
            <h2 className="sd-h2"><span className="sd-h2-num">05</span> What to measure</h2>
            <div className="sd-metric-list">
              {d.metrics.map((m, i) => (
                <div key={i} className="sd-metric">
                  <div className="sd-metric-m">{m.m}</div>
                  <p className="sd-metric-why">{m.why}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Advance signal + next stage */}
        <section className="sd-advance">
          <div className="sd-adv-signal">
            <Icon name="check" size={18} />
            <div>
              <div className="sd-adv-l">Ready to advance</div>
              <p>{p.byStage[stageId].signal}</p>
            </div>
          </div>
          {nextStage && (
            <a className="sd-adv-next" href={`#/strategy/${typeId}/${nextStage}`}>
              Next: the {S.tiers[nextStage].name} stage strategy <Icon name="arrowRight" size={15} />
            </a>
          )}
        </section>

        {/* Footer routing into the framework */}
        <div className="sd-foot">
          <div className="sd-foot-t">This is the strategy. The framework is how you run it.</div>
          <div className="sd-foot-links">
            <a href="#/adoption">Stand it up: adoption pathway</a>
            <a href="#/maturity">Diagnose: Maturity Assessment</a>
            <a href="#/playbook">Operate: Implementation Playbook</a>
            <a href="#/strategy">All strategies</a>
          </div>
        </div>
      </div>
    </ToolOverlay>
  );
}
window.StrategyDetail = StrategyDetail;