// affiliates.jsx — Affiliate program (public marketing page)

const AFFILIATE_TIERS = [
  {
    id: 'starter', name: 'Starter', commission: 15, minRefs: 0, color: 'oklch(0.78 0.16 200)',
    perks: ['15% recurring commission', 'Real-time dashboard', 'Custom referral link', 'Marketing assets pack'],
  },
  {
    id: 'pro', name: 'Pro', commission: 25, minRefs: 25, color: 'oklch(0.88 0.27 142)', featured: true,
    perks: ['25% recurring commission', 'Priority payouts (weekly)', 'Co-branded landing pages', 'Dedicated affiliate manager', 'Early access to new services'],
  },
  {
    id: 'elite', name: 'Elite', commission: 40, minRefs: 100, color: 'oklch(0.62 0.23 295)',
    perks: ['40% recurring commission', 'Same-day payouts', 'Custom contract terms', 'White-label options', 'Revenue share on enterprise', 'Direct line to founders'],
  },
];

const PAYOUT_METHODS = [
  { id: 'btc', name: 'Bitcoin', sub: 'Same-day · 0% fee', icon: '₿', hue: 50 },
  { id: 'eth', name: 'Ethereum', sub: 'Same-day · 0% fee', icon: 'Ξ', hue: 250 },
  { id: 'usdt', name: 'USDT', sub: 'Same-day · 0% fee', icon: '₮', hue: 142 },
  { id: 'wire', name: 'Wire / SEPA', sub: '1-2 days · $5 fee', icon: 'W', hue: 0 },
  { id: 'paypal', name: 'PayPal', sub: 'Instant · 2% fee', icon: 'P', hue: 220 },
];

const TOP_AFFILIATES = [
  { name: 'streamlord', tier: 'Elite', refs: 412, earned: 18420, hue: 295 },
  { name: 'viralqueen', tier: 'Elite', refs: 287, earned: 12840, hue: 25 },
  { name: 'pump_master', tier: 'Pro', refs: 94, earned: 4280, hue: 142 },
  { name: 'kickking', tier: 'Pro', refs: 71, earned: 3120, hue: 200 },
  { name: 'twitchtitan', tier: 'Pro', refs: 58, earned: 2640, hue: 60 },
];

const FAQ = [
  { q: 'How does commission tracking work?', a: 'Every referral link uses a 90-day attribution cookie plus a fingerprint fallback. We track the customer for life — every boost they buy, you earn recurring commission on, forever.' },
  { q: 'When do I get paid?', a: 'Starter and Pro affiliates are paid weekly on Mondays. Elite tier gets same-day payouts on demand. Minimum payout is $50 across all tiers.' },
  { q: 'Can I run paid ads?', a: 'Yes — but never on platform-owned keywords (Kick, Twitch, Viewbot.to). Anything else is fair game. Pro tier and above get pre-cleared ad creative.' },
  { q: 'Do refunds affect my commission?', a: 'Only chargebacks within the first 7 days. Anything after that is locked. We absorb the risk on long-term retention.' },
  { q: 'Can I become an affiliate without a stream?', a: 'Absolutely. Many of our top earners run Discord servers, Telegram channels, or YouTube content about streaming.' },
];

function Affiliates() {
  const [platform, setPlatform] = React.useState('kick');
  const [calcRefs, setCalcRefs] = React.useState(50);
  const [calcAvg, setCalcAvg] = React.useState(80);
  const [calcTier, setCalcTier] = React.useState('pro');

  const tier = AFFILIATE_TIERS.find((t) => t.id === calcTier);
  const monthly = Math.round(calcRefs * calcAvg * (tier.commission / 100));
  const yearly = monthly * 12;

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

      <section style={{ padding: '48px 80px 56px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px 6px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', marginBottom: 20 }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'oklch(0.62 0.23 295 / 0.2)', border: '1px solid oklch(0.62 0.23 295 / 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'oklch(0.78 0.2 295)' }}><IconLink size={11}/></span>
              <span style={{ fontSize: 12, color: 'var(--vb-fg-1)', fontWeight: 500 }}>Affiliate program · paid out $2.4M last quarter</span>
            </div>

            <h1 className="vb-display-1 vb-grad-text" style={{ marginBottom: 18 }}>
              Refer once.<br/>Earn <em style={{ fontStyle: 'italic', fontWeight: 700, color: 'var(--vb-fg-0)' }}>forever</em>.
            </h1>

            <p className="vb-body" style={{ fontSize: 18, maxWidth: 480, marginBottom: 28, color: 'var(--vb-fg-1)' }}>
              Up to 40% recurring commission on every boost your referrals run. Lifetime attribution. Same-day crypto payouts at the top tier.
            </p>

            <div style={{ display: 'flex', gap: 12, marginBottom: 32 }}>
              <Btn variant="primary" size="lg" iconRight={<IconArrow size={16}/>} href="affiliate-dashboard.html">Join the program</Btn>
              <Btn variant="glass" size="lg" href="affiliate-dashboard.html">View dashboard demo</Btn>
            </div>

            <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap' }}>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.02em' }}>40<span style={{ fontSize: 18, color: 'var(--vb-fg-2)' }}>%</span></span>
                <span className="vb-caption">max commission</span>
              </div>
              <div className="vb-divider-v"/>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.02em' }}>
                  $<LiveCounter base={184260} jitter={8} interval={1300}/>
                </span>
                <span className="vb-caption">paid out this month</span>
              </div>
              <div className="vb-divider-v"/>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.02em' }}>2,418</span>
                <span className="vb-caption">active partners</span>
              </div>
            </div>
          </div>

          <EarningsCalculator
            refs={calcRefs} setRefs={setCalcRefs}
            avg={calcAvg} setAvg={setCalcAvg}
            tier={calcTier} setTier={setCalcTier}
            monthly={monthly} yearly={yearly}
            tierObj={tier}
          />
        </div>
      </section>

      <section style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ marginBottom: 32 }}>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>How it works</span>
          <h2 className="vb-display-3 vb-grad-text">Four steps.<br/>Lifetime payout.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          <StepCard num="01" title="Apply in 30 seconds" desc="OAuth with your Kick or Twitch. Auto-approved if you have an active stream or audience."/>
          <StepCard num="02" title="Grab your link" desc="Custom subdomain, UTM-ready URLs, QR codes for in-stream overlays. All in one place."/>
          <StepCard num="03" title="Drive traffic" desc="Drop it in chat, panels, Discord, X. We handle the rest — attribution, conversion, retention."/>
          <StepCard num="04" title="Get paid" desc="Recurring commission, forever. Choose crypto, wire, or PayPal. Auto-payouts when you hit $50."/>
        </div>
      </section>

      <section style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        <div className="vb-row" style={{ alignItems: 'flex-end', marginBottom: 32 }}>
          <div>
            <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Tiers</span>
            <h2 className="vb-display-3 vb-grad-text">Climb as you scale.</h2>
          </div>
          <div className="vb-spacer"/>
          <p style={{ maxWidth: 320, color: 'var(--vb-fg-2)', fontSize: 14, lineHeight: 1.55 }}>
            Auto-promotion on the first of every month. No claw-backs if your referrals lapse.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {AFFILIATE_TIERS.map((t) => <TierCard key={t.id} tier={t}/>)}
        </div>
      </section>

      <section style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16 }}>
          <Leaderboard/>
          <PayoutMethods/>
        </div>
      </section>

      <section style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        <Glass style={{ padding: 36, borderRadius: 32 }}>
          <div className="vb-row" style={{ alignItems: 'flex-start', marginBottom: 24 }}>
            <div>
              <span className="vb-caption" style={{ display: 'block', marginBottom: 8 }}>Marketing kit</span>
              <h3 className="vb-h2" style={{ marginBottom: 6 }}>Pre-cleared assets, ready to drop.</h3>
              <p style={{ color: 'var(--vb-fg-2)', fontSize: 14, lineHeight: 1.55, maxWidth: 520 }}>Banners, panels, Discord embeds, video pre-rolls, X graphics — pulled directly from our brand system.</p>
            </div>
            <div className="vb-spacer"/>
            <Btn variant="glass" iconRight={<IconArrow size={14}/>} href="affiliate-dashboard.html">Browse all 84</Btn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            <AssetTile label="Stream panel" dim="320×100" hue={142}/>
            <AssetTile label="Discord banner" dim="960×540" hue={295}/>
            <AssetTile label="X graphic" dim="1200×675" hue={200}/>
            <AssetTile label="Video preroll" dim="15s · 1080p" hue={25}/>
          </div>
        </Glass>
      </section>

      <section style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }}>
          <div>
            <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>FAQ</span>
            <h2 className="vb-display-3 vb-grad-text" style={{ marginBottom: 16 }}>Common questions.</h2>
            <p style={{ color: 'var(--vb-fg-2)', fontSize: 14, lineHeight: 1.55, marginBottom: 20 }}>Still curious? Hit up your affiliate manager — Pro tier and above.</p>
            <Btn variant="glass" iconRight={<IconArrow size={14}/>} href="mailto:affiliates@viewbot.to">Talk to us</Btn>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {FAQ.map((f, i) => <FaqItem key={i} q={f.q} a={f.a} defaultOpen={i === 0}/>)}
          </div>
        </div>
      </section>

      <section style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        <Glass style={{ padding: '48px 64px', borderRadius: 32, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 100% at 80% 50%, oklch(0.62 0.23 295 / 0.25), transparent 70%), radial-gradient(ellipse 50% 80% at 0% 50%, oklch(0.88 0.27 142 / 0.18), transparent 70%)', pointerEvents: 'none' }}/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>
            <div>
              <h2 className="vb-display-3 vb-grad-text" style={{ marginBottom: 12 }}>Start earning today.<br/>Get paid forever.</h2>
              <p className="vb-body" style={{ fontSize: 16, maxWidth: 460 }}>Two minutes to apply. Auto-approved for active streamers. No minimums, no contracts.</p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
              <Btn variant="primary" size="lg" iconRight={<IconArrow size={16}/>} href="affiliate-dashboard.html">Become an affiliate</Btn>
              <Btn variant="glass" size="lg" href="mailto:affiliates@viewbot.to">Read the program docs</Btn>
            </div>
          </div>
        </Glass>
      </section>

      <SiteFooter/>
    </Stage>
  );
}

function EarningsCalculator({ refs, setRefs, avg, setAvg, tier, setTier, monthly, yearly, tierObj }) {
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', inset: -40, background: `radial-gradient(circle at 50% 50%, ${tierObj.color.replace(')', ' / 0.22)')}, transparent 60%)`, transition: 'background 0.6s', pointerEvents: 'none' }}/>
      <Glass style={{ position: 'relative', padding: 28, borderRadius: 32 }}>
        <div className="vb-row" style={{ marginBottom: 20 }}>
          <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em', color: 'var(--vb-fg-3)', textTransform: 'uppercase' }}>Earnings calculator</span>
          <span className="vb-spacer"/>
          <span className="vb-mono" style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>est. monthly · USD</span>
        </div>

        <div style={{ padding: 22, borderRadius: 18, background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))', border: '1px solid rgba(255,255,255,0.06)', marginBottom: 16 }}>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 4 }}>You earn / month</span>
          <div className="vb-row" style={{ alignItems: 'baseline', gap: 8 }}>
            <span className="vb-mono" style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', color: tierObj.color }}>${monthly.toLocaleString()}</span>
            <span className="vb-mono" style={{ fontSize: 13, color: 'var(--vb-fg-3)' }}>/mo</span>
          </div>
          <span style={{ fontSize: 12, color: 'var(--vb-fg-2)' }}>≈ ${yearly.toLocaleString()} per year, recurring</span>
        </div>

        <CalcRow label="Active referrals" value={refs} suffix="people">
          <input type="range" className="vb-range" min={5} max={500} value={refs} onChange={(e) => setRefs(Number(e.target.value))} style={{ width: '100%' }}/>
        </CalcRow>
        <CalcRow label="Avg spend per referral" value={`$${avg}`} suffix="/mo">
          <input type="range" className="vb-range" min={20} max={400} step={10} value={avg} onChange={(e) => setAvg(Number(e.target.value))} style={{ width: '100%' }}/>
        </CalcRow>

        <div style={{ marginTop: 14 }}>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 8 }}>Your tier</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {AFFILIATE_TIERS.map((t) => (
              <button key={t.id} onClick={() => setTier(t.id)}
                style={{
                  padding: '10px 8px', borderRadius: 12,
                  background: tier === t.id ? t.color.replace(')', ' / 0.14)') : 'rgba(255,255,255,0.03)',
                  border: tier === t.id ? `1px solid ${t.color.replace(')', ' / 0.4)')}` : '1px solid rgba(255,255,255,0.08)',
                  color: tier === t.id ? t.color : 'var(--vb-fg-1)',
                  cursor: 'pointer', transition: 'all 0.25s', fontFamily: 'inherit',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
                }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{t.name}</span>
                <span className="vb-mono" style={{ fontSize: 10, opacity: 0.8 }}>{t.commission}%</span>
              </button>
            ))}
          </div>
        </div>
      </Glass>
    </div>
  );
}

function CalcRow({ label, value, suffix, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div className="vb-row" style={{ marginBottom: 6 }}>
        <span className="vb-caption">{label}</span>
        <span className="vb-spacer"/>
        <span className="vb-mono" style={{ fontSize: 13, fontWeight: 600 }}>{value}</span>
        <span style={{ fontSize: 11, color: 'var(--vb-fg-3)', marginLeft: 4 }}>{suffix}</span>
      </div>
      {children}
    </div>
  );
}

function StepCard({ num, title, desc }) {
  return (
    <Glass className="vb-lift" style={{ padding: 24, borderRadius: 22, position: 'relative', overflow: 'hidden' }}>
      <span className="vb-mono" style={{ fontSize: 11, color: 'var(--vb-fg-3)', letterSpacing: '0.1em', display: 'block', marginBottom: 12 }}>{num}</span>
      <h4 className="vb-h4" style={{ marginBottom: 8 }}>{title}</h4>
      <p style={{ color: 'var(--vb-fg-2)', fontSize: 13, lineHeight: 1.55, margin: 0 }}>{desc}</p>
    </Glass>
  );
}

function TierCard({ tier }) {
  const featured = tier.featured;
  return (
    <Glass className="vb-lift" style={{
      padding: 28, borderRadius: 24, position: 'relative', overflow: 'hidden',
      border: featured ? `1px solid ${tier.color.replace(')', ' / 0.4)')}` : undefined,
      boxShadow: featured ? `0 0 0 1px ${tier.color.replace(')', ' / 0.2)')}, 0 20px 60px -10px ${tier.color.replace(')', ' / 0.3)')}` : undefined,
    }}>
      <div style={{ position: 'absolute', top: -60, right: -60, width: 240, height: 240, background: `radial-gradient(circle, ${tier.color.replace(')', ' / 0.18)')}, transparent 65%)`, pointerEvents: 'none' }}/>
      <div style={{ position: 'relative' }}>
        <div className="vb-row" style={{ marginBottom: 20 }}>
          <span style={{ padding: '4px 10px', borderRadius: 999, background: tier.color.replace(')', ' / 0.14)'), border: `1px solid ${tier.color.replace(')', ' / 0.3)')}`, color: tier.color, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em' }}>{tier.name}</span>
          {featured && <><span className="vb-spacer"/><span style={{ fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Most popular</span></>}
        </div>
        <div className="vb-row" style={{ alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
          <span className="vb-mono" style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', color: tier.color }}>{tier.commission}</span>
          <span className="vb-mono" style={{ fontSize: 24, color: tier.color, fontWeight: 600 }}>%</span>
          <span style={{ fontSize: 13, color: 'var(--vb-fg-3)', marginLeft: 6 }}>recurring</span>
        </div>
        <p style={{ fontSize: 12, color: 'var(--vb-fg-2)', marginBottom: 20 }}>
          {tier.minRefs === 0 ? 'No minimum to start' : `Unlocks at ${tier.minRefs}+ active referrals`}
        </p>
        <div className="vb-col" style={{ gap: 10, marginBottom: 24 }}>
          {tier.perks.map((p, i) => (
            <div key={i} className="vb-row" style={{ gap: 10 }}>
              <span style={{ width: 16, height: 16, borderRadius: 8, background: tier.color.replace(')', ' / 0.16)'), color: tier.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <IconCheck size={10}/>
              </span>
              <span style={{ fontSize: 13, color: 'var(--vb-fg-1)' }}>{p}</span>
            </div>
          ))}
        </div>
        <Btn variant={featured ? 'primary' : 'glass'} style={{ width: '100%' }} iconRight={<IconArrow size={13}/>} href="affiliate-dashboard.html">
          {tier.minRefs === 0 ? 'Start here' : `Unlock ${tier.name}`}
        </Btn>
      </div>
    </Glass>
  );
}

function Leaderboard() {
  return (
    <Glass style={{ padding: 28, borderRadius: 24 }}>
      <div className="vb-row" style={{ marginBottom: 20 }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 4 }}>Top affiliates · this month</span>
          <h3 className="vb-h3">Live leaderboard</h3>
        </div>
        <span className="vb-spacer"/>
        <span className="vb-live-pill"><span className="vb-dot vb-dot-pulse"/>LIVE</span>
      </div>
      <div className="vb-col" style={{ gap: 6 }}>
        {TOP_AFFILIATES.map((a, i) => (
          <div key={a.name} className="vb-row" style={{ gap: 14, padding: '12px 14px', borderRadius: 12, background: i === 0 ? 'oklch(0.88 0.27 142 / 0.06)' : 'rgba(255,255,255,0.025)', border: i === 0 ? '1px solid oklch(0.88 0.27 142 / 0.18)' : '1px solid rgba(255,255,255,0.04)' }}>
            <span className="vb-mono" style={{ width: 22, fontSize: 13, color: i < 3 ? 'var(--vb-fg-0)' : 'var(--vb-fg-3)', fontWeight: 600 }}>#{i + 1}</span>
            <Avatar name={a.name} size={32} hue={a.hue}/>
            <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{a.name}</span>
              <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>{a.tier} · {a.refs} active referrals</span>
            </div>
            <span className="vb-mono" style={{ fontSize: 14, fontWeight: 600, color: 'oklch(0.88 0.27 142)' }}>${a.earned.toLocaleString()}</span>
          </div>
        ))}
      </div>
    </Glass>
  );
}

function PayoutMethods() {
  return (
    <Glass style={{ padding: 28, borderRadius: 24 }}>
      <div style={{ marginBottom: 20 }}>
        <span className="vb-caption" style={{ display: 'block', marginBottom: 4 }}>Payouts</span>
        <h3 className="vb-h3" style={{ marginBottom: 6 }}>Get paid your way</h3>
        <p style={{ fontSize: 12, color: 'var(--vb-fg-2)' }}>Min $50 · auto-pay every Monday</p>
      </div>
      <div className="vb-col" style={{ gap: 8 }}>
        {PAYOUT_METHODS.map((m) => (
          <div key={m.id} className="vb-row" style={{ gap: 12, padding: '12px 14px', borderRadius: 12, background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.05)' }}>
            <span style={{
              width: 36, height: 36, borderRadius: 10,
              background: `linear-gradient(135deg, oklch(0.7 0.18 ${m.hue}), oklch(0.5 0.2 ${m.hue + 40}))`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
              fontSize: 16, fontWeight: 700, fontFamily: 'var(--vb-font-mono)',
              boxShadow: '0 1px 0 rgba(255,255,255,0.2) inset',
            }}>{m.icon}</span>
            <div className="vb-col" style={{ flex: 1 }}>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</span>
              <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>{m.sub}</span>
            </div>
          </div>
        ))}
      </div>
    </Glass>
  );
}

function AssetTile({ label, dim, hue }) {
  return (
    <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.06)', background: 'rgba(255,255,255,0.02)' }}>
      <div style={{ position: 'relative', aspectRatio: '16 / 9', background: `linear-gradient(135deg, oklch(0.25 0.05 ${hue}), oklch(0.12 0.04 ${hue + 40}))`, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 30% 30%, oklch(0.6 0.2 ${hue} / 0.4), transparent 60%)` }}/>
        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="1.4" style={{ position: 'relative' }}>
          <rect x="3" y="3" width="18" height="18" rx="2"/>
          <circle cx="8.5" cy="8.5" r="1.5"/>
          <path d="m21 15-5-5L5 21"/>
        </svg>
      </div>
      <div style={{ padding: '10px 14px' }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
        <div className="vb-mono" style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>{dim}</div>
      </div>
    </div>
  );
}

function FaqItem({ q, a, defaultOpen }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <Glass soft style={{ borderRadius: 16, overflow: 'hidden' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', padding: '16px 20px', background: 'transparent', border: 'none',
        color: 'var(--vb-fg-0)', cursor: 'pointer', textAlign: 'left',
        display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'inherit',
      }}>
        <span style={{ fontSize: 14, fontWeight: 500, flex: 1 }}>{q}</span>
        <span style={{ color: 'var(--vb-fg-3)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.25s' }}>
          <IconChevron size={16}/>
        </span>
      </button>
      {open && (
        <div style={{ padding: '0 20px 18px', fontSize: 13, color: 'var(--vb-fg-2)', lineHeight: 1.6 }}>{a}</div>
      )}
    </Glass>
  );
}

Object.assign(window, { Affiliates });