// Strategic Principles + Phases overview

function PrinciplesView() {
  const data = window.PLAN_DATA;
  const TODAY = useToday();
  const curPhase = currentPhaseFor(TODAY);
  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">The Operating System</div>
          <h1 className="h-title"><em>Eight</em> principles.<br/><em>Four</em> phases.</h1>
        </div>
      </div>

      {/* Phases */}
      <div style={{marginBottom:'40px'}}>
        <div style={{fontFamily:'var(--serif)',fontSize:'24px',letterSpacing:'-0.015em',marginBottom:'14px'}}>The arc</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(5, 1fr)',gap:'10px'}}>
          {data.phases.map((p, i) => (
            <div key={p.id} className="card" style={{
              padding:'18px 16px',
              animation:`fadeUp 0.4s ${i*60}ms cubic-bezier(0.2,0.8,0.2,1) both`,
              borderColor: p.id === curPhase.id ? 'var(--accent)' : 'var(--line-soft)',
            }}>
              <div className="mono" style={{fontSize:'10px',letterSpacing:'0.14em',color: p.id === curPhase.id ? 'var(--accent)' : 'var(--ink-3)'}}>
                {p.name}
              </div>
              <div style={{fontFamily:'var(--serif)',fontSize:'18px',letterSpacing:'-0.01em',marginTop:'6px',lineHeight:1.15}}>
                {p.focus}
              </div>
              <div className="mono muted" style={{fontSize:'10px',marginTop:'10px',letterSpacing:'0.04em'}}>
                {p.dates} · {p.duration}
              </div>
              <div style={{height:'1px',background:'var(--line-soft)',margin:'12px 0'}}/>
              <div style={{fontSize:'12px',color:'var(--ink-2)',lineHeight:1.5}}>
                <span className="mono" style={{fontSize:'9px',letterSpacing:'0.1em',color:'var(--ink-3)'}}>OUT →</span> {p.output}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Principles */}
      <div style={{fontFamily:'var(--serif)',fontSize:'24px',letterSpacing:'-0.015em',marginBottom:'14px'}}>The principles</div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2, 1fr)',gap:'12px'}}>
        {data.principles.map((p, i) => (
          <div key={p.n} className="card" style={{
            padding:'22px',
            animation:`fadeUp 0.4s ${i*50}ms cubic-bezier(0.2,0.8,0.2,1) both`,
            display:'grid',
            gridTemplateColumns:'48px 1fr',
            gap:'16px',
            alignItems:'flex-start',
          }}>
            <div style={{
              fontFamily:'var(--serif)',
              fontSize:'48px',
              lineHeight:0.85,
              color:'var(--accent)',
              fontStyle:'italic',
            }}>{p.n}</div>
            <div>
              <div style={{fontFamily:'var(--serif)',fontSize:'20px',letterSpacing:'-0.01em',lineHeight:1.2,marginBottom:'8px'}}>
                {p.title}
              </div>
              <div className="dim" style={{fontSize:'13px',lineHeight:1.55}}>{p.body}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.PrinciplesView = PrinciplesView;