// Shared Navbar for subpages. Host page must set window.SW_PATH_PREFIX ("../" for /pages).
function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const TG = (window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet";
  const P = window.SW_PATH_PREFIX || "";
  const resolve = (slug) => {
    if (!window.SW_ROUTES) return "/";
    const target = window.SW_ROUTES[slug] || ("coming-soon.html?path=" + encodeURIComponent(slug));
    return P + target;
  };

  const LINKS = [
    { label: "Guides", slug: "/guides" },
    { label: "Countries", slug: "/countries" },
    { label: "VPN Reviews", slug: "/vpn" },
    { label: "About", slug: "/about" },
  ];

  return (
    <header className={`fixed top-0 inset-x-0 z-40 transition-all duration-300 ${scrolled ? "bg-ink-950/80 backdrop-blur-xl border-b border-ink-600/60" : "bg-transparent border-b border-transparent"}`}>
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8 h-16 flex items-center gap-6">
        <a href="/" className="flex items-center gap-2.5 shrink-0">
          <Icon.Logo className="w-7 h-7" />
          <span className="font-display font-semibold text-[17px] tracking-tight">
            Stake<span className="text-teal">Worldwide</span>
          </span>
        </a>
        <nav className="hidden lg:flex items-center gap-1 mx-auto">
          {LINKS.map(l => (
            <a key={l.label} href={resolve(l.slug)} className="px-3.5 py-2 rounded-lg text-[14px] text-fg-muted hover:text-fg hover:bg-white/5 transition">{l.label}</a>
          ))}
        </nav>
        <div className="hidden lg:flex items-center gap-3 ml-auto">
          <a href={TG} target="_blank" rel="noopener"
             className="group flex items-center gap-2 pl-3 pr-3.5 py-2 rounded-full border border-teal/40 text-teal hover:bg-teal hover:text-ink-950 transition-all text-[13.5px] font-medium">
            <Icon.Telegram className="w-4 h-4" /><span>Get Help</span>
          </a>
        </div>
        <button className="lg:hidden ml-auto p-2 text-fg" onClick={() => setMobileOpen(v => !v)}>
          <Icon.Menu />
        </button>
      </div>
      {mobileOpen && (
        <div className="lg:hidden border-t border-ink-600 bg-ink-950/95 backdrop-blur-xl">
          <div className="px-5 py-4 flex flex-col gap-1">
            <a href="/" className="px-3 py-2.5 rounded-lg text-fg-muted hover:text-fg hover:bg-white/5">Home</a>
            {LINKS.map(l => (
              <a key={l.label} href={resolve(l.slug)} className="px-3 py-2.5 rounded-lg text-fg-muted hover:text-fg hover:bg-white/5">{l.label}</a>
            ))}
            <a href={TG} target="_blank" rel="noopener" className="mt-2 flex items-center justify-center gap-2 py-3 rounded-lg border border-teal/40 text-teal">
              <Icon.Telegram className="w-4 h-4" /> Get Help on Telegram
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

function FloatingTelegram() {
  const TG = (window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet";
  return (
    <a href={TG} target="_blank" rel="noopener"
       className="fab fixed bottom-5 right-5 md:bottom-7 md:right-7 z-50 flex items-center rounded-full tg-pulse"
       style={{ background: "linear-gradient(135deg, #2AB0F1, #1F8BC7)" }}>
      <span className="w-14 h-14 md:w-[58px] md:h-[58px] grid place-items-center text-white">
        <Icon.Telegram className="w-6 h-6" />
      </span>
      <span className="fab-label text-white font-medium text-[14px] pr-1.5 hidden md:inline-block">Chat with an Expert</span>
    </a>
  );
}

window.Navbar = Navbar;
window.FloatingTelegram = FloatingTelegram;