const Wordmark = ({ onDark = false, onClick, size = 24 }) => <a href="/" onClick={e => { e.preventDefault(); onClick && onClick(); }} aria-label="OneCloud Networks home" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6, textDecoration: 'none', fontSize: size, letterSpacing: '-.03em', lineHeight: 1 }}><span style={{ fontWeight: 800, color: onDark ? '#fff' : 'var(--oc-navy)' }}>One<span style={{ color: onDark ? 'var(--oc-cyan)' : 'var(--oc-blue)' }}>Cloud</span></span><span style={{ fontWeight: 500, letterSpacing: '-.01em', color: onDark ? 'var(--oc-text-on-navy)' : 'var(--oc-text)' }}>Networks</span></a>;
const NAV = [['home', 'AI receptionist'], ['phone', 'Phone systems'], ['industries', 'Industries'], ['support', 'Support'], ['about', 'About']];
function Nav({ route, go, onContact }) {
  const [res, setRes] = React.useState(false); const [open, setOpen] = React.useState(false); const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => { const on = () => setScrolled(window.scrollY > 8); on(); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []);
  const link = ([k, l]) => <a key={k} href={pathFor(k)} aria-current={route === k ? 'page' : undefined} onClick={e => { e.preventDefault(); setOpen(false); go(k); }}>{l}</a>;
  return <>
    <a className="skip" href="#main">Skip to content</a>
    <header className={'nav' + (scrolled ? ' is-scrolled' : '')}><Container>
      <Wordmark onClick={() => go('home')} />
      <nav className="nav-links" aria-label="Primary">{NAV.map(link)}
        <span style={{ position: 'relative' }} onMouseEnter={() => setRes(true)} onMouseLeave={() => setRes(false)}><button aria-expanded={res} aria-haspopup="true" className={['carriers', 'blog', 'post'].includes(route) ? 'is-current' : undefined} onClick={e => setRes(v => e.detail === 0 ? !v : true)} onKeyDown={e => { if (e.key === 'Escape') setRes(false); }}>Resources <DS.Icon name="ChevronDown" size={14} /></button>{res && <div className="menu" role="menu"><a role="menuitem" href={pathFor('blog')} aria-current={route === 'blog' || route === 'post' ? 'page' : undefined} onClick={e => { e.preventDefault(); setRes(false); go('blog'); }}>Blog</a><a role="menuitem" href={pathFor('carriers')} aria-current={route === 'carriers' ? 'page' : undefined} onClick={e => { e.preventDefault(); setRes(false); go('carriers'); }}>Carriers</a></div>}</span>
      </nav>
      <div className="nav-right"><a className="nav-tel num" href={TEL} aria-label={'Call ' + PHONE}><DS.Icon name="Phone" size={16} color="var(--oc-blue)" /><span>{PHONE}</span></a><DS.Button size="sm" onClick={onContact} style={{ borderRadius: 999, padding: '0 18px' }}>Book a free demo</DS.Button><DS.IconButton className="burger" label={open ? 'Close menu' : 'Open menu'} variant="outline" onClick={() => setOpen(v => !v)}><DS.Icon name={open ? 'X' : 'Menu'} size={20} /></DS.IconButton></div>
    </Container></header>
    {open && <nav className="mobile-menu" aria-label="Primary mobile">{NAV.map(link)}<a href={pathFor('blog')} onClick={e => { e.preventDefault(); setOpen(false); go('blog'); }}>Blog</a><a href={pathFor('carriers')} aria-current={route === 'carriers' ? 'page' : undefined} onClick={e => { e.preventDefault(); setOpen(false); go('carriers'); }}>Carriers</a><DS.Button fullWidth onClick={() => { setOpen(false); onContact(); }} style={{ marginTop: 12 }}>Book a free demo</DS.Button></nav>}
  </>;
}
const BottomBar = () => <div className="bottom-bar"><CallButton size="sm" /></div>;
Object.assign(window, { Wordmark, Nav, BottomBar });