// Custom landing-style article: "Buying Verified Stake Accounts"
// Mounts inside <div id="root"></div> on buy-verified-stake-account-risks.html

const TG = (window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet";

// ---------- shared atoms ----------
function TGButton({ children, size = "md", variant = "solid", className = "" }) {
  const sizes = {
    sm: "px-4 py-2.5 text-[13px]",
    md: "px-5 py-3.5 text-[14.5px]",
    lg: "px-6 py-4 text-[15.5px]",
  };
  const solid = {
    background: "linear-gradient(135deg, #2AB0F1, #1F8BC7)",
    boxShadow: "0 10px 40px -10px rgba(38,165,228,0.6)",
  };
  return (
    <a
      href={TG} target="_blank" rel="noopener"
      className={`group inline-flex items-center justify-center gap-2.5 rounded-xl font-semibold text-white transition-all hover:brightness-110 ${sizes[size]} ${className}`}
      style={variant === "solid" ? solid : undefined}
    >
      <Icon.Telegram className="w-5 h-5" />
      <span>{children}</span>
      <Icon.ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
    </a>
  );
}

function InlineTGCallout({ title, body, cta = "Message us on Telegram" }) {
  return (
    <div className="my-10 grad-border rounded-2xl overflow-hidden"
         style={{ background: "radial-gradient(ellipse at 20% 0%, rgba(38,165,228,0.10), transparent 60%), linear-gradient(180deg, #0F1722, #0B0F17)" }}>
      <div className="p-6 md:p-7 flex flex-col md:flex-row md:items-center gap-5">
        <div className="w-12 h-12 shrink-0 rounded-xl grid place-items-center text-white"
             style={{ background: "linear-gradient(135deg, #2AB0F1, #1F8BC7)" }}>
          <Icon.Telegram className="w-6 h-6" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-display text-[19px] md:text-[20px] font-semibold text-fg leading-snug">{title}</div>
          <p className="mt-1.5 text-[14px] text-fg-muted leading-relaxed">{body}</p>
        </div>
        <TGButton size="sm" className="shrink-0">{cta}</TGButton>
      </div>
    </div>
  );
}

// ---------- HERO ----------
function Hero() {
  return (
    <section className="relative pt-28 md:pt-36 pb-16 md:pb-20 overflow-hidden">
      {/* warning-triangle pattern */}
      <div className="absolute inset-0 pointer-events-none opacity-[0.06]"
           style={{
             backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M40 18 L62 56 H18 Z' fill='none' stroke='%23F59E0B' stroke-width='1.4'/></svg>")`,
             backgroundSize: "120px 120px",
           }} />
      <div className="absolute inset-0 pointer-events-none"
           style={{ background: "radial-gradient(ellipse 70% 50% at 50% 0%, rgba(239,68,68,0.10), transparent 60%)" }} />

      <div className="relative max-w-[1040px] mx-auto px-5 lg:px-8 text-center">
        <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-[#EF4444]/40 bg-[#EF4444]/10 text-[#FCA5A5] text-[12px] font-semibold tracking-[0.12em] uppercase mb-7">
          <Icon.Warning className="w-3.5 h-3.5" /> Buyer Beware
        </div>

        <h1 className="font-display text-4xl md:text-6xl font-semibold tracking-tight leading-[1.05]">
          Buying Verified Stake Accounts:
          <br className="hidden md:block" />
          <span className="grad-text-warn"> What Nobody Tells You.</span>
        </h1>

        <p className="mt-6 md:mt-7 text-[17px] md:text-[19px] text-fg-muted leading-relaxed max-w-[720px] mx-auto">
          Before you spend a single dollar, read this. It could save you hundreds — or thousands.
        </p>

        <div className="mt-9 inline-flex items-center gap-2.5 px-4 py-2 rounded-full border border-ink-600 bg-ink-900/70 text-[13px] text-fg-muted">
          <span className="font-mono text-fg font-semibold">200+</span> reported scam cases analysed · updated April 2026
        </div>

        <div className="mt-7 flex items-center justify-center gap-2 text-[13px] text-fg-dim">
          <Icon.Clock className="w-3.5 h-3.5" /> 8 min read
          <span className="mx-1">·</span>
          By Alex Crypto, Founder
        </div>
      </div>
    </section>
  );
}

// ---------- Section 1: 5 Scams ----------
const SCAMS = [
  {
    id: 1, key: "↻", title: "The Recovery Scam",
    body: "The seller hands you a real account, waits until you've deposited, and then contacts Stake support to recover it. Double dip: your payment + your balance.",
    risk: "CRITICAL",
  },
  {
    id: 2, key: "👻", title: "The Vanishing Seller",
    body: "You pay in crypto (irreversible), receive credentials that work for two hours, and the seller is gone forever. No refunds, no support, no trace.",
    risk: "HIGH",
  },
  {
    id: 3, key: "📄", title: "The Fake Verification",
    body: "The account looks verified, but the seller used stolen or fabricated documents. Stake catches it, bans the account in days — and your money disappears with it.",
    risk: "CRITICAL",
  },
  {
    id: 4, key: "🎣", title: "The Phishing Trap",
    body: "They send you a link to a \"Stake control panel\". It isn't Stake — it's a clone. They capture your details and drain any wallet you connect.",
    risk: "HIGH",
  },
  {
    id: 5, key: "💀", title: "The Malware Play",
    body: "They insist you install \"their recommended VPN\" or a \"special access plugin\". It's malware. Keyloggers harvest your seed phrases and exchange logins.",
    risk: "CRITICAL",
  },
];

function ScamCard({ s, idx }) {
  return (
    <div className="reveal group relative rounded-2xl border border-ink-600 bg-ink-800/60 p-6 md:p-7 hover:border-[#EF4444]/40 transition"
         style={{ transitionDelay: `${idx * 60}ms` }}>
      <div className="flex items-start gap-5 md:gap-6">
        <div className="shrink-0 w-14 h-14 md:w-16 md:h-16 rounded-2xl grid place-items-center text-3xl md:text-[34px]"
             style={{ background: "rgba(239,68,68,0.10)", border: "1px solid rgba(239,68,68,0.25)" }}>
          <span style={{ filter: "saturate(.85)" }}>{s.key}</span>
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex flex-wrap items-center gap-2.5 mb-2">
            <span className="font-mono text-[11px] tracking-[0.16em] text-fg-dim">SCAM #{String(s.id).padStart(2,"0")}</span>
            <span className={`text-[10px] font-bold tracking-[0.12em] uppercase px-2 py-1 rounded border ${
              s.risk === "CRITICAL"
                ? "text-[#FCA5A5] border-[#EF4444]/40 bg-[#EF4444]/10"
                : "text-[#FBBF24] border-[#F59E0B]/40 bg-[#F59E0B]/10"
            }`}>
              Risk: {s.risk}
            </span>
          </div>
          <h3 className="font-display text-[22px] md:text-[24px] font-semibold leading-tight text-fg">{s.title}</h3>
          <p className="mt-2.5 text-[15px] text-fg-muted leading-relaxed">{s.body}</p>
        </div>
      </div>
    </div>
  );
}

function ScamSection() {
  return (
    <section className="relative py-16 md:py-20">
      <div className="max-w-[920px] 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">The Reality</div>
          <h2 className="font-display text-3xl md:text-[44px] font-semibold tracking-tight leading-[1.08]">
            The 5 Ways You'll Get Scammed
          </h2>
          <p className="mt-5 text-[16px] text-fg-muted leading-relaxed max-w-[620px] mx-auto">
            We've documented every variant in the wild. If you buy an account, one of these is coming for you.
          </p>
        </div>

        <div className="space-y-4 md:space-y-5">
          {SCAMS.map((s, i) => <ScamCard key={s.id} s={s} idx={i} />)}
        </div>

        <InlineTGCallout
          title="Already approached by a seller?"
          body="Send us the message. We'll tell you in under 5 minutes whether it matches a known scam pattern — for free."
          cta="Send it to us"
        />
      </div>
    </section>
  );
}

// ---------- Section 2: Timeline ----------
const TIMELINE = [
  { icon: "🔍", title: "Detection", body: "Stake's anti-fraud detects a device change, an IP shift, or behavioural patterns inconsistent with the original owner." },
  { icon: "⏸️", title: "Account Freeze", body: "Your account is locked. Withdrawals halted. Bets disabled. You can log in — but you can't move." },
  { icon: "📋", title: "Identity Request", body: "Stake demands fresh KYC: a selfie matching the verified ID. You can't produce documents that aren't yours." },
  { icon: "❌", title: "Permanent Ban + Fund Seizure", body: "Lifetime ban. Entire balance — deposits and winnings — confiscated. No appeal. No recourse." },
];

function TimelineSection() {
  return (
    <section className="relative py-16 md:py-20 border-t border-ink-600/40 bg-gradient-to-b from-transparent to-ink-900/40">
      <div className="max-w-[860px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-14">
          <div className="text-[11px] uppercase tracking-[0.18em] text-[#FCA5A5] font-mono mb-3">When Stake Catches You</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-[1.1]">
            What Happens, Step by Step
          </h2>
        </div>

        <div className="relative">
          <div className="absolute left-[27px] md:left-[31px] top-2 bottom-2 w-px bg-gradient-to-b from-[#EF4444]/50 via-[#F59E0B]/40 to-[#EF4444]/50" />
          <div className="space-y-6">
            {TIMELINE.map((t, i) => (
              <div key={i} className="reveal flex items-start gap-5 md:gap-6" style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="relative shrink-0 w-14 h-14 md:w-16 md:h-16 rounded-2xl grid place-items-center text-2xl"
                     style={{ background: "linear-gradient(180deg, #1A1014, #0E0F15)", border: "1px solid rgba(239,68,68,0.3)", boxShadow: "0 8px 30px -8px rgba(239,68,68,0.25)" }}>
                  {t.icon}
                </div>
                <div className="flex-1 pt-1.5">
                  <div className="font-mono text-[11px] tracking-[0.16em] text-fg-dim mb-1">STEP {String(i + 1).padStart(2,"0")}</div>
                  <h3 className="font-display text-[22px] font-semibold text-fg">{t.title}</h3>
                  <p className="mt-1.5 text-[15px] text-fg-muted leading-relaxed">{t.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-10 rounded-2xl p-5 md:p-6 flex items-start gap-4"
             style={{ background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.30)" }}>
          <div className="w-10 h-10 shrink-0 rounded-lg grid place-items-center text-[#FCA5A5]"
               style={{ background: "rgba(239,68,68,0.15)" }}>
            <Icon.Warning className="w-5 h-5" />
          </div>
          <p className="text-[15px] text-fg leading-relaxed">
            This can happen at <strong className="text-[#FCA5A5]">any time</strong> — 1 day, 1 week, or 6 months after purchase.
            <span className="block mt-1 text-fg-muted">There is no safe period.</span>
          </p>
        </div>

        <div className="mt-10 text-center">
          <p className="text-[15px] text-fg-muted mb-5">Want to know if your country has a safer route? We'll tell you straight.</p>
          <TGButton size="md">Ask us about your country</TGButton>
        </div>
      </div>
    </section>
  );
}

// ---------- Section 3: Comparison ----------
const COMPARE = {
  bad: [
    "Cost: $15–$200 per account — many buyers repeat after bans.",
    "Risk: account recovery, scams, instant fund seizure.",
    "Control: zero. The seller can recover the account anytime.",
    "Funds: confiscated without warning, no appeal.",
    "Support: nobody to call when it goes wrong.",
    "Long-term: constant anxiety, repeat purchases, stress.",
  ],
  good: [
    "Cost: one-time setup — you own it forever.",
    "Risk: minimal with the right tools and configuration.",
    "Control: full. Your account, your identity, your funds.",
    "Funds: under your direct custody at all times.",
    "Support: expert help available 24/7 on Telegram.",
    "Long-term: set it once, play in peace for years.",
  ],
};

function CompareCol({ side, title, items }) {
  const isBad = side === "bad";
  return (
    <div className="rounded-2xl p-7 md:p-8 h-full"
         style={{
           background: isBad ? "linear-gradient(180deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04))" : "linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.04))",
           border: isBad ? "1px solid rgba(239,68,68,0.40)" : "1px solid rgba(16,185,129,0.40)",
         }}>
      <div className="flex items-center gap-3 mb-6">
        <div className={`w-11 h-11 rounded-xl grid place-items-center ${isBad ? "text-[#FCA5A5]" : "text-teal"}`}
             style={{ background: isBad ? "rgba(239,68,68,0.15)" : "rgba(16,185,129,0.15)" }}>
          {isBad ? <Icon.Block className="w-5 h-5" /> : <Icon.ShieldCheck className="w-5 h-5" />}
        </div>
        <div>
          <div className="font-mono text-[11px] tracking-[0.14em] text-fg-dim uppercase">
            {isBad ? "The Wrong Way" : "The Smart Way"}
          </div>
          <h3 className="font-display text-[22px] md:text-[24px] font-semibold leading-tight">{title}</h3>
        </div>
      </div>
      <ul className="space-y-3.5">
        {items.map((it, i) => (
          <li key={i} className="flex items-start gap-3 text-[14.5px] leading-relaxed">
            <span className={`shrink-0 mt-1 w-4 h-4 rounded-full grid place-items-center text-[11px] font-bold ${
              isBad ? "bg-[#EF4444]/20 text-[#FCA5A5]" : "bg-teal/20 text-teal"
            }`}>{isBad ? "✕" : "✓"}</span>
            <span className="text-fg">{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function CompareSection() {
  return (
    <section className="relative py-16 md:py-20">
      <div className="max-w-[1100px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-12">
          <div className="text-[11px] uppercase tracking-[0.18em] text-fg-muted font-mono mb-3">The Real Cost</div>
          <h2 className="font-display text-3xl md:text-[44px] font-semibold tracking-tight leading-[1.08]">
            Buying vs. Doing It Right.
          </h2>
        </div>

        <div className="grid md:grid-cols-2 gap-5 md:gap-6">
          <CompareCol side="bad" title="Buying an Account" items={COMPARE.bad} />
          <CompareCol side="good" title="Setting Up Your Own Access" items={COMPARE.good} />
        </div>

        <div className="mt-10 text-center">
          <p className="text-[15px] text-fg-muted mb-5">
            Not sure which option fits your situation? <span className="text-fg">We'll walk you through it.</span>
          </p>
          <TGButton size="md">Get personal advice on Telegram</TGButton>
        </div>
      </div>
    </section>
  );
}

// ---------- Section 4: Smart Path ----------
const PATH = [
  {
    n: "01", color: "teal", icon: "Book", title: "Learn",
    body: "Understand Stake's verification system, your country's status, and what tools you actually need. Our guides cover 180+ countries.",
    cta: "Read country guides", href: "/countries", external: false,
  },
  {
    n: "02", color: "teal", icon: "ShieldCheck", title: "Set Up",
    body: "Get the right VPN, configure your access, and create your account properly. 15–20 minutes with the right guidance.",
    cta: "See VPN rankings", href: "/vpn/best-for-stake", external: false,
  },
  {
    n: "03", color: "tg", icon: "Telegram", title: "Get Help",
    body: "Stuck somewhere? Not sure which option fits your country? Our team has helped thousands of players get set up safely.",
    cta: "Talk to an expert on Telegram", href: TG, external: true, highlight: true,
  },
];

function PathCard({ p }) {
  const IconComp = Icon[p.icon] || Icon.Book;
  const tealCard = p.color === "teal";
  const link = p.external ? p.href : (window.swResolve ? window.swResolve(p.href) : p.href);
  return (
    <div
      className={`relative rounded-2xl p-7 md:p-8 h-full transition ${p.highlight ? "ring-1 ring-tg/50" : "border border-ink-600"}`}
      style={{
        background: p.highlight
          ? "linear-gradient(180deg, rgba(38,165,228,0.10), rgba(38,165,228,0.03))"
          : "linear-gradient(180deg, #11141C, #0C0E14)",
        boxShadow: p.highlight ? "0 18px 60px -18px rgba(38,165,228,0.45)" : undefined,
      }}
    >
      <div className="flex items-center justify-between mb-5">
        <div className={`w-12 h-12 rounded-xl grid place-items-center ${tealCard ? "text-teal" : "text-tg"}`}
             style={{ background: tealCard ? "rgba(16,185,129,0.12)" : "rgba(38,165,228,0.12)", border: tealCard ? "1px solid rgba(16,185,129,0.25)" : "1px solid rgba(38,165,228,0.30)" }}>
          <IconComp className="w-5 h-5" />
        </div>
        <span className="font-mono text-[11px] tracking-[0.16em] text-fg-dim">{p.n}</span>
      </div>
      <h3 className="font-display text-[22px] font-semibold text-fg">{p.title}</h3>
      <p className="mt-2.5 text-[14.5px] text-fg-muted leading-relaxed min-h-[100px]">{p.body}</p>
      <a
        href={link}
        target={p.external ? "_blank" : undefined}
        rel={p.external ? "noopener" : undefined}
        className={`mt-5 inline-flex items-center gap-2 text-[14px] font-medium ${tealCard ? "text-teal hover:text-teal/80" : "text-tg hover:text-tg/80"}`}
      >
        {p.cta} <Icon.ArrowRight className="w-3.5 h-3.5" />
      </a>
    </div>
  );
}

function SmartPath() {
  return (
    <section className="relative py-16 md:py-20 border-t border-ink-600/40">
      <div className="max-w-[1240px] 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">The Right Way</div>
          <h2 className="font-display text-3xl md:text-[44px] font-semibold tracking-tight leading-[1.08]">
            How Smart Players Access Stake
          </h2>
          <p className="mt-5 text-[16px] text-fg-muted leading-relaxed">
            Thousands of players access Stake safely every day. Here's how.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-5">
          {PATH.map(p => <PathCard key={p.n} p={p} />)}
        </div>
      </div>
    </section>
  );
}

// ---------- Section 5: Real talk quote ----------
function RealTalk() {
  return (
    <section className="relative py-16 md:py-20"
             style={{ background: "radial-gradient(ellipse 60% 80% at 50% 20%, rgba(16,185,129,0.06), transparent 60%)" }}>
      <div className="max-w-[920px] mx-auto px-5 lg:px-8">
        <div className="relative rounded-3xl border border-ink-600 bg-ink-800/40 p-8 md:p-12">
          <div className="absolute -top-4 left-8 md:left-12 font-display text-[120px] md:text-[160px] leading-none text-teal/20 select-none pointer-events-none">"</div>
          <div className="text-[11px] uppercase tracking-[0.18em] text-teal font-mono mb-5">Real talk</div>
          <p className="font-display text-[22px] md:text-[28px] leading-[1.35] text-fg italic">
            We've seen players lose <span className="text-[#FCA5A5] not-italic font-semibold">$500</span>, <span className="text-[#FCA5A5] not-italic font-semibold">$1,000</span>, even <span className="text-[#FCA5A5] not-italic font-semibold">$5,000</span> to account sellers. Every single one of them said the same thing: <span className="text-fg-muted">"I just wanted a quick shortcut."</span>
            The 20 minutes it takes to set up properly could save you thousands.
          </p>

          <div className="mt-8 flex items-center gap-4">
            <div className="w-12 h-12 rounded-full grid place-items-center font-display font-semibold text-ink-950"
                 style={{ background: "linear-gradient(135deg, #10B981, #26A5E4)" }}>AC</div>
            <div>
              <div className="font-display text-[16px] font-semibold text-fg">Alex Crypto</div>
              <div className="text-[13px] text-fg-muted">Founder of StakeWorldwide</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Section 6: Final CTA ----------
function FinalCTA() {
  return (
    <section className="relative py-20 md:py-24 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none"
           style={{ background: "radial-gradient(ellipse 70% 60% at 50% 50%, rgba(38,165,228,0.18), transparent 60%), linear-gradient(180deg, #07101A 0%, #050709 100%)" }} />
      <div className="relative max-w-[1100px] mx-auto px-5 lg:px-8">
        <div className="text-center max-w-[640px] mx-auto mb-12">
          <div className="text-[11px] uppercase tracking-[0.18em] text-tg font-mono mb-3">Talk to a real person</div>
          <h2 className="font-display text-3xl md:text-[48px] font-semibold tracking-tight leading-[1.05]">
            Ready to Do It the Right Way?
          </h2>
          <p className="mt-5 text-[17px] text-fg-muted leading-relaxed">
            Our team is online right now. Average response time: under 5 minutes.
          </p>
        </div>

        <div className="grid lg:grid-cols-[1.1fr_1fr] gap-10 items-center">
          {/* 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 · 3 experts available
                </div>
              </div>
            </div>
            <div className="p-5 space-y-3 min-h-[280px]"
                 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'm in the US and want to access Stake. Can you help?
                </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">
                  Absolutely 👋 I'll walk you through everything. Takes about 15 minutes.
                </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 start — which device are you on, phone or laptop?
                </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">
                  Phone. iPhone 15.
                </div>
              </div>
              <div className="flex justify-start">
                <div className="bubble-in flex items-center gap-1.5 px-4 py-3 rounded-2xl">
                  <span className="w-1.5 h-1.5 rounded-full bg-fg-dim animate-pulse" />
                  <span className="w-1.5 h-1.5 rounded-full bg-fg-dim animate-pulse" style={{ animationDelay: ".2s" }} />
                  <span className="w-1.5 h-1.5 rounded-full bg-fg-dim animate-pulse" style={{ animationDelay: ".4s" }} />
                </div>
              </div>
            </div>
          </div>

          {/* CTA right */}
          <div>
            <ul className="space-y-3.5 mb-7">
              {[
                "Free, no obligation, no pitches",
                "Works for restricted countries (US, UK, AU, DE…)",
                "Real humans — not bots, not auto-replies",
                "We never ask for documents, passwords, or deposits",
              ].map(item => (
                <li key={item} className="flex items-start gap-3 text-[15px] text-fg leading-relaxed">
                  <span className="shrink-0 mt-0.5 w-5 h-5 rounded-full bg-teal/15 text-teal grid place-items-center"><Icon.Check className="w-3 h-3" /></span>
                  {item}
                </li>
              ))}
            </ul>

            <TGButton size="lg" className="w-full md:w-auto">Chat With Us on Telegram</TGButton>

            <div className="mt-4 flex items-center gap-2 text-[13px] text-fg-muted">
              <span className="live-dot" /> Online now · 3 experts available
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Section 7: FAQ ----------
const FAQS = [
  {
    q: "Is buying a verified Stake account safe?",
    a: "No. The original owner can recover the account at any time, and Stake can detect the transfer and seize all funds. Most sellers are scammers who will take your money and disappear, or recover the account after you deposit.",
  },
  {
    q: "How much do verified Stake accounts cost?",
    a: "Prices range from $15 to $200+, but the price is irrelevant — the risks of scams, account recovery, and fund seizure apply regardless of what you pay. Many buyers end up purchasing multiple accounts after repeated bans.",
  },
  {
    q: "Can Stake detect that I bought an account?",
    a: "Yes. Stake uses device fingerprinting, IP analysis, behavioural patterns, and identity verification checks to detect account transfers. Detection can happen immediately or months later — there is no safe window.",
  },
  {
    q: "What happens to my money if the account gets banned?",
    a: "All funds are seized. When Stake bans an account for terms-of-service violations, your entire balance — deposits and winnings — is confiscated. You have no legal recourse because the account was never verified under your identity.",
  },
  {
    q: "What's the safest way to access Stake from a restricted country?",
    a: "Use a reputable VPN to access Stake directly and go through the verification process yourself. This gives you full control of your account, your funds, and your security. Our team can guide you through the entire process via Telegram.",
  },
];

function FAQItem({ f, open, onToggle }) {
  return (
    <div className="rounded-xl border border-ink-600 bg-ink-800/50 overflow-hidden">
      <button onClick={onToggle}
              className="w-full text-left px-5 md:px-6 py-4 md:py-5 flex items-center gap-4 hover:bg-white/[0.02] transition">
        <span className="flex-1 font-display text-[16.5px] md:text-[17.5px] font-semibold text-fg leading-snug">{f.q}</span>
        <span className={`shrink-0 w-7 h-7 rounded-full border border-ink-500 grid place-items-center text-fg-muted transition-transform ${open ? "rotate-45" : ""}`}>
          <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </span>
      </button>
      <div className="overflow-hidden transition-all"
           style={{ maxHeight: open ? "400px" : "0", opacity: open ? 1 : 0 }}>
        <div className="px-5 md:px-6 pb-5 md:pb-6 text-[14.5px] text-fg-muted leading-relaxed">{f.a}</div>
      </div>
    </div>
  );
}

function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="relative py-16 md:py-20 border-t border-ink-600/40">
      <div className="max-w-[820px] mx-auto px-5 lg:px-8">
        <div className="text-center mb-10">
          <div className="text-[11px] uppercase tracking-[0.18em] text-fg-muted font-mono mb-3">FAQ</div>
          <h2 className="font-display text-3xl md:text-[40px] font-semibold tracking-tight leading-[1.1]">
            Common Questions
          </h2>
        </div>
        <div className="space-y-3">
          {FAQS.map((f, i) => (
            <FAQItem key={i} f={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>

        <div className="mt-10 text-center">
          <p className="text-[15px] text-fg-muted mb-5">Still have questions? We answer them personally.</p>
          <TGButton size="md">Ask us anything on Telegram</TGButton>
        </div>
      </div>
    </section>
  );
}

// ---------- Reveal observer ----------
function useRevealObserver() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach(el => el.classList.add("visible"));
      return;
    }
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("visible"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---------- Page ----------
function BuyAlertPage() {
  useRevealObserver();
  return (
    <div className="min-h-screen">
      <Navbar />
      <main>
        <Hero />
        <ScamSection />
        <TimelineSection />
        <CompareSection />
        <SmartPath />
        <RealTalk />
        <FinalCTA />
        <FAQSection />
      </main>
      <Footer />
      <FloatingTelegram />
    </div>
  );
}

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