// nav.jsx — top navigation
const { useState: useNavState, useEffect: useNavEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useNavState(false);

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

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 0' : '22px 0',
      transition: 'padding .3s cubic-bezier(.16,.84,.32,1)',
      pointerEvents: 'none',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        padding: '0 clamp(16px, 5vw, 56px)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        pointerEvents: 'auto',
      }}>
        {/* Logo */}
        <a href="#top" style={{
          display: 'flex', alignItems: 'center', gap: 10,
          textDecoration: 'none', color: 'var(--ink)',
        }}>
          <NurtliMark />
          <span style={{
            fontFamily: 'var(--font-display)',
            fontSize: 26, lineHeight: 1, letterSpacing: '-0.02em',
            marginTop: -2,
          }}>Nurtli</span>
        </a>

        {/* Center links — glass */}
        <div className="nav-center glass" style={{
          display: 'flex', alignItems: 'center', gap: 4,
          padding: '6px 6px', borderRadius: 999,
          fontSize: 14, fontWeight: 500,
        }}>
          {[
            ['The microbiome', '#microbiome'],
            ['Features', '#features'],
            ['Grading', '#grading'],
            ['Blog', 'Blog.html'],
            ['Privacy', 'Privacy Policy.html'],
          ].map(([label, href]) => (
            <a key={href} href={href} style={{
              padding: '8px 14px', borderRadius: 999,
              color: 'var(--ink-soft)', textDecoration: 'none',
              whiteSpace: 'nowrap',
              transition: 'background .25s ease, color .25s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(127,179,160,0.18)'; e.currentTarget.style.color = 'var(--moss-deep)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-soft)'; }}>
              {label}
            </a>
          ))}
        </div>

        {/* Right CTA */}
        <a href="https://apps.apple.com/app/nurtli/id0000000000" target="_blank" rel="noopener" className="btn btn-primary" style={{
          padding: '11px 18px 11px 20px', fontSize: 14,
          textDecoration: 'none',
          whiteSpace: 'nowrap',
        }}>
          App Store
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 6h7M6 3l3 3-3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
      <style>{`
        @media (max-width: 980px) { .nav-center { display: none !important; } }
      `}</style>
    </nav>
  );
}

function NurtliMark({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }}>
      <defs>
        <radialGradient id="markBg" cx="40%" cy="40%" r="70%">
          <stop offset="0%" stopColor="#F4F8F4" />
          <stop offset="100%" stopColor="#B8D4C2" />
        </radialGradient>
      </defs>
      <circle cx="16" cy="16" r="15" fill="url(#markBg)" stroke="#5A9985" strokeWidth="0.6" />
      {/* leaf curl */}
      <path d="M 9 21 Q 16 5 23 11 Q 19 18 9 21 Z" fill="#5A9985" opacity="0.85" />
      <path d="M 14 19 Q 18 12 22 13" stroke="#F4F8F4" strokeWidth="0.8" fill="none" strokeLinecap="round" opacity="0.7" />
      <circle cx="11" cy="11" r="1.4" fill="#E8B8C5" opacity="0.85" />
    </svg>
  );
}

Object.assign(window, { Nav, NurtliMark });
