// pricing.jsx — Subscription tiers for Kick + Twitch (catalog in plans.jsx)

function Pricing() {
  const [platform, setPlatform] = React.useState('kick');
  const [cycle, setCycle] = React.useState('views');
  const data = PLAN_CATALOG[platform];
  const plans = data[cycle];

  return (
    <Stage>
      <SiteNav platform={platform} setPlatform={setPlatform}/>

      <section style={{ padding: '60px 80px 32px', maxWidth: 1440, margin: '0 auto', textAlign: 'center' }}>
        <span className="vb-caption" style={{ display: 'block', marginBottom: 16 }}>Pricing</span>
        <h1 className="vb-display-2 vb-grad-text" style={{ marginBottom: 16 }}>One flat rate.<br/>Unlimited every month.</h1>
        <p className="vb-body" style={{ fontSize: 17, maxWidth: 560, margin: '0 auto', color: 'var(--vb-fg-2)' }}>
          Pick a plan, run as many boosts as you want for the month, cancel anytime.
        </p>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 40 }}>
          <PricingToggle platform={platform} cycle={cycle} setCycle={setCycle} data={data}/>
        </div>
      </section>

      <section style={{ padding: '40px 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        {data.layout === 'split' ? (
          <SplitGrid plans={plans} platform={platform} cycle={cycle} data={data}/>
        ) : (
          <RowGrid plans={plans} platform={platform} cycle={cycle} data={data}/>
        )}
      </section>

      <section style={{ padding: '0 80px 100px', maxWidth: 1100, margin: '0 auto' }}>
        <h2 className="vb-h1" style={{ textAlign: 'center', marginBottom: 40 }}>Common questions</h2>
        <div className="vb-col" style={{ gap: 8 }}>
          {[
            ['Can I cancel anytime?', 'Yes. Cancel from your dashboard at any time. Your plan stays active until the end of the current billing period — no early-termination fees.'],
            ['What happens if I upgrade or downgrade?', 'Upgrades take effect immediately and we prorate the difference. Downgrades take effect at the start of your next billing cycle so you keep what you paid for.'],
            ['Will Kick or Twitch detect this?', 'No. Every viewer is a real residential session with rotating fingerprints, watch-token cycling, and per-stream pacing tuned to look organic. We have not had a flagged account in 14 months.'],
            ['How fast do viewers ramp up?', 'Default ramp is 8–12 minutes to your target. You can switch to "instant" for a 30-second hard fill, but it\'s less natural-looking.'],
            ['Do you store my password?', 'Never. Auth is OAuth-only. We only need your channel name to deliver.'],
          ].map(([q, a], i) => <FaqRow key={i} q={q} a={a}/>)}
        </div>
      </section>

      <SiteFooter/>
    </Stage>
  );
}

function PricingToggle({ platform, cycle, setCycle, data }) {
  const platformLabel = platform === 'kick' ? 'Kick' : 'Twitch';
  return (
    <div style={{
      display: 'inline-flex', padding: 4, borderRadius: 999,
      background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
    }}>
      {[
        { v: 'views', label: `${platformLabel} Views` },
        { v: 'aio', label: `${platformLabel} AIO` },
      ].map((o) => {
        const active = cycle === o.v;
        return (
          <button key={o.v} onClick={() => setCycle(o.v)} style={{
            padding: '10px 28px', border: 'none', cursor: 'pointer',
            borderRadius: 999, fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
            background: active ? data.buttonGradient : 'transparent',
            color: active ? '#fff' : 'var(--vb-fg-2)',
            boxShadow: active
              ? `0 0 28px -4px ${data.accentGlow}, 0 1px 0 rgba(255,255,255,0.25) inset`
              : 'none',
            transition: 'all 0.2s',
          }}>{o.label}</button>
        );
      })}
    </div>
  );
}

function SplitGrid({ plans, platform, cycle, data }) {
  const firstRow = plans.slice(0, 3);
  const secondRow = plans.slice(3);
  return (
    <div className="vb-col" style={{ gap: 20, maxWidth: 1180, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {firstRow.map((p) => <PlanCard key={p.id} plan={p} platform={platform} cycle={cycle} data={data}/>)}
      </div>
      {secondRow.length > 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          <div/>
          {secondRow.map((p) => <PlanCard key={p.id} plan={p} platform={platform} cycle={cycle} data={data}/>)}
        </div>
      )}
    </div>
  );
}

function RowGrid({ plans, platform, cycle, data }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${plans.length}, 1fr)`, gap: 16, maxWidth: 1400, margin: '0 auto' }}>
      {plans.map((p) => <PlanCard key={p.id} plan={p} platform={platform} cycle={cycle} data={data}/>)}
    </div>
  );
}

function PlanCard({ plan, platform, cycle, data }) {
  const popular = plan.popular;
  const showBadge = data.showPopularBadge;
  const ctaHighlighted = popular && showBadge;
  const checkoutHref = `checkout.html?platform=${platform}&plan=${plan.id}&cycle=${cycle}`;
  const ctaArrow = plan.cta.includes('→');
  const ctaLabel = plan.cta.replace('→', '').trim();

  return (
    <div style={{
      position: 'relative',
      padding: 24,
      borderRadius: 20,
      background: popular
        ? `linear-gradient(180deg, ${data.accentTint}, rgba(255,255,255,0.02))`
        : 'rgba(255,255,255,0.025)',
      border: `1px solid ${popular ? data.accentBorder : 'rgba(255,255,255,0.06)'}`,
      boxShadow: popular ? `0 0 80px -20px ${data.accentGlow}, 0 1px 0 rgba(255,255,255,0.06) inset` : 'none',
      display: 'flex', flexDirection: 'column', gap: 18,
    }}>
      {showBadge && popular && (
        <div style={{
          position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)',
          background: data.buttonGradient, color: '#fff', fontSize: 9.5, fontWeight: 700,
          padding: '4px 12px', borderRadius: 999, letterSpacing: '0.12em',
          boxShadow: `0 0 20px ${data.accentGlow}, 0 1px 0 rgba(255,255,255,0.3) inset`,
          whiteSpace: 'nowrap', zIndex: 2,
        }}>
          MOST POPULAR
        </div>
      )}

      <div>
        <h3 style={{ fontSize: 19, fontWeight: 700, color: 'var(--vb-fg-0)', margin: '0 0 10px' }}>{plan.name}</h3>
        <p style={{ fontSize: 12.5, color: 'var(--vb-fg-2)', lineHeight: 1.55, margin: 0, minHeight: 56 }}>{plan.desc}</p>
      </div>

      <div className="vb-row" style={{ alignItems: 'baseline', gap: 6 }}>
        <span className="vb-mono" style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, color: 'var(--vb-fg-0)' }}>${plan.price}</span>
        <span style={{ fontSize: 12, color: 'var(--vb-fg-3)' }}>/ {plan.period}</span>
      </div>

      <div style={{ height: 1, background: 'rgba(255,255,255,0.06)' }}/>

      <ul className="vb-col" style={{ gap: 10, padding: 0, margin: 0, listStyle: 'none', flex: 1 }}>
        {plan.features.map((f) => (
          <li key={f} className="vb-row" style={{ gap: 10, alignItems: 'flex-start' }}>
            <span style={{
              width: 18, height: 18, borderRadius: '50%', flexShrink: 0,
              background: data.accentTint,
              border: `1px solid ${data.accent.replace(')', ' / 0.4)')}`,
              color: data.accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginTop: 1,
            }}>
              <IconCheck size={11}/>
            </span>
            <span style={{ fontSize: 13, color: 'var(--vb-fg-1)', lineHeight: 1.4 }}>{f}</span>
          </li>
        ))}
      </ul>

      <a href={checkoutHref} style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        height: 48, padding: '0 20px', borderRadius: 999,
        background: ctaHighlighted ? data.buttonGradient : 'rgba(255,255,255,0.05)',
        color: ctaHighlighted ? '#fff' : 'var(--vb-fg-0)',
        border: `1px solid ${ctaHighlighted ? data.accentBorder : 'rgba(255,255,255,0.1)'}`,
        textDecoration: 'none',
        fontSize: 14, fontWeight: 600,
        boxShadow: ctaHighlighted ? `0 0 28px -4px ${data.accentGlow}, 0 1px 0 rgba(255,255,255,0.25) inset` : 'none',
        fontFamily: 'inherit',
        transition: 'all 0.2s',
      }}>
        {ctaLabel}
        {ctaArrow && <span style={{ fontSize: 16 }}>→</span>}
      </a>
    </div>
  );
}

function FaqRow({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <Glass soft style={{ padding: '20px 24px', borderRadius: 16, cursor: 'pointer' }} onClick={() => setOpen(!open)}>
      <div className="vb-row" style={{ justifyContent: 'space-between' }}>
        <span style={{ fontSize: 15, fontWeight: 500 }}>{q}</span>
        <span style={{ color: 'var(--vb-fg-2)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}><IconChevron size={16}/></span>
      </div>
      {open && <p style={{ color: 'var(--vb-fg-2)', fontSize: 13, lineHeight: 1.55, margin: '12px 0 0', maxWidth: 720 }}>{a}</p>}
    </Glass>
  );
}

Object.assign(window, { Pricing });