// Newsletter + Footer
function Newsletter() {
  const DISCORD = (window.SW_DATA && window.SW_DATA.DISCORD_LINK) || "https://discord.gg/stakeworldwide";
  return (
    <section className="relative py-20 md:py-24">
      <div className="max-w-[880px] mx-auto px-5 lg:px-8">
        <div className="relative rounded-3xl border border-[#5865F2]/30 p-8 md:p-12 text-center overflow-hidden"
             style={{background:"radial-gradient(ellipse at 20% 0%, rgba(88,101,242,.14), transparent 60%), linear-gradient(180deg,#11131A,#0C0E15)"}}>
          <div className="absolute -top-24 left-1/2 -translate-x-1/2 w-[560px] h-[340px] rounded-full pointer-events-none"
               style={{ background: "radial-gradient(ellipse at center, rgba(88,101,242,0.18), transparent 70%)" }} />

          <div className="relative">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[#5865F2]/40 bg-[#5865F2]/10 text-[11.5px] text-[#A5B4FC] font-mono uppercase tracking-widest mb-5">
              <span className="live-dot" style={{background:"#5865F2"}}/> Discord · 3,200+ online
            </div>
            <h2 className="font-display text-[30px] md:text-[42px] font-semibold tracking-tight leading-tight max-w-[640px] mx-auto">
              Join our <span style={{color:"#A5B4FC"}}>Discord</span> community.
            </h2>
            <p className="mt-5 text-[15.5px] text-fg-muted max-w-[540px] mx-auto leading-relaxed">
              Real-time strategy chat, country-specific channels, leaked bonus codes, and a direct line to our research team. Free, no spam.
            </p>

            <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center items-center">
              <a href={DISCORD} target="_blank" rel="noopener"
                 className="group inline-flex items-center gap-3 px-6 py-4 rounded-xl font-semibold text-white text-[15px] transition"
                 style={{background:"linear-gradient(135deg,#5865F2,#4752C4)",boxShadow:"0 14px 40px -12px rgba(88,101,242,.6)"}}>
                <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1569 2.4189Z"/></svg>
                Join the Discord
                <Icon.ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5"/>
              </a>
              <div className="text-[12.5px] text-fg-dim">Free forever · No KYC required</div>
            </div>

            <div className="mt-10 grid grid-cols-3 gap-4 max-w-[520px] mx-auto">
              {[
                {n:"3.2k+", l:"Active members"},
                {n:"24/7",  l:"Live channels"},
                {n:"5 min", l:"Avg. reply"},
              ].map(s => (
                <div key={s.l} className="rounded-xl border border-ink-600 bg-ink-900/60 p-3">
                  <div className="font-display text-[20px] font-semibold" style={{color:"#A5B4FC"}}>{s.n}</div>
                  <div className="text-[11px] text-fg-dim uppercase tracking-wider mt-1">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
const FOOTER_COLS = [
  { title: "Guides", links: [
    { label: "Verification", slug: "/guides/verification" },
    { label: "Deposits", slug: "/guides/deposits" },
    { label: "Withdrawals", slug: "/guides/withdrawals" },
    { label: "VIP & Rakeback", slug: "/guides/rakeback" },
    { label: "Bonuses", slug: "/guides/bonuses" },
    { label: "Responsible Play", slug: "/guides/responsible-play" },
  ]},
  { title: "Countries", links: [
    { label: "United States", slug: "/countries/united-states" },
    { label: "United Kingdom", slug: "/countries/united-kingdom" },
    { label: "Canada", slug: "/countries/canada" },
    { label: "Australia", slug: "/countries/australia" },
    { label: "Germany", slug: "/countries/germany" },
    { label: "All 180+ →", slug: "/countries" },
  ]},
  { title: "Resources", links: [
    { label: "Blog", slug: "/blog" },
    { label: "VPN Reviews", slug: "/vpn" },
    { label: "Glossary", slug: "/glossary" },
    { label: "FAQ", slug: "/faq" },
    { label: "Discord", href: (window.SW_DATA && window.SW_DATA.DISCORD_LINK) || "https://discord.gg/stakeworldwide", external: true },
    { label: "Telegram Support", href: (window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet", external: true },
  ]},
  { title: "Legal", links: [
    { label: "About", slug: "/about" },
    { label: "Disclaimer", slug: "/disclaimer" },
    { label: "Editorial Policy", slug: "/editorial-policy" },
    { label: "Privacy Policy", slug: "/privacy-policy" },
    { label: "Terms", slug: "/terms" },
    { label: "Contact", slug: "/contact" },
  ]},
];

function Footer() {
  return (
    <footer className="relative border-t border-ink-600/70 pt-16 pb-10 mt-10">
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8">
        <div className="grid lg:grid-cols-[1.4fr_repeat(4,1fr)] gap-10 pb-12 border-b border-ink-600/60">
          <div>
            <div className="flex items-center gap-2.5 mb-4">
              <Icon.Logo className="w-7 h-7" />
              <span className="font-display font-semibold text-[17px]">
                Stake<span className="text-teal">Worldwide</span>
              </span>
            </div>
            <p className="text-[13.5px] text-fg-muted leading-relaxed max-w-[320px]">
              An independent knowledge hub for Stake.com — guides, country analyses, and honest strategy research.
            </p>
            <div className="mt-5 flex items-center gap-2">
              <a href="#" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-fg hover:border-teal/40 transition"><Icon.X /></a>
              <a href={SW_DATA.TG_LINK} target="_blank" rel="noopener" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-tg hover:border-tg/40 transition"><Icon.Telegram className="w-4 h-4" /></a>
              <a href="#" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-fg hover:border-teal/40 transition"><Icon.LinkedIn /></a>
              <a href="#" className="w-9 h-9 grid place-items-center rounded-lg border border-ink-600 text-fg-muted hover:text-fg hover:border-teal/40 transition"><Icon.Mail /></a>
            </div>
          </div>

          {FOOTER_COLS.map(col => (
            <div key={col.title}>
              <div className="text-[11px] uppercase tracking-[0.18em] text-fg-dim font-mono mb-4">{col.title}</div>
              <ul className="space-y-2.5">
                {col.links.map(l => (
                  <li key={l.label}>
                    <a href={l.external ? l.href : swResolve(l.slug)} target={l.external ? "_blank" : undefined} rel={l.external ? "noopener" : undefined} className="text-[13.5px] text-fg-muted hover:text-teal transition">{l.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Responsible gambling badges */}
        <div className="py-8 flex flex-wrap items-center justify-center gap-3">
          {[
            { label: "18+ Only",      sub: "Adults" },
            { label: "BeGambleAware", sub: "Partner" },
            { label: "GamCare",       sub: "Certified" },
            { label: "GamStop",       sub: "Listed" },
          ].map(b => (
            <div key={b.label} className="flex items-center gap-3 px-4 py-2.5 rounded-lg border border-ink-600 bg-ink-800/50">
              <div className="w-8 h-8 rounded-full border border-teal/40 text-teal grid place-items-center font-mono text-[10px] font-semibold">
                {b.label.slice(0, 2).toUpperCase()}
              </div>
              <div>
                <div className="text-[12px] font-semibold text-fg">{b.label}</div>
                <div className="text-[10px] text-fg-dim uppercase tracking-wider">{b.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Disclaimer */}
        <div className="pt-6 border-t border-ink-600/60 text-[12px] text-fg-dim leading-relaxed max-w-[980px] mx-auto text-center">
          <p>
            <strong className="text-fg-muted">Disclaimer:</strong> StakeWorldwide is an independent informational resource. We are <strong className="text-fg-muted">not affiliated</strong> with Stake.com.
            Gambling involves financial risk and may be addictive. Please gamble responsibly. 18+ only. If you or someone you know has a gambling problem, call the relevant national helpline.
          </p>
          <p className="mt-5 text-fg-dim/80">© 2026 StakeWorldwide. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

window.Newsletter = Newsletter;
window.Footer = Footer;