// Ethos.jsx — three-pillar philosophy section, mirroring TEF's 01/02/03 chapter row.
function Ethos() {
  const pillars = [
    {
      n: '01', title: 'Asymmetry',
      lede: 'We optimize for upside, not comfort.',
      body: 'Small downside, uncapped upside. We take on projects where the worst outcome is a story, and the best outcome is a category. The middle is the only place we refuse to live.',
      metric: { label: 'Bets placed', value: '47', note: '2024–2026' },
    },
    {
      n: '02', title: 'Conviction',
      lede: 'We are willing to be wrong, loudly and on record.',
      body: 'Consensus is already priced in. We build the thing that sounds naive at the dinner party and obvious in hindsight. Our partners sign up for the same asymmetry we do.',
      metric: { label: 'Hit rate', value: '11%', note: 'by count · 340% by weight' },
    },
    {
      n: '03', title: 'Craft',
      lede: 'Every shot leaves a trace, even when it misses.',
      body: 'High-risk does not mean half-built. Each mission is engineered end-to-end with the care of a thing that might outlive us. We want the failure modes to be beautiful too.',
      metric: { label: 'Ship cadence', value: '6 wk', note: 'concept → flight' },
    },
  ];
  return (
    <section id="ethos" style={{ background: 'var(--void)', color: 'var(--fg)' }}>
      {/* Section header */}
      <div style={{ padding: '140px 80px 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, borderBottom: '1px solid var(--line)' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            <span style={{ color: 'var(--electric-2)' }}>§ 01</span>&nbsp;&nbsp;—&nbsp;&nbsp;Ethos
          </div>
          <h2 className="display" style={{ margin: 0 }}>
            A studio built<br/>
            for the <span style={{ color: 'var(--electric)' }}>tail</span>.
          </h2>
        </div>
        <div style={{ alignSelf: 'end' }}>
          <p className="lede" style={{ margin: 0, maxWidth: 540 }}>
            Most work lives in the middle of the distribution — safe, legible, reproducible.
            We live out past the third standard deviation, where the math gets honest and the
            payoffs stop being polite.
          </p>
        </div>
      </div>

      {/* Three pillars */}
      <div>
        {pillars.map((p, i) => (
          <div key={p.n} style={{
            display: 'grid',
            gridTemplateColumns: '80px 1fr 1fr 280px',
            gap: 40,
            padding: '64px 80px',
            borderBottom: '1px solid var(--line)',
            alignItems: 'flex-start',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 12,
              color: 'var(--electric-2)', letterSpacing: '.1em', paddingTop: 14,
            }}>{p.n}</div>
            <div>
              <h3 style={{ fontSize: 64, fontWeight: 400, letterSpacing: '-0.02em', margin: 0, lineHeight: 1 }}>
                {p.title}
              </h3>
              <div className="lede" style={{ marginTop: 20, color: 'var(--dust-200)', fontStyle: 'italic' }}>
                {p.lede}
              </div>
            </div>
            <p className="body" style={{ margin: 0, paddingTop: 14, maxWidth: 420, fontSize: 16, lineHeight: 1.55 }}>
              {p.body}
            </p>
            <div style={{
              borderLeft: '1px solid var(--line-strong)',
              paddingLeft: 20,
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div className="eyebrow" style={{ fontSize: 10, color: 'var(--fg-faint)' }}>{p.metric.label}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 0.95, color: 'var(--fg-strong)', letterSpacing: '-0.03em' }}>
                {p.metric.value}
              </div>
              <div className="mono" style={{ color: 'var(--fg-muted)' }}>{p.metric.note}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
Object.assign(window, { Ethos });