/* ═══════════════════════════════════════════════
   Nav — glass blur, sticky, premium
   Uses real Arcline logo
   ═══════════════════════════════════════════════ */

function ArclineLogo({ variant = 'black', height = 24 }) {
  const src = variant === 'white' ? 'v2/assets/logo-white.png' : 'v2/assets/logo-black.png';
  return <img src={src} alt="Arcline" style={{ height, display: 'block' }} />;
}

function Nav({ tweaks, onNavigate, currentPage }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const accent = tweaks.accentColor;

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

  const links = [
    { label: 'How it works', page: 'how-it-works' },
    { label: 'Features', page: 'features' },
    { label: 'Integrations', page: 'integrations' },
    { label: 'Pricing', page: 'pricing' },
    { label: 'Resources', page: 'resources' },
  ];

  const navLink = (item) => (
    <a key={item.page} href="#" onClick={e => { e.preventDefault(); onNavigate(item.page); setMobileOpen(false); }}
      style={{
        color: currentPage === item.page ? accent : '#0a0a1a',
        fontSize: 15.5, fontWeight: 550, textDecoration: 'none',
        transition: 'color 0.2s', padding: '8px 0',
      }}
      onMouseEnter={e => e.target.style.color = accent}
      onMouseLeave={e => { if (currentPage !== item.page) e.target.style.color = '#0a0a1a'; }}
    >{item.label}</a>
  );

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      background: scrolled ? 'rgba(255,255,255,0.88)' : 'rgba(255,255,255,0.5)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      borderBottom: scrolled ? '1px solid rgba(0,0,0,0.05)' : '1px solid transparent',
      transition: 'all 0.35s ease',
    }}>
      <div style={{
        maxWidth: 1540, margin: '0 auto', padding: '0 clamp(40px, 5vw, 80px)',
        height: 84, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#" onClick={e => { e.preventDefault(); onNavigate('home'); }} style={{ textDecoration: 'none', display: 'flex' }}>
          <ArclineLogo height={34} />
        </a>

        <div style={{ display: 'flex', gap: 28, alignItems: 'center', position: 'relative', left: 42 }} className="nav-desk">
          {links.map(navLink)}
        </div>

        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }} className="nav-desk">
          <a href="#" style={{
            color: '#0a0a1a', fontSize: 15.5, fontWeight: 550, textDecoration: 'none',
            padding: '8px 16px', borderRadius: 9, transition: 'background 0.2s',
          }}
          onMouseEnter={e => e.target.style.background = 'rgba(0,0,0,0.03)'}
          onMouseLeave={e => e.target.style.background = 'transparent'}
          >Log in</a>
          <Btn href="#" accent={accent} size="md">Sign up free</Btn>
        </div>

        <button className="nav-mobile-btn" onClick={() => setMobileOpen(!mobileOpen)} style={{
          display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 6,
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" stroke="#0a0a0a" strokeWidth="2" strokeLinecap="round" fill="none">
            {mobileOpen
              ? <><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></>
              : <><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></>}
          </svg>
        </button>
      </div>

      {mobileOpen && (
        <div style={{
          padding: '12px 28px 20px', background: '#fff',
          borderTop: '1px solid rgba(0,0,0,0.05)',
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          {links.map(navLink)}
          <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
            <a href="#" style={{ fontSize: 13.5, color: '#3a3a4a', textDecoration: 'none' }}>Log in</a>
            <Btn href="#" accent={accent} size="sm">Sign up free</Btn>
          </div>
        </div>
      )}
    </nav>
  );
}

window.ArclineLogo = ArclineLogo;
window.Nav = Nav;