// Sticky top navigation. Slims + blurs on scroll. Mobile hamburger menu + auth cluster.

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Anasayfa',  href: '#hero',     active: true },
    { label: 'Köy Halkı', href: '#villagers' },
    { label: 'Klanlar',   href: '#phase2' },
    { label: 'Harita',    href: '#phase2' },
  ];

  return (
    <header className={cx(
      'fixed top-0 inset-x-0 z-50 transition-[padding,background-color,border-color] duration-500',
      (scrolled || open) ? 'py-2.5 bg-ink-900/80 border-b border-aubergine-800/60 nav-blur' : 'py-5 bg-transparent border-b border-transparent'
    )}>
      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 flex items-center gap-4 sm:gap-10">
        {/* Logo */}
        <a href="#hero" onClick={()=>setOpen(false)} className="flex items-center gap-3 group shrink-0">
          <img src={(window.__resources && window.__resources.gigacraftLogo) || "assets/gigacraft.png"} alt="GigaCraft" className={cx('transition-all duration-500', scrolled ? 'h-9' : 'h-10 sm:h-11')} />
          <div className="hidden lg:flex flex-col leading-none">
            <span className="font-pixel text-amber-300 text-[15px] tracking-[0.18em]">GIGACRAFT</span>
            <span className="font-mono text-[10px] text-ash tracking-[0.2em] mt-1">TURKNET ORIGINAL</span>
          </div>
        </a>

        {/* Desktop links */}
        <nav className="hidden md:flex items-center gap-7 ml-2">
          {links.map(l => (
            <a key={l.label} href={l.href} className={cx(
              'group relative whitespace-nowrap text-[15px] tracking-wide transition-colors font-medium',
              l.active ? 'text-bone' : 'text-bone/65 hover:text-bone'
            )}>
              {l.label}
              <span className={cx(
                'absolute -bottom-2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-amber-400 to-transparent transition-opacity duration-300',
                l.active ? 'opacity-100' : 'opacity-0 group-hover:opacity-60'
              )} />
            </a>
          ))}
        </nav>

        <div className="flex-1" />

        {/* Right cluster */}
        <div className="flex items-center gap-2.5 sm:gap-3 shrink-0">
          <a href="#episode" className="hidden lg:flex items-center gap-2.5 px-3.5 py-1.5 rounded-full border border-danger/40 bg-danger/10 hover:bg-danger/20 transition-colors whitespace-nowrap">
            <span className="relative flex items-center justify-center shrink-0">
              <span className="absolute inline-flex w-2 h-2 rounded-full bg-danger live-dot" />
              <span className="relative w-2 h-2 rounded-full bg-danger" />
            </span>
            <span className="font-mono text-[11px] tracking-[0.2em] text-bone">3. BÖLÜM CANLI</span>
          </a>

          <a href="#" className="hidden sm:inline-flex items-center px-4 py-2 rounded-lg text-bone/85 hover:text-bone hover:bg-bone/5 transition-colors text-[14px] font-medium whitespace-nowrap">
            Giriş yap
          </a>
          <a href="#" className="mc-bevel inline-flex items-center px-3.5 sm:px-4 py-2 rounded-lg bg-amber-400 text-aubergine-900 font-semibold text-[14px] hover:bg-amber-300 transition-all active:scale-95 whitespace-nowrap">
            Kayıt ol
          </a>

          {/* Hamburger (mobile) */}
          <button onClick={()=>setOpen(o=>!o)} aria-label="Menü"
                  className="md:hidden w-10 h-10 -mr-1 grid place-items-center rounded-lg text-bone/85 hover:bg-bone/5 transition-colors">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {open
                ? <><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></>
                : <><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></>}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile menu panel */}
      {open && (
        <div className="md:hidden mt-2.5 border-t border-aubergine-800/60">
          <nav className="max-w-[1280px] mx-auto px-5 py-3 flex flex-col">
            {links.map(l => (
              <a key={l.label} href={l.href} onClick={()=>setOpen(false)}
                 className={cx('py-3 text-[16px] font-medium border-b border-bone/5', l.active ? 'text-amber-300' : 'text-bone/80')}>
                {l.label}
              </a>
            ))}
            <a href="#" onClick={()=>setOpen(false)} className="mt-3 py-3 text-center rounded-lg border border-bone/20 text-bone font-medium">
              Giriş yap
            </a>
          </nav>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;