function Pricing({ go }) {
  const wide = useWide();
  const [yearly, setYearly] = React.useState(true);
  const price = yearly ? 800 : 99;
  const per = yearly ? '/ year' : '/ month';
  const btc = yearly ? '0.01123' : '0.00139';

  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: wide ? '56px 32px 32px' : '32px 20px 20px', textAlign: 'center' }}>
        <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 14 }}>§ PRICING</div>
        <div style={{ fontSize: wide ? 56 : 36, letterSpacing: -1.5, marginBottom: 12, lineHeight: 1.05 }}>
          One plan.<br/>Everything <span style={{ fontStyle: 'italic', color: TH.accent }}>included.</span>
        </div>
        <div style={{ fontFamily: TH.serif, fontSize: 16, color: TH.inkSoft, maxWidth: 560, margin: '0 auto 28px' }}>
          Flat pricing, so we have no reason to upsell. Billed in crypto via Whop. Cancel anytime.
        </div>
        <div style={{ display: 'inline-flex', border: `1px solid ${TH.rule}`, fontFamily: TH.mono, fontSize: 12, textTransform: 'uppercase', letterSpacing: 1 }}>
          <div onClick={() => setYearly(false)} style={{ padding: '10px 18px', cursor: 'pointer', background: !yearly ? TH.accent : 'transparent', color: !yearly ? TH.bg : TH.inkSoft }}>Monthly</div>
          <div onClick={() => setYearly(true)} style={{ padding: '10px 18px', cursor: 'pointer', background: yearly ? TH.accent : 'transparent', color: yearly ? TH.bg : TH.inkSoft }}>Yearly · save 33%</div>
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: wide ? '20px 32px 40px' : '0 20px 32px', display: 'grid', gridTemplateColumns: wide ? '1fr 1.1fr' : '1fr', gap: 20 }}>
        {/* Plan detail */}
        <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: wide ? 36 : 24 }}>
          <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 2, marginBottom: 10 }}>◉ WALKFORWARD MEMBERSHIP</div>
          <div style={{ fontFamily: TH.serif, fontSize: 28, fontStyle: 'italic', marginBottom: 20 }}>Everything, forever.</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span style={{ fontFamily: TH.serif, fontSize: wide ? 72 : 56, letterSpacing: -2 }}>${price}</span>
            <span style={{ fontFamily: TH.mono, fontSize: 12, color: TH.muted }}>{per}</span>
          </div>
          <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted, marginTop: 6, marginBottom: 24, letterSpacing: 1 }}>
            ≈ {btc} BTC · cancel anytime
          </div>
          <div style={{ height: 1, background: TH.rule, marginBottom: 20 }} />
          {[
            'Full backtester access',
            'Weekly research memo',
            'Private Telegram community',
            'Portfolio tracker (on-chain + CEX)',
            'Video archive · 94 lectures',
            'Monthly live Q&A',
            'Data & trade CSV export',
            'Founding member flair (yearly)',
          ].map((f, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '9px 0', fontFamily: TH.sans, fontSize: 14, color: TH.ink }}>
              <span style={{ color: TH.accent }}>✓</span>{f}
            </div>
          ))}
        </div>

        {/* Checkout / signup */}
        <div style={{ background: TH.panelHi, border: `1px solid ${TH.accent}`, padding: wide ? 36 : 24, position: 'relative' }}>
          <div style={{ position: 'absolute', top: -10, left: 24, background: TH.accent, color: TH.bg, fontFamily: TH.mono, fontSize: 10, padding: '3px 10px', letterSpacing: 1.5, fontWeight: 700 }}>
            ❋ 30-DAY REFUND
          </div>
          <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 2, marginBottom: 14 }}>ORDER SUMMARY</div>

          <div style={{ background: TH.panel, border: `1px solid ${TH.rule}`, padding: 16, marginBottom: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: TH.sans, fontSize: 14, color: TH.inkSoft, marginBottom: 8 }}>
              <span>{yearly ? 'Yearly membership' : 'Monthly membership'}</span><span>${price}.00</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: TH.sans, fontSize: 13, color: TH.muted, marginBottom: 8 }}>
              <span>Network fee (est.)</span><span>$1.20</span>
            </div>
            <div style={{ height: 1, background: TH.rule, margin: '10px 0' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: TH.serif, fontSize: 18, color: TH.ink }}>
              <span>Total due today</span><span>${(price + 1.20).toFixed(2)}</span>
            </div>
          </div>

          <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1.5, marginBottom: 10 }}>PAY IN CRYPTO VIA</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px', border: `1px solid ${TH.rule}`, background: TH.panel, marginBottom: 16 }}>
            <div style={{ width: 38, height: 38, background: TH.accent, color: TH.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TH.mono, fontSize: 18, fontWeight: 700 }}>W</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TH.sans, fontSize: 14, fontWeight: 500, color: TH.ink }}>Whop Crypto Checkout</div>
              <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, marginTop: 2, letterSpacing: 0.5 }}>BTC · ETH · USDC · SOL · USDT</div>
            </div>
            <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.accent, letterSpacing: 1 }}>SELECTED</div>
          </div>

          <Btn primary onClick={() => go('checkout', { plan: yearly ? 'yearly' : 'monthly' })} style={{ width: '100%', padding: '16px' }}>
            Continue to Whop checkout →
          </Btn>

          <div style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, textAlign: 'center', marginTop: 14, letterSpacing: 1, lineHeight: 1.6 }}>
            SECURE CRYPTO CHECKOUT · NO CARD REQUIRED<br/>
            YOU'LL CREATE YOUR ACCOUNT IN THE NEXT STEP
          </div>
        </div>
      </div>

      {/* FAQ */}
      <div style={{ maxWidth: 900, margin: '0 auto', padding: wide ? '48px 32px 64px' : '32px 20px' }}>
        <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 16 }}>§ QUESTIONS</div>
        {[
          ['Why crypto only?', 'We settle on-chain so our business logic matches the subject matter. Whop handles the checkout and stablecoin conversion if you want it — we never touch your keys.'],
          ['What if I buy the top?', '30-day no-questions refund window via Whop. No forms, no "we\'re sorry to see you go" survey. Just click refund.'],
          ['Is this financial advice?', 'No. Walkforward is a research and tooling platform. Everything we publish is one input among many. Trade at your own risk and size responsibly.'],
          ['Can I cancel?', 'Any time in one click, inside the Whop dashboard or from your billing page here. Your archive stays accessible for 30 days after cancellation.'],
          ['Do I have to know how to code?', 'Not at all. The backtester is a visual tool — pick parameters, hit run. Our memos are written for humans. Bring curiosity, we\'ll handle the rest.'],
        ].map(([q, a], i) => (
          <details key={i} style={{ borderBottom: `1px solid ${TH.rule}`, padding: '18px 0' }}>
            <summary style={{ fontFamily: TH.serif, fontSize: 18, fontStyle: 'italic', color: TH.ink, cursor: 'pointer', listStyle: 'none', display: 'flex', justifyContent: 'space-between' }}>
              {q} <span style={{ color: TH.accent, fontStyle: 'normal' }}>+</span>
            </summary>
            <div style={{ fontFamily: TH.serif, fontSize: 15, color: TH.inkSoft, lineHeight: 1.6, marginTop: 10 }}>{a}</div>
          </details>
        ))}
      </div>
      <Footer/>
    </div>
  );
}

Object.assign(window, { Pricing });