// Program portfolio — CIO-view RAG table.

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

  return (
    <div className="cio-card">
      <div className="cio-card-head">
        <div>
          <span className="eyebrow">Program portfolio</span>
          <h3>Eight modernization programs</h3>
        </div>
        <span className="right">
          {r.ragCount.green} green · {r.ragCount.amber} amber · {r.ragCount.red} red · {r.avgPct}% avg
        </span>
      </div>

      <div className="pp-grid">
        <span className="pph"></span>
        <span className="pph">Program</span>
        <span className="pph">RAG</span>
        <span className="pph">%</span>
        <span className="pph">Booked / fcst</span>
        <span className="pph">Owner</span>
        <span className="pph">Next milestone</span>
        <span className="pph" style={{ textAlign:'right' }}>Drill</span>

        {s.programs.map(p => (
          <a key={p.id} href={p.drillTo} className="pp-row">
            <span><span className={`pp-rag ${p.rag}`}/></span>
            <span>
              <span className="pp-name">{p.name}</span>
              <span className="pp-sub">{p.sub}</span>
            </span>
            <span className="pp-owner" style={{ textTransform:'uppercase', letterSpacing:'0.08em', fontSize:'10px' }}>
              {p.rag}
            </span>
            <span>
              <div className="pp-bar-wrap"><div className="pp-bar" style={{ width: `${p.pctComplete}%` }}/></div>
              <span className="pp-pct" style={{ display:'block', marginTop:3, fontSize:10 }}>{p.pctComplete}%</span>
            </span>
            <span className="pp-money">
              ${p.bookedM.toFixed(1)}M <span className="muted">/ ${p.forecastM.toFixed(1)}M</span>
            </span>
            <span className="pp-owner">{p.owner}</span>
            <span className="pp-milestone">
              {p.milestone}
              <span className="when">{p.milestoneDate}</span>
            </span>
            <span className="pp-arrow">→</span>
          </a>
        ))}
      </div>
    </div>
  );
}