// SQSEO marketing, top navigation
// The wordmark IS the logo (no icon). On scroll the bar materializes into a
// floating glass pill. Only reliably-animating properties are transitioned
// (transform / background / box-shadow / border / backdrop-filter); the pill
// geometry is constant so nothing snaps oddly. State is driven by toggling a
// class via a ref + rAF scroll poll (no React state, no fragile scroll events).
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;

const NAV_CSS = `
.sq-nav { position: sticky; top: 0; z-index: 50; }
.sq-navbar {
  display: flex; align-items: center; box-sizing: border-box;
  max-width: 940px; height: 60px; margin: 0 auto; padding: 0 10px 0 22px;
  border-radius: 999px; border: 1px solid rgba(0,0,0,0);
  background: rgba(255,255,255,0); box-shadow: none; transform: translateY(0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background-color .42s var(--ease-out), box-shadow .42s var(--ease-out),
    border-color .42s var(--ease-out), transform .42s var(--ease-out),
    -webkit-backdrop-filter .42s var(--ease-out), backdrop-filter .42s var(--ease-out);
  will-change: transform, background-color;
}
.sq-navbar.is-scrolled {
  background: rgba(255,255,255,0.74);
  border-color: var(--border-subtle);
  box-shadow: 0 14px 38px rgba(20,16,8,0.13), 0 2px 8px rgba(20,16,8,0.06);
  transform: translateY(11px);
  -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px);
}
.sq-wordmark {
  font-family: var(--font-sans); font-weight: 800; font-size: 19px;
  letter-spacing: -0.04em; color: var(--ink-900); line-height: 1;
}
.sq-navlink { padding: 8px 12px; font-size: 13.5px; font-weight: 500; color: var(--text-muted);
  border-radius: 7px; white-space: nowrap; transition: color var(--dur-fast); }
.sq-navlink:hover { color: var(--ink-900); }
`;

function Nav() {
  const links = [
    { label: "Product", href: "/#sources" },
    { label: "Free Keyword Tool", href: "https://app.sqseo.com/register" },
    { label: "Pricing", href: "/pricing" },
    { label: "API", href: "/api" },
    { label: "About", href: "/about" },
  ];

  const barRef = React.useRef(null);
  React.useEffect(() => {
    const readY = () => window.scrollY
      || document.documentElement.scrollTop
      || (document.scrollingElement && document.scrollingElement.scrollTop)
      || 0;
    // Primary: scroll events (fire on real user scroll). Backup: rAF poll
    // (covers programmatic scroll / non-bubbling scroll). Both just set the class.
    let last = null, raf;
    const apply = () => {
      const s = readY() > 20;
      if (s !== last && barRef.current) { last = s; barRef.current.classList.toggle("is-scrolled", s); }
    };
    const tick = () => { apply(); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    window.addEventListener("scroll", apply, { passive: true });
    document.addEventListener("scroll", apply, { passive: true, capture: true });
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", apply);
      document.removeEventListener("scroll", apply, { capture: true });
    };
  }, []);

  return (
    <nav className="sq-nav">
      <style>{NAV_CSS}</style>
      <div className="sq-navbar" ref={barRef}>
        <a href="/" aria-label="SQSEO home" style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}>
          <span className="sq-wordmark">SQ<span style={{ color: "var(--ink-400)" }}>SEO</span></span>
        </a>
        <div className="lt-navlinks" style={{ display: "flex", alignItems: "center", gap: 2, margin: "0 auto" }}>
          {links.map(l => <a key={l.label} href={l.href} className="sq-navlink">{l.label}</a>)}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <a href="https://app.sqseo.com/login" style={{ fontSize: 13.5, fontWeight: 500, color: "var(--text-body)", padding: "8px 14px", border: "1px solid var(--border-subtle)", borderRadius: 8, whiteSpace: "nowrap" }}>Log in</a>
          <DS.Button variant="primary" size="sm" onClick={()=>{window.location.href="https://app.sqseo.com/register";}}>Sign up</DS.Button>
        </div>
      </div>
    </nav>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.Nav = Nav;
})();