/* KayaCore — top navigation (sticky, translucent ink), router-aware */
function Nav({ verticals, onPickVertical }) {
  const { navigate, goSection } = useRouter();
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [mobile, setMobile] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const link = { fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500, color: 'var(--fg-muted)', cursor: 'pointer', textDecoration: 'none', padding: '6px 0', background: 'none', border: 'none' };

  const sections = [
    { label: 'What we solve', go: () => goSection('solve') },
    { label: 'How it works', go: () => goSection('how') },
    { label: 'Managed', go: () => goSection('managed') },
    { label: 'Pricing', go: () => navigate('/pricing') },
  ];

  const pickVertical = (id) => { setOpen(false); setMobile(false); onPickVertical && onPickVertical(id); navigate('/v/' + id); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(11,10,17,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none', WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--border-soft)' : 'transparent'}`,
      transition: 'all var(--dur) var(--ease-out)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '16px 28px', display: 'flex', alignItems: 'center', gap: 28 }}>
        <button style={{ ...link, padding: 0 }} onClick={() => navigate('/')} aria-label="KayaCore home"><KcLogo height={28} /></button>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 24, marginLeft: 12 }} className="kc-navlinks">
          <div style={{ position: 'relative' }} onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
            <button style={{ ...link, display: 'inline-flex', alignItems: 'center', gap: 5 }} onClick={() => setOpen(o => !o)}>
              Verticals <KcIcon name="chevronDown" size={15} style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur)' }} />
            </button>
            {open && (
              <div style={{ position: 'absolute', top: '100%', left: -16, paddingTop: 10, width: 320 }}>
                <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 16, padding: 8, boxShadow: 'var(--shadow-lg)' }}>
                  {verticals.map(v => (
                    <div key={v.id} onClick={() => pickVertical(v.id)}
                      style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 10, borderRadius: 11, cursor: 'pointer' }}
                      onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-hover)'}
                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <IconChip name={v.icon} size={34} />
                      <div>
                        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, color: 'var(--fg)' }} dangerouslySetInnerHTML={{ __html: v.name }} />
                        <div className="kc-mono" style={{ fontSize: 11, color: 'var(--fg-subtle)' }} dangerouslySetInnerHTML={{ __html: v.eyebrow }} />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
          {sections.map((s, i) => <button key={i} style={link} onClick={s.go}>{s.label}</button>)}
        </nav>

        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }} className="kc-navcta">
          <button style={{ ...link, color: 'var(--fg)' }} onClick={() => navigate('/contact')}>Sign in</button>
          <Button variant="primary" icon="arrowRight" onClick={() => navigate('/contact')}>Book a demo</Button>
        </div>
        <button className="kc-navburger" onClick={() => setMobile(!mobile)} style={{ display: 'none', marginLeft: 'auto', background: 'none', border: 'none', color: 'var(--fg)', cursor: 'pointer' }} aria-label="Menu">
          <KcIcon name={mobile ? 'x' : 'menu'} size={24} />
        </button>
      </div>
      {mobile && (
        <div className="kc-mobilemenu" style={{ padding: '8px 28px 20px', display: 'none', flexDirection: 'column', gap: 4, borderTop: '1px solid var(--border-soft)' }}>
          {verticals.map(v => <button key={v.id} style={{ ...link, textAlign: 'left' }} onClick={() => pickVertical(v.id)} dangerouslySetInnerHTML={{ __html: v.name }} />)}
          <div style={{ height: 1, background: 'var(--border-soft)', margin: '8px 0' }} />
          {sections.map((s, i) => <button key={i} style={{ ...link, textAlign: 'left' }} onClick={() => { s.go(); setMobile(false); }}>{s.label}</button>)}
          <div style={{ marginTop: 10 }}><Button variant="primary" icon="arrowRight" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { navigate('/contact'); setMobile(false); }}>Book a demo</Button></div>
        </div>
      )}
    </header>
  );
}
Object.assign(window, { Nav });