// About — the company. Story, what we are, geography, long-term goal.

function About({ onNav }) {
  const wrap = { padding: '96px clamp(20px,4vw,48px)', maxWidth: 1280, margin: '0 auto' };
  const eb = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500, marginBottom: 32 };
  const h = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(40px,5.5vw,80px)', lineHeight: 1.0, letterSpacing: '-0.03em', color: 'var(--bc-fg-primary)', textWrap: 'balance', marginBottom: 24 };
  const lede = { fontFamily: 'var(--bc-font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(22px,2.4vw,30px)', lineHeight: 1.4, color: 'var(--bc-fg-secondary)', maxWidth: 880, marginBottom: 64 };

  // Story prose
  const proseWrap = { display: 'grid', gridTemplateColumns: '320px 1fr', gap: 64, paddingTop: 56, paddingBottom: 80, borderTop: '1px solid var(--bc-border-subtle)' };
  const sideEb = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-tertiary)', fontWeight: 500 };
  const body = { fontFamily: 'var(--bc-font-sans)', fontSize: 17, lineHeight: 1.65, color: 'var(--bc-fg-primary)', maxWidth: 720, marginBottom: 20 };

  // Numbers strip
  const numWrap = { padding: '56px 0', borderTop: '1px solid var(--bc-border-default)', borderBottom: '1px solid var(--bc-border-default)', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 };
  const numCell = (i) => ({ padding: '0 32px', borderRight: i < 3 ? '1px solid var(--bc-border-subtle)' : 'none' });
  const numBig = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(36px,4.5vw,64px)', letterSpacing: '-0.03em', lineHeight: 1.0, marginBottom: 14 };
  const numLbl = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)' };

  // Two-up: Where + Long-term goal
  const twoUp = { paddingTop: 80, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' };
  const twoH = { fontFamily: 'var(--bc-font-display)', fontSize: 'clamp(28px,3.4vw,42px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.1, marginBottom: 20 };
  const twoP = { fontFamily: 'var(--bc-font-sans)', fontSize: 16, lineHeight: 1.65, color: 'var(--bc-fg-secondary)', maxWidth: 520, marginBottom: 16 };

  return (
    <section style={wrap} data-screen-label="03 About company">
      <div style={eb}>§ 03 — About BuildCraft Labs</div>
      <h2 style={h}>A software think tank, not a studio.</h2>
      <p style={lede}>
        We design and ship intuitive, data-driven products and intelligent systems —
        combining speed of insight with depth of thinking.
      </p>

      <div style={proseWrap}>
        <div style={sideEb}>§ 03.1 — The company</div>
        <div>
          <p style={body}>
            BuildCraft Labs is a software think tank and innovator, founded in 2026.
            We operate across three surfaces: SaaS products we build and run ourselves,
            high-impact consulting and execution for partners, and AI-led intellectual
            property — the systems, pipelines, and evaluation harnesses behind the work.
          </p>
          <p style={body}>
            The thesis is simple: most problems are felt long after they could have been
            prevented. We exist to spot and structure those problems early — and ship
            something durable in response. We do not glorify building. We build only what
            should exist, and we measure ourselves by whether the cloth holds after we leave.
          </p>
          <p style={body}>
            We work in six-week engagements, embedded with one team at a time. We stay
            intentionally small — or structured like small companies. Every leader builds
            their team as if it were their own venture.
          </p>
        </div>
      </div>

      <div style={numWrap}>
        <div style={numCell(0)}><div style={numBig}>2026</div><div style={numLbl}>Founded</div></div>
        <div style={numCell(1)}><div style={numBig}>3 — 8</div><div style={numLbl}>Builders, today</div></div>
        <div style={numCell(2)}><div style={numBig}>6<span style={{ fontSize: '0.45em', verticalAlign: 'super', marginLeft: 4, color: 'var(--bc-fg-tertiary)' }}>wk</span></div><div style={numLbl}>Engagement length</div></div>
        <div style={numCell(3)}><div style={numBig}>1<span style={{ fontSize: '0.5em', marginLeft: 4, color: 'var(--bc-selvedge)' }}>B</span></div><div style={numLbl}>Lives — long-term goal</div></div>
      </div>

      <div style={twoUp}>
        <div>
          <div style={eb}>§ 03.2 — Where</div>
          <h3 style={twoH}>India-rooted. Building for the world.</h3>
          <p style={twoP}>
            We stay deeply connected to India — its makers, its small businesses, its weave
            of cultures — while building products and engagements that ship globally.
            The company is remote-first; we meet in person when it matters.
          </p>
        </div>
        <div>
          <div style={eb}>§ 03.3 — Long-term</div>
          <h3 style={twoH}>To impact one billion lives.</h3>
          <p style={twoP}>
            Through products, systems, and ideas — directly or indirectly. A long horizon,
            deliberately stated. Every quarter, we ask whether the work is still pointed there.
          </p>
        </div>
      </div>
    </section>
  );
}

window.About = About;