/* =============================================================
   Pricing — standalone page (Free / Strategy Audit / Articles)
   Mirrors Landing_v4 pricing block + adds comparison + FAQ.
   ============================================================= */

function PagePricing() {
  return (
    <div style={{ width: 1280, fontFamily: FONT_BODY, color: P4.ink, '--font-display': FONT_SERIF, background: '#fff' }}>
      <Header_v4 />

      {/* Hero strip */}
      <div style={{ padding: '64px 56px 48px', background: P4.surfaceTint, borderBottom: `1px solid ${P4.borderWarm}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -260, right: -200, opacity: 0.45 }}>
          <SignalGrid_v4 size={620} faint />
        </div>
        <div style={{ position: 'relative', maxWidth: 880 }}>
          <MonoKicker_v4 color={P4.warm} mb={14}>Pricing · USD</MonoKicker_v4>
          <h1 style={{ fontFamily: FONT_SERIF, fontSize: 56, fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.05, marginBottom: 16, fontVariationSettings: "'opsz' 144, 'SOFT' 50" }} className="balance">
            Mirrored to your <span style={{ fontStyle: 'italic' }}>funnel</span>.
          </h1>
          <p style={{ fontSize: 18, color: P4.inkSoft, lineHeight: 1.55, maxWidth: 720 }} className="pretty">
            Start with the free diagnosis. Move to a Strategy Audit when it's worth acting on. Pay per article — no subscription, no clawbacks, no surprises.
          </p>
        </div>
      </div>

      {/* 3-column pricing — mirrors Landing */}
      <div id="plans" style={{ padding: '64px 56px 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr 1fr', gap: 14, alignItems: 'stretch' }}>
          {/* Free */}
          <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 28, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: P4.inkSoft }}>Free Site Report</div>
              <span style={{ fontSize: 11, color: P4.inkSoft }}>~5 min</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
              <span style={{ fontFamily: FONT_SANS, fontSize: 38, fontWeight: 600, letterSpacing: '-0.02em', color: P4.ink }}>$0</span>
              <span style={{ fontSize: 13, color: P4.inkSoft }}>· no card</span>
            </div>
            <p style={{ fontSize: 13, color: P4.inkSoft, marginBottom: 22, lineHeight: 1.5 }}>Diagnose your visibility. See where patients can't find you.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 22px', display: 'flex', flexDirection: 'column', gap: 9, fontSize: 13.5, flex: 1 }}>
              {['Visibility score & 11 signals', 'Quick wins checklist', 'Sample article, doctor-reviewed'].map((t, j) => (
                <li key={j} style={{ display: 'flex', gap: 8 }}><span style={{ color: P4.accent, fontWeight: 600 }}>+</span><span>{t}</span></li>
              ))}
            </ul>
            <a href="/#run" style={{ width: '100%', height: 42, background: '#fff', color: P4.accent, border: `1px solid ${P4.accent}`, borderRadius: 8, fontSize: 13.5, fontWeight: 600, fontFamily: FONT_BODY, display: 'flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }}>Get free report</a>
          </div>

          {/* Audit — emphasized */}
          <div style={{
            position: 'relative', background: '#fff',
            border: `2px solid ${P4.accent}`, borderRadius: 14,
            boxShadow: `0 32px 64px -28px rgba(15,40,50,0.34), 0 4px 16px -8px rgba(15,40,50,0.10)`,
            transform: 'translateY(-12px)',
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
          }}>
            <div style={{ padding: '11px 28px', background: P4.ink, color: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: P4.warm, boxShadow: `0 0 0 3px color-mix(in oklab, ${P4.warm} 25%, transparent)` }} />
                <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Most clinics start here</span>
              </div>
              <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, opacity: 0.65, letterSpacing: '0.06em' }}>~7 BUSINESS DAYS</span>
            </div>
            <div style={{ padding: 30, display: 'flex', flexDirection: 'column', flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: P4.accent, marginBottom: 12 }}>Strategy Audit</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
                <span style={{ fontFamily: FONT_SANS, fontSize: 52, fontWeight: 600, letterSpacing: '-0.028em', color: P4.ink, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>$1,500</span>
                <span style={{ fontSize: 13, color: P4.inkSoft }}>· one-time</span>
              </div>
              <p style={{ fontFamily: FONT_SERIF, fontSize: 17, color: P4.ink, marginBottom: 22, lineHeight: 1.4, letterSpacing: '-0.005em', fontWeight: 400 }} className="pretty">
                The diagnosis, the competitor scan, and your 90-day content plan — written by clinical editors.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 18px', marginBottom: 22, fontSize: 13.5, flex: 1 }}>
                {['Clinic profile & competitor scan', '90-day content plan', 'Research roadmap', 'AI-search optimization', 'Doctor-reviewed topic list', 'Wallet credit on first 3 articles'].map((t, j) => (
                  <div key={j} style={{ display: 'flex', gap: 8 }}>
                    <span style={{ color: P4.accent, fontWeight: 700 }}>+</span><span>{t}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginBottom: 18, padding: '10px 14px', background: P4.surfaceTint, borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: P4.inkSoft }}>
                <span style={{ width: 22, height: 22, borderRadius: 11, border: `1.5px solid ${P4.accent}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, color: P4.accent }}>R</span>
                <span>Editorial team reviews every audit before it ships. <strong style={{ color: P4.ink, fontWeight: 600 }}>Money-back if unhelpful.</strong></span>
              </div>
              <button style={{ width: '100%', height: 48, background: P4.accent, color: '#fff', border: 'none', borderRadius: 8, fontSize: 14.5, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Start with audit →</button>
            </div>
          </div>

          {/* Articles */}
          <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 28, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: P4.inkSoft }}>Articles</div>
              <span style={{ fontSize: 11, color: P4.inkSoft }}>per article</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
              <span style={{ fontFamily: FONT_SANS, fontSize: 38, fontWeight: 600, letterSpacing: '-0.02em', color: P4.ink, fontVariantNumeric: 'tabular-nums' }}>$250</span>
              <span style={{ fontSize: 13, color: P4.inkSoft }}>· top-up</span>
            </div>
            <p style={{ fontSize: 13, color: P4.inkSoft, marginBottom: 22, lineHeight: 1.5 }}>Order from your plan. Wallet credits earn 10–20% bonus.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 22px', display: 'flex', flexDirection: 'column', gap: 9, fontSize: 13.5, flex: 1 }}>
              {['Doctor-reviewed before delivery', 'Wallet credit · 10–20% bonus', 'Optional updates on plans'].map((t, j) => (
                <li key={j} style={{ display: 'flex', gap: 8 }}><span style={{ color: P4.accent, fontWeight: 600 }}>+</span><span>{t}</span></li>
              ))}
            </ul>
            <button style={{ width: '100%', height: 42, background: '#fff', color: P4.accent, border: `1px solid ${P4.accent}`, borderRadius: 8, fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>See how articles work</button>
          </div>
        </div>
      </div>

      {/* Wallet bonus tier */}
      <div style={{ padding: '24px 56px 64px' }}>
        <div style={{ background: P4.surfaceTint, border: `1px solid ${P4.borderWarm}`, borderRadius: 14, padding: 36, display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 40, alignItems: 'center' }}>
          <div>
            <MonoKicker_v4 color={P4.warm} mb={10}>Wallet bonus</MonoKicker_v4>
            <h3 style={{ fontFamily: FONT_SERIF, fontSize: 26, fontWeight: 450, letterSpacing: '-0.015em', lineHeight: 1.2, marginBottom: 8, fontVariationSettings: "'opsz' 72, 'SOFT' 50" }} className="balance">
              Top up bigger, pay less per article.
            </h3>
            <p style={{ fontSize: 14, color: P4.inkSoft, lineHeight: 1.55 }}>Bonus credits land in your wallet immediately. Spend them on any article order.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {[
              { tier: '$500',  bonus: '+ $25',  pct: '5%' },
              { tier: '$1,000', bonus: '+ $100', pct: '10%' },
              { tier: '$2,500', bonus: '+ $375', pct: '15%' },
              { tier: '$5,000', bonus: '+ $1,000', pct: '20%' },
            ].map((t, i) => (
              <div key={i} style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 10, padding: 18 }}>
                <div style={{ fontFamily: FONT_SANS, fontSize: 22, fontWeight: 600, letterSpacing: '-0.018em', color: P4.ink, fontVariantNumeric: 'tabular-nums' }}>{t.tier}</div>
                <div style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.warmInk, fontWeight: 600, letterSpacing: '0.06em', marginTop: 4 }}>{t.bonus} · {t.pct}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Comparison table */}
      <div style={{ padding: '24px 56px 80px' }}>
        <div style={{ marginBottom: 28 }}>
          <MonoKicker_v4 mb={10}>Side by side</MonoKicker_v4>
          <h2 style={{ fontFamily: FONT_SERIF, fontSize: 32, fontWeight: 450, letterSpacing: '-0.018em', fontVariationSettings: "'opsz' 72, 'SOFT' 50" }} className="balance">What's in each plan.</h2>
        </div>
        <div style={{ border: `1px solid ${P4.border}`, borderRadius: 12, overflow: 'hidden' }}>
          {(() => {
            const cols = ['Free Site Report', 'Strategy Audit', 'Articles'];
            const rows = [
              { label: 'Visibility score & 11 signals', vals: ['+', '+', '~'] },
              { label: 'Quick wins checklist',            vals: ['+', '+', 'x'] },
              { label: 'Sample article (doctor-reviewed)', vals: ['+', '+', '~'] },
              { label: 'Competitor scan',                  vals: ['x', '+', 'x'] },
              { label: '90-day content plan',              vals: ['x', '+', 'x'] },
              { label: 'AI-search optimization',           vals: ['x', '+', '+'] },
              { label: 'Doctor-reviewed article delivery', vals: ['x', '~', '+'] },
              { label: 'Wallet bonus credits',             vals: ['x', '+', '+'] },
              { label: 'Editorial team check before ship', vals: ['x', '+', '+'] },
            ];
            const glyph = (g) => g === '+' ? <span style={{ color: P4.good, fontWeight: 700 }}>+</span>
              : g === '~' ? <span style={{ color: P4.warm, fontWeight: 700 }}>~</span>
              : <span style={{ color: P4.inkSoft, opacity: 0.5 }}>·</span>;
            return (
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
                <thead>
                  <tr style={{ background: P4.surfaceTint }}>
                    <th style={{ textAlign: 'left', padding: '14px 22px', fontFamily: FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: P4.inkSoft }}>Feature</th>
                    {cols.map(c => (
                      <th key={c} style={{ padding: '14px 22px', fontFamily: FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: P4.inkSoft, width: 180, textAlign: 'center' }}>{c}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r, i) => (
                    <tr key={i} style={{ borderTop: `1px solid ${P4.border}` }}>
                      <td style={{ padding: '14px 22px', color: P4.ink }}>{r.label}</td>
                      {r.vals.map((v, j) => (
                        <td key={j} style={{ padding: '14px 22px', textAlign: 'center', fontFamily: FONT_MONO, fontSize: 16 }}>{glyph(v)}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            );
          })()}
        </div>
        <p style={{ fontSize: 12.5, color: P4.inkSoft, marginTop: 14, fontFamily: FONT_MONO }}>
          <span style={{ color: P4.good, fontWeight: 700 }}>+</span> included &nbsp;·&nbsp;
          <span style={{ color: P4.warm, fontWeight: 700 }}>~</span> partial &nbsp;·&nbsp;
          <span style={{ opacity: 0.5 }}>·</span> not included
        </p>
      </div>

      <LV_FAQ />
      <LV_FooterCTA />
      <Footer_v4 />
    </div>
  );
}