/* About page */
function AboutPage() {
  return (
    <div className="page-fade">
      <section style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="container">
          <div className="label" style={{ marginBottom: 18 }}>ABOUT · FILE NO. 0</div>
          <h1 className="h-display" style={{ maxWidth: 1100 }}>
            We grew up on a lot.<br/>
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>You shouldn't need a compliance director to keep yours.</span>
          </h1>
        </div>
      </section>

      <section style={{ padding: '64px 0', borderTop: '1px solid var(--rule)' }}>
        <div className="container m-about-row" style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 32 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>01 · WHY</div>
          <p className="lede" style={{ margin: 0 }}>
            Three regulators put a tax on small dealers in eighteen months. Existing tools cost more than a salesperson.
          </p>
          <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, margin: 0 }}>
            Our co-founder's family ran a fourteen-car independent lot in the Inland Empire for twenty-two years. When the FTC Safeguards Rule arrived, the cheapest serious solution was four hundred dollars a month and required a half-day onboarding call. The aunt running the office said no thanks and printed something off the internet. That sentence — "she printed something off the internet" — is why we built this.
          </p>
        </div>
      </section>

      <section style={{ padding: '64px 0', borderTop: '1px solid var(--rule)' }}>
        <div className="container m-about-row" style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 32 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>02 · WHO</div>
          <h2 className="h-3">A small team. Long careers in the right rooms.</h2>
          <div className="m-bios" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {[
              { n: 'Daniel Marquez', r: 'Co-founder · CEO', bio: 'Grew up on his family\'s lot in Fontana. Ten years in dealership ops, four years building dealer software at a top-10 DMS.' },
              { n: 'Priya Vasan',    r: 'Co-founder · CTO', bio: 'Ex-Stripe Compliance Engineering. Built the SOX evidence pipeline used by 11 of Stripe\'s largest customers.' },
              { n: 'Hannah Reyes',   r: 'Head of Compliance', bio: 'Former CA DMV Investigations Bureau. Twelve years auditing dealers; now on our side of the table.' },
              { n: 'Marcus Aoyama',  r: 'Design',         bio: 'Last seven years designing operator tools for ports, payroll, and now lots. Believes density is a love language.' },
            ].map((p, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <span style={{ fontSize: 14, fontWeight: 500 }}>{p.n}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>{p.r.toUpperCase()}</span>
                </div>
                <p style={{ margin: 0, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>{p.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '64px 0', borderTop: '1px solid var(--rule)' }}>
        <div className="container m-about-row" style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 32 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>03 · PRINCIPLES</div>
          <div className="m-principles" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink)' }}>
            {[
              { n: '01', t: 'The dealer\'s language.', b: 'Not Silicon Valley. Not Big Four. The way the office manager actually says it.' },
              { n: '02', t: 'Compliance as evidence.', b: 'Every claim our software makes about your posture must link to a record an auditor can read.' },
              { n: '03', t: 'Boring is the brand.',   b: 'Compliance is not exciting and we will not pretend otherwise. We will, however, be very good at it.' },
              { n: '04', t: 'The price stays.',       b: 'Independent dealers do not get rate hikes. Period.' },
              { n: '05', t: 'No phone tree.',         b: 'A real human picks up. The first one knows what a doc fee is.' },
              { n: '06', t: 'Quietly AI-native.',     b: 'We use models where they save real hours. We do not put glitter on it.' },
            ].map(p => (
              <div key={p.n} style={{ padding: '24px 24px 32px', borderRight: ['02','05'].includes(p.n) ? 0 : '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginBottom: 14 }}>§ {p.n}</div>
                <h3 className="display" style={{ fontSize: 22, marginBottom: 8 }}>{p.t}</h3>
                <p style={{ margin: 0, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', borderTop: '1px solid var(--rule)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <p className="serif" style={{ fontSize: 'clamp(28px, 3.4vw, 48px)', fontStyle: 'italic', maxWidth: 900, margin: '0 auto', lineHeight: 1.2 }}>
            "The compliance vendor's job is to make compliance feel like the easiest part of running a lot, not the hardest."
          </p>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginTop: 24 }}>
            — INTERNAL MEMO, 2025.11.04
          </div>
        </div>
      </section>
    </div>
  );
}

window.AboutPage = AboutPage;