// Companies page — combines Track Record (current) + Prospects (under evaluation)
// Plus the existing CaseStudy detail page (kept as-is, just re-imported)

const Companies = ({ setRoute }) => {
  const current = Object.entries(cases);
  const stages = ['initial-dd', 'deep-dd', 'waiting-asymmetry', 'passed'];

  return (
    <div>
      <section style={{ padding: '80px 56px', borderBottom: `1px solid ${tokens.inkLine}` }}>
        <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.18em', color: tokens.inkMute, marginBottom: '24px' }}>02 · COMPANIES</div>
        <h1 style={{ fontSize: '88px', lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 400, margin: 0, marginBottom: '32px' }}>Companies.</h1>
        <p style={{ fontSize: '22px', lineHeight: 1.45, letterSpacing: '-0.015em', color: tokens.inkSoft, maxWidth: '780px' }}>
          Where the capital is — and where it might go next. Current investments link to the full thesis and case study; prospective names link to the working write-up and where each sits in the diligence funnel.
        </p>
      </section>

      {/* CURRENT INVESTMENTS */}
      <Section label="2.1 · Current Investments" title="Where the capital is." sub="Concentrated, patient, and engaged. Click any name for the full thesis, share-price chart, operating model, and engagement timeline.">
        <div style={{ borderTop: `1px solid ${tokens.ink}` }}>
          {current.map(([slug, c]) => (
            <div key={slug} onClick={() => setRoute(`case:${slug}`)} className="case-row" style={{
              display: 'grid', gridTemplateColumns: '80px 1.4fr 2fr 1fr 1fr 60px',
              alignItems: 'center', gap: '24px',
              padding: '32px 0', borderBottom: `1px solid ${tokens.inkLine}`, cursor: 'pointer',
            }}>
              <div style={{ fontFamily: fontMono, fontSize: '13px', letterSpacing: '0.06em' }}>{c.ticker}</div>
              <div>
                <div style={{ fontSize: '24px', 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' }}>→</div>
            </div>
          ))}
        </div>
      </Section>

      {/* PROSPECTIVE INVESTMENTS */}
      <Section label="2.2 · Prospective Investments" title="What we're working on next." sub="Names under active evaluation. Each card shows where the work sits in the funnel — initial DD, deep DD, waiting on asymmetry, or passed." style={{ background: tokens.bgAlt }}>
        {/* legend */}
        <div style={{ display: 'flex', gap: '24px', marginBottom: '32px', flexWrap: 'wrap', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.08em', color: tokens.inkMute }}>
          {stages.map((s, i) => (
            <div key={s} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: stageMeta[s].color }}></span>
              <span style={{ textTransform: 'uppercase' }}>{stageMeta[s].label}</span>
              <span style={{ color: 'rgba(14,14,12,0.3)' }}>· STEP {i+1}</span>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
          {prospects.map(p => {
            const meta = stageMeta[p.stage];
            return (
              <div key={p.slug} style={{ background: tokens.paper, border: `1px solid ${tokens.inkLine}`, padding: '28px', cursor: 'pointer', position: 'relative' }} className="case-row">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '20px', marginBottom: '20px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <div style={{ width: '32px', height: '32px', borderRadius: '4px', background: p.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: fontMono, fontSize: '11px' }}>
                      {p.ticker.slice(0,2)}
                    </div>
                    <div>
                      <div style={{ fontSize: '22px', letterSpacing: '-0.025em', lineHeight: 1.1 }}>{p.name}</div>
                      <div style={{ fontFamily: fontMono, fontSize: '10px', color: tokens.inkMute, letterSpacing: '0.1em', marginTop: '4px' }}>{p.ticker} · {p.sector.toUpperCase()}</div>
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontFamily: fontDisplay, fontSize: '17px', letterSpacing: '-0.02em' }}>{p.px}</div>
                    <div style={{ fontFamily: fontMono, fontSize: '10px', color: tokens.inkMute, letterSpacing: '0.08em', marginTop: '2px' }}>MCAP {p.mcap}</div>
                  </div>
                </div>

                <div style={{ fontSize: '14px', color: tokens.inkSoft, lineHeight: 1.55, letterSpacing: '-0.005em', marginBottom: '24px', minHeight: '64px' }}>
                  {p.note}
                </div>

                {/* progress bar */}
                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '8px' }}>
                    <div style={{ fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.16em', color: tokens.inkMute }}>DILIGENCE</div>
                    <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: meta.color, fontWeight: 500 }}>● {meta.label.toUpperCase()}</div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px', height: '6px' }}>
                    {stages.map((s, i) => {
                      const reached = stages.indexOf(p.stage) >= i;
                      return (
                        <div key={s} style={{ background: reached ? meta.color : tokens.inkLine, height: '100%', opacity: reached ? 1 : 0.6 }}></div>
                      );
                    })}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px', marginTop: '6px', fontFamily: fontMono, fontSize: '9px', letterSpacing: '0.1em', color: tokens.inkMute, textTransform: 'uppercase' }}>
                    {stages.map((s, i) => (
                      <div key={s} style={{ color: stages.indexOf(p.stage) >= i ? tokens.ink : tokens.inkMute }}>
                        {String(i+1).padStart(2,'0')} · {stageMeta[s].label}
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{ position: 'absolute', top: '28px', right: '28px', fontFamily: fontMono, fontSize: '14px', color: tokens.inkMute }}>→</div>
              </div>
            );
          })}
        </div>
      </Section>

      {/* DISCLOSURE */}
      <section style={{ padding: '40px 56px', textAlign: 'center', fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.06em', color: tokens.inkMute }}>
        DISCLOSURE · POSITIONS UPDATED QUARTERLY · PROSPECTIVE NAMES NOT POSITIONS · NOT INVESTMENT ADVICE
      </section>
    </div>
  );
};

window.Companies = Companies;