// What we do — three threads (vertical) crossing the principles (horizontal).
// Full-bleed ink panel; mirrors brand book "three threads" language.

function Threads({ onNav }) {
  const wrap = { background: 'var(--bc-ink)', color: 'var(--bc-paper)', padding: '120px clamp(20px,4vw,48px)' };
  const inner = { maxWidth: 1280, margin: '0 auto' };
  const idx = { display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', paddingBottom: 28, borderBottom: '1px solid rgba(237,234,229,0.18)', marginBottom: 56 };
  const cap = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.55)', fontWeight: 500 };
  const lede = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(34px, 4.4vw, 60px)', lineHeight: 1.08, letterSpacing: '-0.025em', color: 'var(--bc-paper)', maxWidth: 1040, textWrap: 'balance', marginBottom: 64 };
  const grid = { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid rgba(237,234,229,0.18)' };
  const cell = (i) => ({ padding: '40px 32px 8px', borderRight: i < 2 ? '1px solid rgba(237,234,229,0.18)' : 'none' });
  const num = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-selvedge)', marginBottom: 18, fontWeight: 500 };
  const trait = { fontFamily: 'var(--bc-font-display)', fontSize: 30, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 14, color: 'var(--bc-paper)' };
  const desc = { fontFamily: 'var(--bc-font-sans)', fontSize: 15, lineHeight: 1.65, color: 'rgba(237,234,229,0.7)', maxWidth: 320, marginBottom: 24 };
  const tag = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.5)', display: 'inline-block', padding: '4px 8px', border: '1px solid rgba(237,234,229,0.2)' };

  const verticals = [
    ['I', 'Software', 'SaaS at the core. Tools we use ourselves before we sell them. AutoCraft and MarkSmith are the first two.', 'In build · 2026'],
    ['II', 'Services', 'High-impact consulting and execution. Six-week engagements embedded with one team — same dispatcher, same trucks, less idle time.', 'Booking · Q3 2026'],
    ['III', 'Intelligence', 'AI-led systems and IP. We ship the wiring as well as the model — pipelines, agents, evaluation harnesses.', 'Active · 2026'],
  ];

  return (
    <section style={wrap} data-screen-label="02 Three threads">
      <div style={inner}>
        <div style={idx}>
          <span style={cap}>§ 01 — The three threads</span>
          <span style={cap}>vertical · structural</span>
        </div>
        <p style={lede}>
          Three vertical threads — the business. Three horizontal threads — the principles.
          Where they cross, the cloth holds.
        </p>
        <div style={grid}>
          {verticals.map(([n, t, d, s], i) => (
            <div key={n} style={cell(i)}>
              <div style={num}>{n}</div>
              <h3 style={trait}>{t}</h3>
              <p style={desc}>{d}</p>
              <span style={tag}>{s}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Threads = Threads;