// Stake Promo Codes — Independent Guide (visual landing)
const { useState, useEffect } = React;
const TG = "https://t.me/Stake4Bet";

function PCHero() {
  return (
    <section className="relative pt-32 pb-20 overflow-hidden">
      <div className="absolute inset-0 mesh-bg pointer-events-none opacity-70" />
      <div className="absolute inset-0 pointer-events-none" style={{background:"radial-gradient(ellipse 60% 50% at 50% 30%, rgba(16,185,129,0.10), transparent 60%)"}} />
      <div className="relative max-w-[1100px] mx-auto px-5 lg:px-8 text-center">
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-teal/30 bg-teal/10 text-teal text-[12px] font-mono tracking-wider mb-7">
          🎁 UPDATED MAY 2026
        </div>
        <h1 className="font-display text-[44px] md:text-[68px] font-semibold tracking-tight leading-[1.05] grad-text">
          Stake.com Bonus Codes &amp; Promo Codes:
          <br/>The Independent Guide
        </h1>
        <p className="mt-6 text-[18px] md:text-[20px] text-fg-muted leading-relaxed max-w-[760px] mx-auto">
          No affiliate links. No fake codes. Just honest analysis of what works, what doesn't, and what's a scam.
        </p>
        <div className="mt-7 flex flex-wrap justify-center gap-x-6 gap-y-2 text-[13.5px] text-fg-muted">
          <span className="inline-flex items-center gap-2"><span className="text-teal">✓</span> Updated monthly</span>
          <span className="inline-flex items-center gap-2"><span className="text-teal">✓</span> All codes verified</span>
          <span className="inline-flex items-center gap-2"><span className="text-teal">✓</span> Scam codes exposed</span>
        </div>
        <a href={TG} target="_blank" rel="noopener" className="mt-10 group inline-flex items-center gap-2 px-5 py-3 rounded-full border border-tg/40 bg-tg/8 text-tg hover:bg-tg/15 transition text-[14px] font-medium">
          <Icon.Telegram className="w-4 h-4"/> Questions about codes? Ask our experts
          <Icon.ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform"/>
        </a>
      </div>
    </section>
  );
}

// SECTION 1 — How codes work (flow diagram)
function PCFlow() {
  const STEPS = [
    { icon:"📝", title:"Registration Code", body:"Entered during signup. One-time use. Unlocks welcome bonus (typically 200% deposit match up to $2,000–$3,000)." },
    { icon:"💰", title:"First Deposit", body:"You deposit crypto. The bonus matches your deposit at the percentage specified by the code (e.g., 200% on $100 = $200 bonus)." },
    { icon:"🔄", title:"Wagering Requirement", body:"You must play through the bonus amount 40× before withdrawing. Example: $200 bonus × 40 = $8,000 in total bets required." },
    { icon:"💸", title:"Withdrawal", body:"Once wagering is complete, bonus funds convert to real balance. Only then can you withdraw." },
  ];
  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50">
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8">
        <div className="text-center max-w-[680px] mx-auto mb-12">
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">How they work</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">Understanding the system before using any code.</h2>
        </div>
        <div className="grid md:grid-cols-4 gap-4 relative">
          <div className="hidden md:block absolute top-[42px] left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-teal/40 to-transparent"/>
          {STEPS.map((s,i)=>(
            <div key={i} className="relative rounded-2xl border border-ink-600 bg-ink-800/70 p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="w-12 h-12 rounded-xl grid place-items-center bg-ink-900 border border-ink-600 text-2xl">{s.icon}</div>
                <span className="font-mono text-[10.5px] tracking-widest text-fg-dim">0{i+1}</span>
              </div>
              <h3 className="font-display text-[17px] font-semibold mb-2">{s.title}</h3>
              <p className="text-[13.5px] text-fg-muted leading-relaxed">{s.body}</p>
            </div>
          ))}
        </div>
        <div className="mt-10 rounded-2xl border border-teal/25 bg-teal/8 p-6 md:p-7 max-w-[940px] mx-auto">
          <div className="flex gap-4">
            <div className="text-2xl shrink-0">⚡</div>
            <p className="text-[14.5px] text-fg leading-relaxed">
              <strong className="text-teal">Key insight:</strong> The wagering requirement is what most sites don't explain clearly. A 40× rollover on a $200 bonus means you need to place <strong>$8,000 in total bets</strong> — not <em>win</em> $8,000. This is standard across the industry, but it's critical to understand before depositing.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// SECTION 2 — Types of codes
function PCTypes() {
  const TYPES = [
    { icon:"🎟️", title:"Welcome / Referral Codes", border:"border-teal/40", glow:"rgba(16,185,129,0.08)",
      bullets:[
        "Used during registration only",
        "One-time use per account",
        "Typical value: 200% deposit match up to $2,000–$3,000",
        "Examples: Affiliate codes from review sites",
      ],
      tag:"Legitimate", tagCls:"bg-teal/15 text-teal border-teal/30",
      verdict:"These are legitimate and officially supported by Stake.",
    },
    { icon:"🎰", title:"Bonus Drop Codes", border:"border-warn/40", glow:"rgba(245,165,36,0.08)",
      bullets:[
        "Released daily on Stake's official Telegram and X/Twitter",
        "Limited claims (typically 25–200 per code)",
        "Value: $1–$10 per code depending on your VIP level",
        "Must have wagered in the last 7 days to claim",
      ],
      tag:"Time-limited", tagCls:"bg-warn/15 text-warn border-warn/30",
      verdict:"Real, but you need to act fast — they run out quickly.",
    },
    { icon:"⭐", title:"VIP Bonus Codes", border:"border-[#8B5CF6]/40", glow:"rgba(139,92,246,0.08)",
      bullets:[
        "Exclusive to high-tier VIP players",
        "Higher values than regular drop codes",
        "Accessed through VIP Telegram channels",
        "Require significant wagering history",
      ],
      tag:"VIP only", tagCls:"bg-[#8B5CF6]/15 text-[#A78BFA] border-[#8B5CF6]/30",
      verdict:"Legitimate but only for established players.",
    },
    { icon:"⚠️", title:"Fake / Scam Codes", border:"border-[#EF4444]/40", glow:"rgba(239,68,68,0.08)",
      bullets:[
        "Shared on random forums, Discord servers, fake sites",
        "Promise unrealistic bonuses (\"500% match!\", \"free $500!\")",
        "Often lead to phishing sites or data theft",
        "Some are expired codes repackaged as \"exclusive\"",
      ],
      tag:"Avoid", tagCls:"bg-[#EF4444]/15 text-[#FCA5A5] border-[#EF4444]/30",
      verdict:"Never use codes from unverified sources.",
    },
  ];
  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50">
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8">
        <div className="text-center max-w-[680px] mx-auto mb-12">
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">Types of codes</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">Four categories. Three legitimate. One to avoid.</h2>
        </div>
        <div className="grid md:grid-cols-2 gap-5">
          {TYPES.map((t,i)=>(
            <div key={i} className={`relative rounded-2xl border-2 ${t.border} bg-ink-800/70 p-7`} style={{boxShadow:`0 0 60px -20px ${t.glow}`}}>
              <div className="flex items-start justify-between mb-4">
                <div className="text-3xl">{t.icon}</div>
                <span className={`text-[10.5px] uppercase tracking-[0.1em] font-bold px-2.5 py-1 rounded border ${t.tagCls}`}>{t.tag}</span>
              </div>
              <h3 className="font-display text-[20px] font-semibold mb-3">{t.title}</h3>
              <ul className="space-y-2 mb-4">
                {t.bullets.map((b,j)=>(
                  <li key={j} className="flex gap-2 text-[13.5px] text-fg-muted leading-relaxed">
                    <span className="text-fg-dim mt-1.5">•</span><span>{b}</span>
                  </li>
                ))}
              </ul>
              <p className="text-[13px] italic text-fg-dim border-t border-ink-700 pt-3">"{t.verdict}"</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// SECTION 3 — Red flags
function PCRedFlags() {
  const FLAGS = [
    { t:"Unrealistic bonus amounts", b:"Any code promising more than 200% or $3,000+ is fake. Stake's maximum official bonus is a 200% deposit match." },
    { t:"Codes requiring your password", b:"Legitimate codes are entered during registration or in Settings > Offers. You NEVER share your password to use a code." },
    { t:"Codes from non-official channels", b:"The only official Stake channels are their verified X/Twitter (@Stake), official Telegram channels, and Instagram. Random Discord servers and forums are not official." },
    { t:"No wagering requirements mentioned", b:"Every legitimate Stake bonus has wagering requirements (typically 40×). If a site promises \"no wagering\" bonuses, it's misleading." },
    { t:"Codes that ask you to deposit first to a different site", b:"Some scam codes redirect you to cloned Stake sites. Always verify you're on stake.com before entering any code." },
    { t:"Guaranteed profit claims", b:"No bonus code guarantees profit. The house always has an edge. Anyone claiming otherwise is lying." },
  ];
  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50" style={{background:"linear-gradient(180deg, transparent, rgba(239,68,68,0.025))"}}>
      <div className="max-w-[940px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-12">
          <div className="text-[11px] uppercase tracking-[0.18em] text-[#FCA5A5] font-mono mb-3">Red flags</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">If you see any of these, walk away.</h2>
        </div>
        <div className="space-y-3">
          {FLAGS.map((f,i)=>(
            <div key={i} className="flex gap-4 rounded-xl border border-[#EF4444]/25 bg-[#EF4444]/5 p-5 hover:border-[#EF4444]/40 transition">
              <div className="w-10 h-10 shrink-0 rounded-lg grid place-items-center bg-[#EF4444]/15 text-[#FCA5A5] text-lg">🚩</div>
              <div>
                <h3 className="font-display text-[16.5px] font-semibold text-fg mb-1">{f.t}</h3>
                <p className="text-[13.5px] text-fg-muted leading-relaxed">{f.b}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-10 rounded-2xl grad-border p-6 md:p-7" style={{background:"linear-gradient(135deg, rgba(38,165,228,0.08), rgba(16,185,129,0.04))"}}>
          <div className="flex flex-col sm:flex-row sm:items-center gap-5">
            <div className="text-3xl shrink-0">🔍</div>
            <div className="flex-1">
              <p className="text-[14.5px] text-fg leading-relaxed">
                <strong className="text-fg">Not sure if a code is legitimate?</strong> Send it to our team and we'll verify it for you.
              </p>
            </div>
            <a href={TG} target="_blank" rel="noopener" className="shrink-0 inline-flex items-center gap-2 px-5 py-3 rounded-xl text-white font-semibold text-[13.5px]"
               style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)",boxShadow:"0 10px 30px -10px rgba(38,165,228,0.6)"}}>
              <Icon.Telegram className="w-4 h-4"/> Chat on Telegram <Icon.ArrowRight className="w-3.5 h-3.5"/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// SECTION 4 — Sources ranked
function PCSources() {
  const SRC = [
    { v:"✅", t:"StakeWorldwide Telegram", trust:5, desc:"Our team verifies every code before sharing it and answers your questions in under 5 minutes. The safest channel.", color:"#10B981" },
    { v:"⚠️", t:"Affiliate Review Sites", trust:3, desc:"Welcome codes from established sites are generally legitimate but always include affiliate tracking. The code works, but they earn commission.", color:"#F5A524" },
    { v:"❌", t:"Random Forums / Discord / Reddit", trust:1, desc:"High risk of expired, fake, or phishing codes. Not recommended.", color:"#EF4444" },
  ];
  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50">
      <div className="max-w-[1100px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-12 max-w-[680px] mx-auto">
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">Where to find them</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">Official sources, ranked by reliability.</h2>
        </div>
        <div className="space-y-3">
          {SRC.map((s,i)=>(
            <div key={i} className="rounded-xl border border-ink-600 bg-ink-800/70 p-5 md:p-6 flex flex-col md:flex-row md:items-center gap-4">
              <div className="text-2xl">{s.v}</div>
              <div className="flex-1 min-w-0">
                <h3 className="font-display text-[16px] font-semibold text-fg">{s.t}</h3>
                <p className="text-[13px] text-fg-muted mt-1 leading-relaxed">{s.desc}</p>
              </div>
              <div className="flex items-center gap-3 md:w-[180px] md:justify-end">
                <div className="flex gap-1">
                  {[1,2,3,4,5].map(n=>(
                    <div key={n} className="w-3 h-5 rounded-sm" style={{background: n<=s.trust ? s.color : "rgba(255,255,255,0.06)"}}/>
                  ))}
                </div>
                <span className="font-mono text-[12px]" style={{color:s.color}}>{s.trust}/5</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// SECTION 5 — Calculator
function PCCalc() {
  const [deposit, setDeposit] = useState(100);
  const [pct, setPct] = useState(200);
  const [wager, setWager] = useState(40);

  const bonus = deposit * (pct/100);
  const totalWager = bonus * wager;
  const houseEdge = 0.03;
  const expectedLoss = totalWager * houseEdge;
  const ev = bonus - expectedLoss;

  const fmt = n => "$" + Math.round(n).toLocaleString();

  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50">
      <div className="max-w-[980px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-12">
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">Do the math</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">Is that bonus code actually worth it?</h2>
          <p className="mt-4 text-[15px] text-fg-muted">Plug in any code's terms and see the expected value before you deposit.</p>
        </div>

        <div className="rounded-3xl grad-border p-6 md:p-9" style={{background:"linear-gradient(180deg, rgba(16,185,129,0.04), rgba(38,165,228,0.03))"}}>
          <div className="grid lg:grid-cols-[1.1fr_1fr] gap-8 lg:gap-10">
            {/* INPUTS */}
            <div className="space-y-7">
              <div>
                <div className="flex justify-between items-baseline mb-3">
                  <label className="text-[13px] uppercase tracking-wider font-mono text-fg-dim">Your deposit</label>
                  <span className="font-display text-[24px] font-semibold text-teal">{fmt(deposit)}</span>
                </div>
                <input type="range" min="50" max="1000" step="10" value={deposit} onChange={e=>setDeposit(+e.target.value)}
                  className="w-full accent-teal" style={{accentColor:"#10B981"}}/>
                <div className="flex justify-between text-[11px] text-fg-dim mt-1.5 font-mono">
                  <span>$50</span><span>$1,000</span>
                </div>
              </div>

              <div>
                <label className="block text-[13px] uppercase tracking-wider font-mono text-fg-dim mb-3">Bonus percentage</label>
                <div className="grid grid-cols-3 gap-2">
                  {[100,150,200].map(p=>(
                    <button key={p} onClick={()=>setPct(p)}
                      className={`py-3 rounded-lg border font-display text-[15px] font-semibold transition ${pct===p?"bg-teal text-ink-950 border-teal":"bg-ink-800 text-fg-muted border-ink-600 hover:border-teal/40"}`}>
                      {p}%
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-[13px] uppercase tracking-wider font-mono text-fg-dim mb-3">Wagering requirement</label>
                <div className="grid grid-cols-4 gap-2">
                  {[20,30,40,50].map(w=>(
                    <button key={w} onClick={()=>setWager(w)}
                      className={`py-3 rounded-lg border font-display text-[15px] font-semibold transition ${wager===w?"bg-teal text-ink-950 border-teal":"bg-ink-800 text-fg-muted border-ink-600 hover:border-teal/40"}`}>
                      {w}×
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* OUTPUTS */}
            <div className="rounded-2xl bg-ink-900/80 border border-ink-600 p-6 md:p-7 flex flex-col gap-5">
              <div className="text-[11px] uppercase tracking-[0.18em] text-fg-dim font-mono">Calculated outcome</div>

              <div className="flex justify-between items-baseline pb-4 border-b border-ink-700">
                <span className="text-[13px] text-fg-muted">Bonus received</span>
                <span className="font-display text-[22px] font-semibold text-fg">{fmt(bonus)}</span>
              </div>
              <div className="flex justify-between items-baseline pb-4 border-b border-ink-700">
                <span className="text-[13px] text-fg-muted">Total wagering required</span>
                <span className="font-display text-[22px] font-semibold text-warn">{fmt(totalWager)}</span>
              </div>
              <div className="flex justify-between items-baseline pb-4 border-b border-ink-700">
                <span className="text-[13px] text-fg-muted">House edge impact (3% est.)</span>
                <span className="font-display text-[22px] font-semibold text-[#FCA5A5]">−{fmt(expectedLoss)}</span>
              </div>
              <div className="flex justify-between items-baseline pt-1">
                <span className="text-[14px] font-semibold text-fg">Expected net value</span>
                <span className="font-display text-[28px] font-semibold" style={{color: ev>=0 ? "#10B981" : "#EF4444"}}>
                  {ev>=0 ? "+" : "−"}{fmt(Math.abs(ev))}
                </span>
              </div>
            </div>
          </div>

          <div className="mt-8 flex gap-3 rounded-xl bg-ink-900/60 border border-ink-600 p-5">
            <div className="text-xl">💡</div>
            <p className="text-[13.5px] text-fg-muted leading-relaxed">
              As you can see, most bonus codes with <strong>40× wagering requirements</strong> result in a net loss when you factor in house edge. The bonus helps you play longer, but it's not free money. Only deposit what you can afford to lose.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// SECTION 6 — Restricted countries CTA
function PCRestricted() {
  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50">
      <div className="max-w-[940px] mx-auto px-5 lg:px-8 text-center">
        <div className="text-[11px] uppercase tracking-[0.18em] text-warn font-mono mb-3">Restricted access</div>
        <h2 className="font-display text-3xl md:text-[38px] font-semibold tracking-tight leading-tight">In a restricted country? Here's what to do.</h2>
        <p className="mt-5 text-[15.5px] text-fg-muted leading-relaxed max-w-[680px] mx-auto">
          Bonus codes only work if you can access Stake.com. If you're in a restricted country (US, UK, Australia, France, Germany), you'll need to set up proper access first. Our team helps thousands of players get set up every month.
        </p>
        <div className="mt-9 flex flex-col sm:flex-row justify-center gap-3">
          <a href={swResolve("/vpn/best-for-stake")} className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl border border-teal/40 text-teal hover:bg-teal hover:text-ink-950 font-semibold text-[14px] transition">
            Read Our VPN Guide <Icon.ArrowRight className="w-4 h-4"/>
          </a>
          <a href={TG} target="_blank" rel="noopener" className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl text-white font-semibold text-[14px]"
             style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)",boxShadow:"0 10px 30px -10px rgba(38,165,228,0.6)"}}>
            <Icon.Telegram className="w-4 h-4"/> Get Personal Help on Telegram
          </a>
        </div>
      </div>
    </section>
  );
}

// SECTION 7 — Editorial quote
function PCQuote() {
  return (
    <section className="relative py-20 md:py-28" style={{background:"linear-gradient(180deg, rgba(16,185,129,0.03), transparent)"}}>
      <div className="max-w-[920px] mx-auto px-5 lg:px-8">
        <div className="relative rounded-3xl border border-ink-600 bg-ink-800/60 p-8 md:p-12">
          <div className="absolute -top-6 left-8 font-display text-[100px] leading-none text-teal/30 select-none">"</div>
          <blockquote className="font-display text-[22px] md:text-[28px] leading-[1.4] text-fg pt-5">
            Bonus codes are a marketing tool, not a money printer. The best code in the world won't help if you don't understand wagering requirements, don't manage your bankroll, or can't even access the platform. Start with the fundamentals — set up your access properly, understand how the system works, and then decide if a bonus code adds value to your experience.
          </blockquote>
          <div className="mt-7 flex items-center gap-3 pt-5 border-t border-ink-700">
            <div className="w-11 h-11 rounded-full grid place-items-center font-semibold text-ink-950 text-[14px]" style={{background:"linear-gradient(135deg,#10B981,#26A5E4)"}}>AC</div>
            <div>
              <div className="text-[14px] font-semibold text-fg">Alex Crypto</div>
              <div className="text-[12px] text-fg-dim">Founder, StakeWorldwide</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// SECTION 8 — Final Telegram CTA
function PCFinalCTA() {
  return (
    <section className="relative py-24" style={{background:"radial-gradient(ellipse at 50% 50%, rgba(38,165,228,0.10), transparent 60%), linear-gradient(180deg,#0E1016,#0A0B0F)"}}>
      <div className="max-w-[1100px] mx-auto px-5 lg:px-8">
        <div className="grid lg:grid-cols-[1.05fr_1fr] gap-12 items-center">
          <div>
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-tg/30 bg-tg/10 text-tg text-[12px] font-mono mb-6">
              <span className="live-dot"/> ONLINE NOW
            </div>
            <h2 className="font-display text-3xl md:text-[44px] font-semibold tracking-tight leading-[1.1]">
              Need help with codes, access, or setup?
            </h2>
            <p className="mt-5 text-[16px] text-fg-muted leading-relaxed max-w-[520px]">
              Our team is online right now. Whatever your question, we've got you covered.
            </p>
            <a href={TG} target="_blank" rel="noopener" className="mt-8 inline-flex items-center gap-2.5 px-6 py-4 rounded-xl text-white font-semibold text-[15px] hover:scale-[1.02] transition-transform"
               style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)",boxShadow:"0 14px 50px -10px rgba(38,165,228,0.7)"}}>
              <Icon.Telegram className="w-5 h-5"/> Chat With Us on Telegram <Icon.ArrowRight className="w-4 h-4"/>
            </a>
          </div>

          {/* Chat mockup */}
          <div className="rounded-3xl border border-ink-600 bg-ink-900/90 overflow-hidden shadow-2xl">
            <div className="flex items-center gap-3 px-5 py-3.5 border-b border-ink-600 bg-ink-800/80">
              <div className="w-10 h-10 rounded-full grid place-items-center text-white" style={{background:"linear-gradient(135deg,#26A5E4,#1F8BC7)"}}>
                <Icon.Telegram className="w-5 h-5"/>
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[14px] font-semibold text-fg">StakeWorldwide Support</div>
                <div className="flex items-center gap-1.5 text-[11.5px] text-fg-dim"><span className="w-1.5 h-1.5 rounded-full bg-teal"/> online · replies in 5 min</div>
              </div>
            </div>
            <div className="p-5 space-y-3" style={{background:"repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 8px, transparent 8px, transparent 16px)"}}>
              <div className="flex justify-end"><div className="bubble-out text-white text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[80%] leading-relaxed">Hey, I found a code online but I'm not sure if it's legit</div></div>
              <div className="flex justify-start"><div className="bubble-in text-fg text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[82%] leading-relaxed">Send it over and I'll verify it for you right now. We track all official Stake promotions daily.</div></div>
              <div className="flex justify-end"><div className="bubble-out text-white text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[80%] leading-relaxed">Also I'm in the UK, can I even use it?</div></div>
              <div className="flex justify-start"><div className="bubble-in text-fg text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[82%] leading-relaxed">Let's get you set up first, then we'll make sure you get the best available code. Takes about 15 minutes.</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// SECTION 9 — FAQ accordion
function PCFAQ() {
  const Q = [
    { q:"What is the best Stake.com bonus code right now?", a:"Stake offers a 200% deposit match welcome bonus through various affiliate codes. The bonus amount is the same regardless of which code you use — the maximum is typically $2,000–$3,000 depending on your region. What matters more than the specific code is understanding the wagering requirements attached. If you want a code verified before using it, our team can confirm it for you on Telegram." },
    { q:"Are Stake bonus drop codes free money?", a:"Not exactly. Drop codes give you bonus funds, but those funds come with wagering requirements. You must play through the bonus amount a specified number of times before you can withdraw. Think of them as extended playtime, not free cash." },
    { q:"Why doesn't my Stake bonus code work?", a:"Common reasons: the code has reached its claim limit (most drop codes are limited to 25–200 claims), you haven't wagered enough in the past 7 days to qualify, the code has expired, you're entering it in the wrong field, or the code is simply fake. Our team can help verify any code via Telegram." },
    { q:"Can I use multiple bonus codes on Stake?", a:"You can only use one welcome/registration code when creating your account. However, you can redeem multiple bonus drop codes over time — one at a time — as long as you meet the eligibility requirements for each." },
    { q:"Do I need a VPN to use Stake bonus codes?", a:"The codes themselves work regardless of your location, but you need to be able to access Stake.com first. If you're in a restricted country, you'll need a VPN to reach the platform. Check our VPN guide for recommendations, or contact our team for help with the setup." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="relative py-20 md:py-24 border-t border-ink-600/50">
      <div className="max-w-[860px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-12">
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-3">FAQ</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-tight">Common questions, honest answers.</h2>
        </div>
        <div className="space-y-3">
          {Q.map((item,i)=>{
            const isOpen = open===i;
            return (
              <div key={i} className={`rounded-xl border bg-ink-800/60 transition ${isOpen?"border-teal/40":"border-ink-600 hover:border-ink-500"}`}>
                <button onClick={()=>setOpen(isOpen?-1:i)} className="w-full flex items-start justify-between gap-4 text-left p-5">
                  <span className="font-display text-[16px] font-semibold text-fg">{item.q}</span>
                  <span className={`shrink-0 w-7 h-7 rounded-full grid place-items-center border transition ${isOpen?"border-teal text-teal rotate-45":"border-ink-500 text-fg-muted"}`}>
                    <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
                  </span>
                </button>
                {isOpen && (
                  <div className="px-5 pb-5 text-[14px] text-fg-muted leading-relaxed">{item.a}</div>
                )}
              </div>
            );
          })}
        </div>
        <div className="mt-10 text-center">
          <a href={TG} target="_blank" rel="noopener" className="inline-flex items-center gap-2 text-tg hover:text-fg transition text-[14px]">
            <Icon.Telegram className="w-4 h-4"/> Still have questions? Ask on Telegram <Icon.ArrowRight className="w-3.5 h-3.5"/>
          </a>
        </div>
      </div>
    </section>
  );
}

function PCApp() {
  useEffect(()=>{
    const els = document.querySelectorAll(".reveal");
    const obs = new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting) e.target.classList.add("visible");}),{threshold:0.1});
    els.forEach(el=>obs.observe(el));
    return ()=>obs.disconnect();
  },[]);
  return (
    <>
      <Navbar/>
      <main className="pt-0">
        <PCHero/>
        <PCFlow/>
        <PCTypes/>
        <PCRedFlags/>
        <PCSources/>
        <PCCalc/>
        <PCRestricted/>
        <PCQuote/>
        <PCFinalCTA/>
        <PCFAQ/>
      </main>
      <Footer/>
      <FloatingTelegram/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PCApp/>);