function Nav() {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const close = () => setMobileOpen(false);

  return (
    <>
      <nav className={`nav${scrolled ? ' scrolled' : ''}`}>
        <div className="container nav-inner">
          <a href="#top" className="nav-logo" aria-label="Titan AI — Hukuk Takip Yazılımı">
            <img src="/titan-logo.png?v=2" alt="Titan AI" className="nav-logo-img logo-light" style={{height:128,width:'auto'}} />
            <img src="/titan-logo-dark.png?v=3" alt="Titan AI" className="nav-logo-img logo-dark" style={{height:128,width:'auto'}} />
          </a>
          <div className="nav-links">
            <a className="nav-link" href="/features.html">Özellikler</a>
            <a className="nav-link" href="/#how">Nasıl çalışır?</a>
            <a className="nav-link" href="/#karar">Karar Arama</a>
            <a className="nav-link" href="/#pricing">Fiyatlandırma</a>
            <a className="nav-link" href="/#faq">SSS</a>
          </div>
          <div className="nav-ctas">
            <ThemeToggle />
            <a className="btn btn-primary btn-sm" href="#demo">Demo talep et</a>
          </div>
          <button className="nav-hamburger" aria-label="Menü" onClick={() => setMobileOpen(true)}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
          </button>
        </div>
      </nav>
      {mobileOpen && (
        <div className="nav-mobile-overlay">
          <div className="nav-mobile-head">
            <a href="#top" className="nav-logo" onClick={close} aria-label="Titan AI — Hukuk Takip Yazılımı">
              <img src="/titan-logo.png?v=2" alt="Titan AI" className="nav-logo-img logo-light" style={{height:104,width:'auto'}} />
              <img src="/titan-logo-dark.png?v=3" alt="Titan AI" className="nav-logo-img logo-dark" style={{height:104,width:'auto'}} />
            </a>
            <button className="nav-mobile-close" aria-label="Kapat" onClick={close}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
            </button>
          </div>
          <div className="nav-mobile-links">
            <a className="nav-mobile-link" href="/features.html" onClick={close}>Özellikler</a>
            <a className="nav-mobile-link" href="/#how" onClick={close}>Nasıl çalışır?</a>
            <a className="nav-mobile-link" href="/#karar" onClick={close}>Karar Arama</a>
            <a className="nav-mobile-link" href="/#pricing" onClick={close}>Fiyatlandırma</a>
            <a className="nav-mobile-link" href="/#faq" onClick={close}>SSS</a>
          </div>
          <div className="nav-mobile-ctas">
            <ThemeToggle mobile />
            <a className="btn btn-primary" href="#demo" onClick={close} style={{justifyContent:'center'}}>Demo talep et</a>
          </div>
        </div>
      )}
    </>
  );
}
window.Nav = Nav;
