// Contact page
function Contact() {
  return (
    <>
      <Nav current="contact" />
      <section style={{ padding: '80px 0 40px' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="hero-kicker">Free AI audit</div>
            <h1 style={{ marginTop: 22 }}>Let's see where <em>you stand.</em></h1>
            <p style={{ fontSize: 17, lineHeight: 1.7, marginTop: 28, maxWidth: '52ch' }}>
              Drop your URL. We'll run 25 queries across 5 AI engines, score you 0–100, show where competitors eat your lunch, and email you a PDF within 24 hours. No sales call until you want one.
            </p>
            <div style={{ marginTop: 40 }}>
              <AuditInput />
            </div>
            <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {[
                ['Prefer email?', 'hello@pacificsearchai.com', 'mailto:hello@pacificsearchai.com'],
                ['Want to talk first?', 'cal.com/pacificsearch/15min', 'https://cal.com/pacificsearch/15min'],
              ].map(([h, b, href], i) => (
                <a key={i} href={href} style={{ display: 'block', borderTop: `1px solid ${PSA_NAVY}`, paddingTop: 16 }}>
                  <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', color: PSA_NAVY, opacity: 0.55, textTransform: 'uppercase' }}>{h}</div>
                  <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 500, fontSize: 18, color: PSA_NAVY, marginTop: 6, letterSpacing: '-0.01em' }}>{b} →</div>
                </a>
              ))}
            </div>
          </div>

          <div style={{ background: PSA_NAVY, color: PSA_CREAM, padding: 40, minHeight: 620, position: 'relative', overflow: 'hidden' }}>
            <div className="hero-kicker" style={{ color: PSA_CITRUS, opacity: 0.9 }}>What you'll get</div>
            <div style={{ marginTop: 20, fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 28, letterSpacing: '-0.02em', color: PSA_CREAM, lineHeight: 1.15 }}>
              A real audit. Not a form letter.
            </div>
            <div style={{ marginTop: 28, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, lineHeight: 2 }}>
              {[
                ['01', '25 queries against ChatGPT, Claude, Perplexity, Gemini, Google AI Overview'],
                ['02', 'Your visibility score 0–100 with the full methodology'],
                ['03', 'Top 3 competitor gaps with citation examples'],
                ['04', 'Prioritized fix list — what to do this month'],
                ['05', 'Schema + Core Web Vitals diagnostic'],
                ['06', 'Optional 30-min walkthrough call (only if you want it)'],
              ].map(([n, t], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, padding: '10px 0', borderTop: `1px solid rgba(244,239,230,0.15)`, color: PSA_CREAM }}>
                  <span style={{ color: PSA_CITRUS }}>{n}</span>
                  <span style={{ opacity: 0.9, fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.55 }}>{t}</span>
                </div>
              ))}
            </div>
            <div style={{ position: 'absolute', bottom: 24, left: 40, right: 40, display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', color: PSA_CREAM, opacity: 0.5, textTransform: 'uppercase' }}>
              <span>Turnaround · 24 hrs</span>
              <span>Cost · $0</span>
            </div>
          </div>
        </div>
      </section>

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