// HLD view — Alex Xu chapters + mocks

function HLDView() {
  const { state, update } = useStore();
  const data = window.PLAN_DATA;
  const setHld = (num, val) => update(prev => ({ ...prev, hld: { ...prev.hld, [num]: val } }));

  const done = data.hld.filter(t => state.hld[t.num]).length;

  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">High-Level Design · 9 chapters + 4 mocks</div>
          <h1 className="h-title">HLD <em>topics</em>.</h1>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="mono" style={{fontSize:'11px',color:'var(--ink-2)'}}>COMPLETE</div>
          <div style={{fontFamily:'var(--serif)',fontSize:'36px',letterSpacing:'-0.02em',marginTop:'2px'}}>
            <CountUp to={done} /> / {data.hld.length}
          </div>
        </div>
      </div>

      <div className="card flat" style={{padding:0,border:'1px solid var(--line-soft)',borderRadius:'var(--r-3)',overflow:'hidden'}}>
        {data.hld.map((t, i) => {
          const isMock = t.source.includes('Mock');
          const isDone = state.hld[t.num];
          return (
            <div key={t.num} style={{
              display:'grid',
              gridTemplateColumns: '50px 1fr 200px 24px',
              padding:'14px 22px',
              gap:'14px',
              alignItems:'center',
              borderBottom: i < data.hld.length-1 ? '1px solid var(--line-soft)' : 'none',
              background: isMock ? 'oklch(0.85 0.16 25 / 0.06)' : 'var(--bg-2)',
              animation: `fadeUp 0.3s ${i*30}ms cubic-bezier(0.2,0.8,0.2,1) both`,
            }}>
              <span className="mono" style={{fontSize:'11px', color: isMock ? 'oklch(0.85 0.16 25)' : 'var(--ink-3)', letterSpacing:'0.08em'}}>
                {isMock ? 'MOCK' : `CH ${t.num}`}
              </span>
              <span style={{fontSize:'14px', textDecoration: isDone ? 'line-through' : 'none', color: isDone ? 'var(--ink-2)' : 'var(--ink)'}}>
                {t.topic.replace(/^Ch \d+:\s*/, '').replace(/^MOCK:\s*/, '')}
              </span>
              <span className="mono" style={{fontSize:'10px', color:'var(--ink-3)', letterSpacing:'0.04em'}}>
                {t.scheduled}
              </span>
              <Check on={isDone} onClick={() => setHld(t.num, !isDone)} size={18} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.HLDView = HLDView;