// Track Record list page + individual case study detail pages

const TrackRecord = ({ setRoute }) => {
  const list = Object.entries(cases);
  return (
    <div>
      <Section label="02 · Track Record" title="Engagements." sub="Each engagement is documented in full — thesis, work, and outcome. Click any company to read the deep-dive.">
        <div style={{ borderTop: `1px solid ${tokens.ink}` }}>
          {list.map(([slug, c]) => (
            <div key={slug} onClick={() => setRoute(`case:${slug}`)} style={{
              display: 'grid', gridTemplateColumns: '80px 1.6fr 2.4fr 1fr 1fr 60px',
              alignItems: 'center', gap: '24px',
              padding: '36px 0', borderBottom: `1px solid ${tokens.inkLine}`,
              cursor: 'pointer',
            }}>
              <div style={{ fontFamily: fontMono, fontSize: '13px', color: tokens.ink, letterSpacing: '0.06em' }}>{c.ticker}</div>
              <div>
                <div style={{ fontSize: '28px', letterSpacing: '-0.025em' }}>{c.name}</div>
                <div style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, letterSpacing: '0.06em', marginTop: '4px' }}>{c.sector.toUpperCase()}</div>
              </div>
              <div style={{ fontSize: '15px', color: tokens.inkSoft, lineHeight: 1.5, letterSpacing: '-0.005em', maxWidth: '500px' }}>{c.thesis}</div>
              <div style={{ fontFamily: fontMono, fontSize: '12px', color: tokens.inkSoft, letterSpacing: '0.04em' }}>{c.period}</div>
              <div style={{ fontFamily: fontMono, fontSize: '11px', color: c.status === 'Active' ? tokens.green : tokens.inkMute, letterSpacing: '0.12em', textTransform: 'uppercase' }}>● {c.status}</div>
              <div style={{ textAlign: 'right', fontFamily: fontMono, fontSize: '14px', color: tokens.ink }}>→</div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
};

const CaseStudy = ({ slug, setRoute }) => {
  const c = cases[slug];
  if (!c) return <div style={{ padding: '120px 56px' }}>Case not found.</div>;
  const emp = (employers[c.employer] || {});

  return (
    <div>
      {/* Breadcrumb + Header */}
      <section style={{ padding: '40px 56px 0', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.12em', color: tokens.inkMute, marginBottom: '24px' }}>
          <span style={{ cursor: 'pointer' }} onClick={() => setRoute('home')}>HOME</span>
          <span style={{ margin: '0 12px' }}>/</span>
          <span style={{ cursor: 'pointer' }} onClick={() => setRoute('investments')}>INVESTMENTS</span>
          <span style={{ margin: '0 12px' }}>/</span>
          <span style={{ color: tokens.ink }}>{c.ticker}</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '64px', paddingBottom: '64px', alignItems: 'flex-end' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '24px' }}>
              <div style={{ width: '40px', height: '40px', borderRadius: '4px', background: c.color, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: fontMono, fontSize: '13px', letterSpacing: '0.04em' }}>
                {c.ticker.slice(0,2)}
              </div>
              <div style={{ fontFamily: fontMono, fontSize: '12px', letterSpacing: '0.12em', color: tokens.inkMute }}>
                {c.ticker} · {c.sector.toUpperCase()}
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: '7px', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.1em', color: tokens.inkMute, textTransform: 'uppercase' }}>
                <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: emp.color || tokens.inkMute }}></span>
                {emp.name || ''}{c.period ? ` · ${c.period}` : ''}
              </div>
            </div>
            <h1 style={{ fontSize: '88px', lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 400, margin: 0, marginBottom: '24px' }}>
              {c.name}.
            </h1>
            <div style={{ fontSize: '28px', letterSpacing: '-0.025em', color: tokens.inkSoft, lineHeight: 1.2, fontStyle: 'italic', fontWeight: 300, maxWidth: '700px' }}>
              {c.thesis}.
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '32px 48px', borderTop: `1px solid ${tokens.ink}`, paddingTop: '24px' }}>
            {[
              ['Firm', emp.name || '—'],
              ['Sector', c.sector],
              ['Period', c.period],
              ['Type', c.kind === 'public' ? 'Public markets' : 'Private'],
            ].map(([k,v]) => (
              <div key={k}>
                <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.16em', color: tokens.inkMute, marginBottom: '8px' }}>{k.toUpperCase()}</div>
                <div style={{ fontSize: '24px', letterSpacing: '-0.025em', fontFamily: fontDisplay }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CHART */}
      <section style={{ padding: '64px 56px', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: '24px' }}>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute }}>SHARE PRICE · {c.ticker}</div>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: tokens.inkMute }}>STYLIZED · ILLUSTRATIVE</div>
        </div>
        <StockChart shape={c.chartShape} ticker={c.ticker} px={c.px} pxChange={c.pxChange} color={c.color} accent={c.accent} height={360} />
      </section>

      {/* THESIS BODY */}
      <section style={{ padding: '120px 56px', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '64px' }}>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, paddingTop: '8px' }}>THESIS</div>
          <div>
            <p style={{ fontSize: '24px', lineHeight: 1.45, letterSpacing: '-0.015em', color: tokens.ink, maxWidth: '820px', margin: 0, marginBottom: '48px' }}>
              {c.summary}
            </p>
            <div style={{ borderTop: `1px solid ${tokens.ink}`, paddingTop: '32px' }}>
              <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '24px' }}>THE WORK</div>
              <ol style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                {c.bullets.map((b, i) => (
                  <li key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: '20px', padding: '20px 0', borderBottom: `1px solid ${tokens.inkLineSoft}`, alignItems: 'baseline' }}>
                    <span style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, letterSpacing: '0.06em' }}>{String(i+1).padStart(2,'0')}</span>
                    <span style={{ fontSize: '17px', lineHeight: 1.5, letterSpacing: '-0.005em' }}>{b}</span>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* AT A GLANCE — colored brand banner (illustrative, career framing) */}
      <section style={{ padding: '0', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div style={{ background: c.color, color: '#fff', padding: '80px 56px', minHeight: '360px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', opacity: 0.7 }}>AT A GLANCE</div>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <div style={{ fontSize: '60px', lineHeight: 0.95, letterSpacing: '-0.04em', fontWeight: 300, marginBottom: '16px' }}>
              {c.thesis}<br/>
              <span style={{ fontStyle: 'italic', opacity: 0.7 }}>{c.name}</span>
            </div>
            <div style={{ fontSize: '15px', opacity: 0.85, maxWidth: '480px', lineHeight: 1.55 }}>
              {c.kind === 'public' ? 'A public-market engagement' : 'A private investment'}{emp.name ? ` from my time at ${emp.name}` : ''}. The detail above reflects the thesis and the work; any figures shown are illustrative.
            </div>
          </div>
          <div style={{ display: 'flex', gap: '40px', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.08em', opacity: 0.8, flexWrap: 'wrap' }}>
            {emp.name && <span>{emp.name.toUpperCase()}</span>}
            <span>{c.kind === 'public' ? 'PUBLIC MARKETS' : 'PRIVATE'}</span>
            {c.period && <span>{c.period}</span>}
          </div>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.08, backgroundImage: 'repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 32px)', pointerEvents: 'none' }}></div>
        </div>
      </section>

      {/* DOCUMENTS — real per-investment case files */}
      <section style={{ padding: '80px 56px', borderBottom: `1px solid ${tokens.inkLine}`, background: tokens.bgAlt }}>
        <InvestmentDocs ticker={c.ticker} accent={c.accent} />
      </section>

      {/* RELATED + NEXT */}
      <section style={{ padding: '80px 56px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <button onClick={() => setRoute('investments')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: fontDisplay, fontSize: '14px', color: tokens.ink, borderBottom: `1px solid ${tokens.ink}`, paddingBottom: '4px' }}>
            ← All investments
          </button>
          <div style={{ fontFamily: fontMono, fontSize: '11px', color: tokens.inkMute, letterSpacing: '0.06em' }}>
            ILLUSTRATIVE · FOR DISCUSSION · NOT INVESTMENT ADVICE
          </div>
        </div>
      </section>
    </div>
  );
};

window.TrackRecord = TrackRecord;
window.CaseStudy = CaseStudy;