// Home page
function Home() {
  const hv = useHeroVariant();
  return (
    <>
      <Nav current="home" />

      {/* HERO */}
      <section style={{ padding: '80px 0 100px' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 72, alignItems: 'center' }}>
          <div>
            <div className="hero-kicker">AI search visibility · San Diego</div>
            <h1 style={{ marginTop: 22, marginBottom: 28 }}>
              You're invisible<br/>to ChatGPT. <em>Let's<br/>fix that.</em>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.6, maxWidth: '52ch' }}>
              Pacific Search AI builds AI search visibility for med spas, dentists, and local businesses. Your new site + our monthly retainer = you show up when it matters.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
              <a href="contact.html" className="btn btn-cta">Get your free AI audit <span className="arrow">→</span></a>
              <a href="how-it-works.html" className="btn btn-ghost">See how it works</a>
            </div>
            <div className="founding" style={{ marginTop: 44 }}>
              <span className="dot" />
              <span>Founding 5 · San Diego clinics · taking clients now</span>
            </div>
          </div>
          <div style={{ position: 'relative', minHeight: 520, background: '#fff', border: `1px solid ${PSA_FOG}` }}>
            <HeroArt variant={hv} />
          </div>
        </div>
      </section>

      {/* PROBLEM */}
      <section style={{ background: PSA_NAVY, color: PSA_CREAM }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              <div className="hero-kicker" style={{ color: PSA_CITRUS, opacity: 0.9 }}>The problem</div>
              <h2 style={{ color: PSA_CREAM, marginTop: 22 }}>
                Your patients don't use the Yellow Pages anymore.<br/><em>They ask ChatGPT.</em>
              </h2>
              <p style={{ color: PSA_CREAM, opacity: 0.85, fontSize: 17, lineHeight: 1.65, marginTop: 28, maxWidth: '55ch' }}>
                35–46% of local business queries now surface an AI answer — ChatGPT, Claude, Perplexity, Gemini, Google AI Overview. When an AI Overview appears, the top organic result loses 58% of its clicks. If you're not cited in the AI answer, you don't exist for those searches.
              </p>
              <a href="contact.html" className="btn btn-cta" style={{ marginTop: 36 }}>See what AI says about your business <span className="arrow">→</span></a>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <ScoreDial from={12} to={17} label="Your clinic · today" />
              <ScoreDial from={54} to={78} label="Competitor · today" delay={200} />
            </div>
          </div>
        </div>
      </section>

      {/* THE MATH */}
      <section style={{ background: '#fff', padding: '110px 0' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="hero-kicker">What you're losing</div>
            <h2 style={{ marginTop: 22 }}>
              The AI search hit is measurable.<br/><em>Here's the math</em> for a single San Diego med spa.
            </h2>
            <div style={{ marginTop: 40, borderTop: `1px solid ${PSA_NAVY}` }}>
              {[
                ['~10,000/mo', 'searches for "med spa San Diego" + variations'],
                ['~5–10%', 'addressable intent a clinic captures (call it 800/mo)'],
                ['~40%', 'AI Overview hit rate on local queries = 320 intercepted'],
                ['58%', 'click collapse when not cited = ~186 lost visits/mo'],
                ['3% × $536', 'booking rate × avg first visit = $3,200/mo lost (month one)'],
                ['+$16,200/mo', '3-year LTV (~$2,700/patient) in future patient value'],
              ].map(([k, v], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '170px 1fr', gap: 20, padding: '16px 0', borderBottom: `1px solid ${PSA_FOG}` }}>
                  <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: PSA_NAVY, fontWeight: 500 }}>{k}</div>
                  <div style={{ fontSize: 14, color: PSA_GRAPH, lineHeight: 1.55 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, background: PSA_NAVY, color: PSA_CREAM, padding: '22px 26px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 20 }}>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.75 }}>Total monthly economic loss</span>
                <span style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 36, letterSpacing: '-0.02em' }}>~$19,400/mo</span>
              </div>
              <div style={{ height: 1, background: 'rgba(244,239,230,0.2)', margin: '14px 0' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 20 }}>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.75 }}>Our retainer</span>
                <span style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 24, letterSpacing: '-0.02em' }}>$2,500/mo</span>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, position: 'sticky', top: 100 }}>
            <div style={{ background: PSA_CITRUS, border: `1px solid ${PSA_NAVY}`, padding: 32 }}>
              <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 96, color: PSA_NAVY, lineHeight: 0.9, letterSpacing: '-0.04em' }}>58%</div>
              <p style={{ marginTop: 14, fontSize: 15, color: PSA_NAVY, lineHeight: 1.5, maxWidth: 'none' }}>
                drop in top-result clicks when an AI Overview appears
              </p>
            </div>
            <div style={{ background: PSA_NAVY, color: PSA_CREAM, padding: 32 }}>
              <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 96, color: PSA_CREAM, lineHeight: 0.9, letterSpacing: '-0.04em' }}>35%</div>
              <p style={{ marginTop: 14, fontSize: 15, color: PSA_CREAM, opacity: 0.9, lineHeight: 1.5, maxWidth: 'none' }}>
                more organic clicks earned by brands cited in AI answers
              </p>
            </div>
          </div>
        </div>

        <div className="wrap" style={{ marginTop: 56 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: PSA_NAVY, opacity: 0.6, marginBottom: 10 }}>
            Sources
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: PSA_NAVY, opacity: 0.75, lineHeight: 1.8 }}>
            {[
              ['Seer Interactive AIO CTR Study · Sep 2025 (seerinteractive.com)', 'https://www.seerinteractive.com'],
              ['Ahrefs AI Overview Impact Analysis · Dec 2025 (via medianama.com)', 'https://www.medianama.com'],
              ['Heroic Rankings AI Overview Stats 2026 (heroicrankings.com)', 'https://heroicrankings.com'],
              ['Dean Garland Med Spa LTV Study 2025 (deangarland.com)', 'https://deangarland.com'],
              ['KMF Med Spa Revenue Insights 2026 (kmfbusinessadvisors.com)', 'https://www.kmfbusinessadvisors.com'],
            ].map(([label, href], i) => (
              <a key={i} href={href} target="_blank" rel="noopener" className="source-link" style={{ color: PSA_NAVY }}>{label}</a>
            ))}
          </div>
        </div>
      </section>

      {/* WHAT WE DO */}
      <section>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="hero-kicker">What we do</div>
              <h2 style={{ marginTop: 16 }}>Three things.<br/><em>No fluff.</em></h2>
            </div>
            <p style={{ fontSize: 16 }}>
              We audit, we build, we grow. Same team end-to-end, same workflow for every client. No hand-offs, no excuses.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { n: '01', h: 'The Audit', b: 'We run 25 queries across 5 AI engines. Score you 0–100. Show you exactly where competitors eat your lunch.', meta: 'Day 0' },
              { n: '02', h: 'The Build', b: 'We ship a brand-new, AI-first architected site in 14 days. Faster, easier to use, and engineered so AI actually cites you. Beautiful enough to be a case study.', meta: 'Days 1–14' },
              { n: '03', h: 'The Retainer', b: 'Monthly content, citations, reviews, and AI visibility growth. We guarantee your first new AI citation in 30 days.', meta: 'Month 2 onward' },
            ].map(c => (
              <div key={c.n} className="card" style={{ padding: 36, minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.2em', color: PSA_NAVY, opacity: 0.5 }}>{c.n} · {c.meta}</div>
                  <h3 style={{ marginTop: 16, marginBottom: 14 }}>{c.h}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.6, maxWidth: 'none' }}>{c.b}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <a href="how-it-works.html" className="btn btn-ghost">See the full process <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      {/* FOUNDING CLIENTS */}
      <section style={{ background: '#fff', padding: '100px 0' }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <div className="hero-kicker">Results</div>
          <h2 style={{ marginTop: 16 }}>We're taking our <em>first five clients.</em></h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, margin: '24px auto 0', maxWidth: '56ch' }}>
            Founding pricing locked for 12 months, then always below public. Our first 5 San Diego clinics get founder-direct service, early case-study status, and the playbook before we raise prices.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56, textAlign: 'left' }}>
            {[
              { t: 'Locked pricing', b: 'Your rate never goes up while you stay a client. Period.' },
              { t: 'Direct to founder', b: 'Every call, every deliverable — Josh, not an account manager.' },
              { t: 'Co-authored case study', b: 'We publish your results (with your sign-off). You get a reference-quality asset.' },
            ].map((x, i) => (
              <div key={i} style={{ borderLeft: `3px solid ${PSA_CITRUS}`, boxShadow: `-1px 0 0 0 ${PSA_NAVY}`, padding: '4px 0 4px 20px' }}>
                <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 500, fontSize: 19, color: PSA_NAVY }}>{x.t}</div>
                <div style={{ fontSize: 14, color: PSA_GRAPH, marginTop: 6, lineHeight: 1.6 }}>{x.b}</div>
              </div>
            ))}
          </div>
          <a href="contact.html" className="btn btn-cta" style={{ marginTop: 48 }}>Claim a founding slot <span className="arrow">→</span></a>
        </div>
      </section>

      {/* FAQ */}
      <section>
        <div className="wrap-narrow">
          <div style={{ marginBottom: 32 }}>
            <div className="hero-kicker">FAQ</div>
            <h2 style={{ marginTop: 16 }}>Common questions.</h2>
          </div>
          <FAQ items={[
            { q: 'How is this different from SEO?', a: "Traditional SEO optimizes for Google's blue links. We optimize for when AI answers the question directly. It's a new game. We play it." },
            { q: 'Do you work outside San Diego?', a: 'Yes. We prioritize SD and OC today, and we work with clinics anywhere in the US remotely.' },
            { q: 'How much?', a: "$3,500 for the build. $2,500/month retainer. 3-month initial term, then month-to-month. Founding 5 clients get locked-in founder pricing — ask me." },
            { q: 'Can you guarantee results?', a: "We guarantee the deliverables: content shipped, schema deployed, citations built, reviews requested. We guarantee your AI visibility score moves every month in your audit. What we don't guarantee is revenue or rankings — those depend on your conversion, pricing, and front desk. Same way a trainer guarantees you'll get stronger, not that you'll look like Arnold." },
            { q: 'What if I already have an SEO agency?', a: "Keep them. We layer on top. Most SEOs haven't touched AI search yet. We do." },
          ]} />
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: PSA_CITRUS, padding: '100px 0' }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <h2>Want to see where you stand?</h2>
          <p style={{ fontSize: 18, margin: '20px auto 40px', maxWidth: '48ch' }}>
            Run a free AI audit. 10 minutes. No sales call until you want one.
          </p>
          <div style={{ maxWidth: 620, margin: '0 auto' }}>
            <AuditInput />
          </div>
        </div>
      </section>

      <Footer />
      <TweaksPanel />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Home />);