// ── Navigation ────────────────────────────────────────────────────────────────

const Nav = ({ page, setPage }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  React.useEffect(() => { setMenuOpen(false); window.scrollTo(0, 0); }, [page]);

  const links = [
    { id: 'home', label: 'Beranda' },
    { id: 'essentials', label: 'Essentials' },
    { id: 'enterprise', label: 'Enterprise' },
    { id: 'portfolio', label: 'Portfolio' },
    { id: 'insights', label: 'Insights' },
    { id: 'about', label: 'Tentang Kami' },
  ];

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    padding: '0 clamp(1.5rem, 5vw, 4rem)',
    height: scrolled ? 64 : 80,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    background: scrolled ? 'rgba(253,252,255,0.92)' : 'transparent',
    backdropFilter: scrolled ? 'blur(16px)' : 'none',
    borderBottom: scrolled ? '1px solid rgba(45,140,255,0.08)' : 'none',
    transition: 'all 0.4s cubic-bezier(.16,1,.3,1)',
  };

  const logoStyle = {
    fontFamily: 'Bricolage Grotesque, Inter, sans-serif',
    fontSize: '1.3rem', fontWeight: 800,
    color: '#1C2B3E', cursor: 'pointer',
    letterSpacing: '-0.02em', display: 'flex', alignItems: 'center', gap: 8,
    userSelect: 'none',
  };

  const xBadge = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 22, height: 22, borderRadius: 6,
    background: '#2D8CFF',
    color: '#fff', fontSize: '0.7rem', fontWeight: 900,
    letterSpacing: 0,
  };

  return (
    <>
      <nav style={navStyle}>
        {/* Logo */}
        <div style={logoStyle} onClick={() => setPage('home')}>
          <span>Smartek</span>
          <span style={xBadge}>X</span>
        </div>

        {/* Desktop links */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }} className="nav-desktop">
          {links.map(l => (
            <button key={l.id} onClick={() => setPage(l.id)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0',
              fontFamily: 'Inter, sans-serif', fontSize: '0.9rem', fontWeight: 500,
              color: page === l.id ? '#1A6FD4' : '#374151',
              borderBottom: page === l.id ? '2px solid #2D8CFF' : '2px solid transparent',
              transition: 'all 0.2s', letterSpacing: '-0.01em',
            }}>
              {l.label}
            </button>
          ))}
          <button onClick={() => setPage('contact')} style={{
            background: '#E8FF47',
            color: '#0D1117', border: 'none', borderRadius: 10,
            padding: '9px 20px', fontSize: '0.88rem', fontWeight: 700,
            cursor: 'pointer', fontFamily: 'Inter, sans-serif',
            letterSpacing: '-0.01em',
            boxShadow: '0 2px 10px rgba(232,255,71,0.25)',
            transition: 'transform 0.15s, box-shadow 0.15s',
          }}
          onMouseEnter={e => { e.target.style.transform = 'translateY(-1px)'; e.target.style.boxShadow = '0 4px 18px rgba(232,255,71,0.4)'; }}
          onMouseLeave={e => { e.target.style.transform = 'none'; e.target.style.boxShadow = '0 2px 10px rgba(232,255,71,0.25)'; }}
          >
            AI Audit Gratis
          </button>
        </div>

        {/* Mobile hamburger */}
        <button onClick={() => setMenuOpen(!menuOpen)} className="nav-mobile" style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 8,
          display: 'flex', flexDirection: 'column', gap: 5,
        }}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              display: 'block', width: 24, height: 2,
              background: '#1C2B3E', borderRadius: 2,
              transition: 'all 0.3s',
              transform: menuOpen ? (i === 0 ? 'rotate(45deg) translate(5px,5px)' : i === 2 ? 'rotate(-45deg) translate(5px,-5px)' : 'scaleX(0)') : 'none',
            }} />
          ))}
        </button>
      </nav>

      {/* Mobile menu */}
      <div style={{
        position: 'fixed', top: 64, left: 0, right: 0, zIndex: 99,
        background: 'rgba(253,252,255,0.97)', backdropFilter: 'blur(20px)',
        borderBottom: '1px solid rgba(45,140,255,0.12)',
        padding: '1.5rem clamp(1.5rem,5vw,4rem) 2rem',
        transform: menuOpen ? 'translateY(0)' : 'translateY(-110%)',
        transition: 'transform 0.35s cubic-bezier(.16,1,.3,1)',
        display: 'flex', flexDirection: 'column', gap: '1.25rem',
      }}>
        {links.map(l => (
          <button key={l.id} onClick={() => setPage(l.id)} style={{
            background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
            fontFamily: 'Inter, sans-serif', fontSize: '1.1rem', fontWeight: 600,
            color: page === l.id ? '#1A6FD4' : '#1C2B3E', padding: '4px 0',
          }}>{l.label}</button>
        ))}
        <button onClick={() => setPage('contact')} style={{
          background: '#E8FF47',
          color: '#0D1117', border: 'none', borderRadius: 12,
          padding: '14px 24px', fontSize: '1rem', fontWeight: 700,
          cursor: 'pointer', fontFamily: 'Inter, sans-serif', marginTop: 8,
        }}>AI Audit Gratis</button>
      </div>
    </>
  );
};

Object.assign(window, { Nav });