// CIO dashboard — cross-program modernization view.
// Composes ProgramPortfolio (portfolio RAG grid), CostCurve (trajectory), WaveRoadmap (Gantt).

function CioPage() {
  const s = ProgramStore.useStore();
  const r = ProgramStore.rollups(s);

  return (
    <div className="cio-slide">
      <header className="cio-head">
        <div>
          <span className="eyebrow">CIO view · cloud modernization program</span>
          <h1>Transforming the estate<span className="tilt">. One program, eight workstreams.</span></h1>
        </div>
        <div className="cio-meta">
          <div>
            <span className="ck">Programs</span>
            <span className="cv">{s.programs.length} active</span>
          </div>
          <div>
            <span className="ck">Booked savings</span>
            <span className="cv">${r.totalBooked.toFixed(1)}M</span>
          </div>
          <div>
            <span className="ck">Forecast total</span>
            <span className="cv">${r.totalForecast.toFixed(1)}M</span>
          </div>
          <div>
            <span className="ck">Avg progress</span>
            <span className="cv">{r.avgPct}%</span>
          </div>
        </div>
      </header>

      <div className="cio-row">
        <ProgramPortfolio/>
        <CostCurve/>
      </div>

      <WaveRoadmap/>

      <footer className="cio-nav">
        <div className="cio-sources">
          <strong>Sources</strong>
          <span className="src">Datadog</span>
          <span className="src">Flexera</span>
          <span className="src">Snyk</span>
          <span className="src">Backstage</span>
          <span className="src">Jira</span>
          <span className="src">AWS MAP</span>
        </div>
        <a className="cio-nav-btn" href="capabilities.html">Capability matrix →</a>
      </footer>
    </div>
  );
}