// Gudjo — Sticky top nav

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

  const navBg = scrolled
    ? `rgba(${hex2rgb(palette.paper)},0.92)`
    : 'transparent';
  const borderColor = scrolled ? palette.rule : 'transparent';

  const links = [
    { href: '#hikaye',  label: 'Hikaye' },
    { href: '#tatlar',  label: 'Tatlar' },
    { href: '#sabir',   label: 'Sabır' },
    { href: '#yakinda', label: 'Yakında' },
  ];

  return (
    <nav className="g-nav" style={{
      background: navBg,
      borderBottom: `0.5px solid ${borderColor}`,
      transition: 'background 220ms ease, border-color 220ms ease',
      color: palette.ink,
    }}>
      <div className="g-nav-inner">
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Wordmark serif={serif} color={palette.ink} size={26} />
          <PawMark color={palette.primary} size={14} opacity={0.7} />
        </a>

        <div className="g-nav-links">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="g-nav-link" style={{ color: palette.ink }}>
              {l.label}
            </a>
          ))}
        </div>

        <a href="#yakinda" className="g-nav-cta" style={{
          color: palette.primary, borderColor: palette.primary,
          display: 'none',
        }} onMouseEnter={(e) => {
          e.currentTarget.style.background = palette.primary;
          e.currentTarget.style.color = palette.paper;
        }} onMouseLeave={(e) => {
          e.currentTarget.style.background = 'transparent';
          e.currentTarget.style.color = palette.primary;
        }}>
          Haber ver
        </a>

        <button aria-label="Menu" className="g-nav-hamb" style={{
          background: 'transparent', border: 'none', cursor: 'pointer', padding: 4,
        }}>
          <span style={{ background: palette.ink }} />
          <span style={{ background: palette.ink }} />
        </button>
      </div>
    </nav>
  );
}

// Tiny CSS injection: the cta is hidden on mobile, shown on desktop
if (typeof document !== 'undefined' && !document.getElementById('g-nav-cta-styles')) {
  const s = document.createElement('style');
  s.id = 'g-nav-cta-styles';
  s.textContent = `@media (min-width: 900px) { .g-nav-cta { display: inline-flex !important; } }`;
  document.head.appendChild(s);
}

Object.assign(window, { Nav });