// About page
function AboutPage() {
  return (
    <SideRailLayout current="/about">
      <Block pad="56px 56px 16px">
        <Headline
          eyebrow="About"
          title="Built by builders, for builders."
          subtitle="IssuesId began on a real site in 2023, when our founders — a site supervisor and a certifier — lost a paper defect register in the rain."
          align="left"
        />
      </Block>
      <Block pad="0 56px 40px">
        <div style={{
          aspectRatio: '16 / 8', borderRadius: 12, overflow: 'hidden',
          background: `linear-gradient(120deg, color-mix(in oklab, var(--accent) 45%, var(--ink)), var(--ink))`,
          position: 'relative',
          display: 'flex', alignItems: 'flex-end',
          padding: 32,
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--paper)', opacity: 0.8,
            letterSpacing: '0.1em', textTransform: 'uppercase',
          }}>2023 · Founders on-site · Sydney, AUS</div>
        </div>
      </Block>
      <Block pad="24px 56px 56px">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48 }} className="about-grid">
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)',
            letterSpacing: '0.1em', textTransform: 'uppercase',
          }}>Our story</div>
          <div style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)' }}>
            <p style={{ marginTop: 0 }}>
              After years of watching defect registers live in spreadsheets, notebooks, and WhatsApp threads, we built the tool we wished we had. One place. Offline-first. Compliance-ready.
            </p>
            <p>
              Today IssuesId runs on thousands of sites across Australia — from residential renovations to 40-storey commercial builds — used by inspectors, builders, trades, project managers and clients.
            </p>
          </div>
        </div>
      </Block>
      <Block pad="56px 56px">
        <Headline title="What we believe." />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }} className="about-grid">
          {[
            ['Accountable', 'Every defect has a name, a timestamp, and a trail. No exceptions.'],
            ['Offline-first', 'Signal drops on site. Tools that fail offline shouldn\'t.'],
            ['Simple enough', 'If a sub-contractor needs training to use it, we\'ve failed.'],
          ].map(([t, b]) => (
            <div key={t} style={{
              padding: 24, borderRadius: 10,
              background: 'var(--paper-2)', border: '1px solid var(--rule)',
            }}>
              <div style={{ fontSize: 17, fontWeight: 500, marginBottom: 8, letterSpacing: '-0.01em' }}>{t}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink-3)' }}>{b}</div>
            </div>
          ))}
        </div>
      </Block>
      <Block pad="0 56px 72px">
        <div style={{
          border: '1px solid var(--rule)', borderRadius: 12,
          padding: 40, background: 'var(--paper-2)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }} className="about-stats">
          {[
            ['2023', 'Founded'],
            ['18', 'Team members'],
            ['4.2k', 'Active sites'],
            ['1.8M', 'Defects closed'],
          ].map(([n, l]) => (
            <div key={l}>
              <div style={{
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 56, fontWeight: 400, color: 'var(--accent-ink)',
                lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 8,
              }}>{n}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
      </Block>
      <style>{`
        @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr !important; } .about-stats { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </SideRailLayout>
  );
}

window.AboutPage = AboutPage;