// Pricing page
function Pricing() {
  return (
    <>
      <Nav current="pricing" />
      <section style={{ padding: '80px 0 40px' }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <div className="hero-kicker">Pricing</div>
          <h1 style={{ marginTop: 22 }}>Transparent. <em>Flat.</em></h1>
          <p style={{ margin: '28px auto 0', fontSize: 18, maxWidth: '56ch' }}>
            One-time build. Monthly retainer. 3-month initial term, then month-to-month. No setup fees, no upsells.
          </p>
        </div>
      </section>
      <section style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div style={{ maxWidth: 560, margin: '0 auto' }}>

            {/* Founding 5 banner */}
            <div style={{ marginBottom: 36, borderLeft: `3px solid ${PSA_CITRUS}`, boxShadow: `-1px 0 0 0 ${PSA_NAVY}`, padding: '18px 0 20px 24px' }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: PSA_NAVY, opacity: 0.7 }}>
                Founding 5 · 2 slots left
              </div>
              <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 500, fontSize: 24, color: PSA_NAVY, letterSpacing: '-0.015em', marginTop: 10, lineHeight: 1.2 }}>
                Founding pricing. Locked for 12 months.
              </div>
              <p style={{ fontSize: 14.5, lineHeight: 1.65, color: PSA_GRAPH, marginTop: 12, maxWidth: 'none' }}>
                Our first 5 clients get $2,000 build + $1,000/mo for 12 months in exchange for a written testimonial and case-study rights. After 12 months, rolls to $2,000/mo permanently — always below public pricing.
              </p>
              <a href="contact.html" className="btn btn-cta" style={{ marginTop: 18 }}>Claim a founding slot <span className="arrow">→</span></a>
            </div>

            {/* The retainer — single tier */}
            <div className="card" style={{ padding: 44, border: `1px solid ${PSA_FOG}` }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: PSA_NAVY, opacity: 0.7 }}>
                The retainer
              </div>
              <div style={{ marginTop: 18, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 300, fontSize: 64, letterSpacing: '-0.03em', color: PSA_NAVY, lineHeight: 1 }}>
                  $2,500
                </div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: PSA_NAVY, opacity: 0.6 }}>/mo</div>
              </div>
              <div style={{ fontSize: 15, marginTop: 16, color: PSA_GRAPH, opacity: 0.9 }}>
                Everything you need to win AI search.
              </div>
              <div style={{ height: 1, background: PSA_FOG, margin: '28px 0' }} />
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 14.5, lineHeight: 1.65, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  '25 queries / 5 engines monthly (ChatGPT, Claude, Perplexity, Gemini, Google AI Overview)',
                  'Daily citation tracking',
                  '4 content pieces / mo optimized for AI citation',
                  'Monthly strategy call',
                  'Schema + review ops',
                  'Direct founder access (email, same-day response)',
                ].map((b, i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{ color: PSA_NAVY, fontFamily: 'JetBrains Mono, monospace', marginTop: 2, fontWeight: 700 }}>✓</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <a href="contact.html" className="btn btn-cta" style={{ marginTop: 32, width: '100%', justifyContent: 'center' }}>
                Get started <span className="arrow">→</span>
              </a>
              <div style={{ marginTop: 16, fontSize: 11, opacity: 0.65, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em', textAlign: 'center', color: PSA_NAVY, lineHeight: 1.6 }}>
                + $3,500 one-time site build · 14 days · AI-first architecture · schema-complete
              </div>
            </div>

          </div>
        </div>
      </section>

      <section style={{ background: '#fff' }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="hero-kicker">What's always included</div>
              <h2 style={{ marginTop: 16 }}>Every tier.</h2>
            </div>
            <p style={{ fontSize: 16 }}>Standard across all plans. No upsells disguised as features.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {[
              ['14-day site build', 'AI-first architecture. Schema-complete. Core Web Vitals green.'],
              ['AI-first architecture', 'Structured Q&A, citation-ready review snippets, treatment-level pages.'],
              ['Direct founder access', 'Email. Same-business-day response.'],
              ['Measurable progress', 'Your AI visibility score moves every month. We ship content, citations, schema, and reviews. You see the delta in your dashboard.'],
            ].map(([h, b], i) => (
              <div key={i}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.2em', color: PSA_NAVY, opacity: 0.55, textTransform: 'uppercase' }}>0{i+1}</div>
                <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 500, fontSize: 20, color: PSA_NAVY, marginTop: 10, letterSpacing: '-0.02em' }}>{h}</div>
                <p style={{ fontSize: 14, marginTop: 10, lineHeight: 1.6 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="wrap-narrow">
          <div className="hero-kicker">Pricing FAQ</div>
          <h2 style={{ marginTop: 16, marginBottom: 32 }}>What you might be wondering.</h2>
          <FAQ items={[
            { q: 'Why a one-time build fee on top of a retainer?', a: "The site is a separate deliverable — a real asset you own. The retainer is ongoing work. Bundling them would just hide the math. We'd rather you see what you're paying for." },
            { q: 'What if I already have a site I love?', a: "We can skip the build and start with the retainer. Send us your URL, we'll tell you whether your existing site is AI-ready. If it's not, we'll explain exactly what needs to change." },
            { q: 'Is there a contract?', a: '3-month initial term, then month-to-month. No setup fees. No surprise renegotiations. Cancel with 30 days notice after month 3.' },
            { q: 'What do you NOT do?', a: 'Paid ads, social media management, general brand marketing. We\'re specialists. We do AI search visibility and the site and content that powers it. That\'s it.' },
            { q: 'Can I add a second location later?', a: "Yes. +$500/mo per additional location. No surprise renegotiation." },
          ]} />
        </div>
      </section>

      <section style={{ background: PSA_CITRUS, padding: '100px 0' }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <h2>Still not sure?</h2>
          <p style={{ fontSize: 18, margin: '20px auto 36px', maxWidth: '48ch' }}>Run a free audit first. If the numbers don't justify a retainer, we'll tell you.</p>
          <a href="contact.html" className="btn" style={{ background: PSA_NAVY, color: PSA_CREAM, borderColor: PSA_NAVY }}>Free AI audit <span className="arrow">→</span></a>
        </div>
      </section>

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