// About page
function About() {
  return (
    <>
      <Nav current="about" />
      <section style={{ padding: '80px 0 60px' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="hero-kicker">About</div>
            <h1 style={{ marginTop: 22 }}>Built for<br/><em>the AI era.</em></h1>
          </div>
          <div style={{ position: 'relative', minHeight: 360, background: PSA_NAVY, overflow: 'hidden' }}>
            <div style={{ position: 'absolute', left: '10%', right: '10%', top: '62%', height: 1, background: PSA_CREAM, opacity: 0.5 }} />
            <div style={{ position: 'absolute', left: '50%', top: '48%', width: 90, height: 90, borderRadius: '50%', background: PSA_CITRUS, transform: 'translateX(-50%)' }} />
            <div style={{ position: 'absolute', bottom: 20, left: 20, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.25em', color: PSA_CREAM, opacity: 0.6, textTransform: 'uppercase' }}>
              La Jolla · 32.8°N · 117.3°W
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 20 }}>
        <div className="wrap-narrow">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <p style={{ fontSize: 22, lineHeight: 1.55, color: PSA_NAVY, fontFamily: 'Fraunces, serif', fontWeight: 300, letterSpacing: '-0.01em', maxWidth: 'none' }}>
              Pacific Search AI was founded by Joshua Gill. Josh works in the AI space and has family in the local business world — so he knows local operators firsthand. He started helping them, then realized he could help others too.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, maxWidth: 'none' }}>
              We're small. We run on Claude, Anthropic's most capable model. We use the same AI that we're optimizing for — giving us an inside view of how content gets cited, how schema gets read, and what AI trusts. If your agency isn't using AI, they're already behind.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, maxWidth: 'none' }}>
              We work from San Diego. We cap our client list at 20 so we can actually deliver.
            </p>
          </div>
        </div>
      </section>

      <section style={{ background: '#fff', padding: '100px 0' }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="hero-kicker">Principles</div>
              <h2 style={{ marginTop: 16 }}>How we work.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {[
              ['Narrow beats broad', "We pick a vertical and go deep. Med spas today, one adjacent vertical next year. Generalist agencies deliver generalist results."],
              ['Measurable or it didn\'t happen', "Real citations in real AI engines. Screenshots, names, dates. Not 'impressions' or 'visibility scores' we invented."],
              ['Ship fast, iterate faster', '14-day builds, not 14-week ones. Every month produces shippable work. No quarters disappearing into strategy decks.'],
              ['Founder on every call', 'You never get handed off. You hired us; you work with us.'],
              ['AI-native, not AI-curious', "Every workflow runs through Claude. We aren't learning AI — we build agencies with it."],
              ['Say no often', 'We cap at 20 clients. We decline work that\'s not a fit. Our clients benefit from who we don\'t take.'],
            ].map(([h, b], i) => (
              <div key={i} style={{ borderTop: `1px solid ${PSA_NAVY}`, paddingTop: 20 }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', color: PSA_NAVY, opacity: 0.5 }}>0{i+1}</div>
                <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 500, fontSize: 22, color: PSA_NAVY, marginTop: 12, letterSpacing: '-0.02em' }}>{h}</div>
                <p style={{ fontSize: 14, marginTop: 10, lineHeight: 1.65 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
      <TweaksPanel />
    </>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<About />);