/* Sticky site header. The Figma header is static and 76px tall; the sticky
   shrink to 60px, the scrim and the mobile panel are additions (confirmed). */
const { NavLink, IconButton } = window.ApexAgencyDesignSystem_54b6ac;

/** The "/APEX" wordmark (the header + About film band mark). Inlined so it
 *  inherits currentColor; cropped from the file's own lockup vector. */
const WORDMARK_CACHE = { markup: null };
function Wordmark({ height = 27.837, color = 'currentColor', style }) {
  const [markup, setMarkup] = React.useState(WORDMARK_CACHE.markup);
  React.useEffect(() => {
    if (WORDMARK_CACHE.markup) return;
    fetch('assets/logo/apex-wordmark.svg').then((r) => r.text()).then((t) => {
      const cleaned = t.replace(/<\?xml[^>]*\?>/g, '')
        .replace(/<svg([^>]*?)\swidth="[^"]*"/, '<svg$1')
        .replace(/<svg([^>]*?)\sheight="[^"]*"/, '<svg$1')
        .replace('<svg', '<svg width="100%" height="100%"');
      WORDMARK_CACHE.markup = cleaned;
      setMarkup(cleaned);
    }).catch(() => {});
  }, []);
  const box = {
    display: 'block', height,
    width: typeof height === 'number' ? (197 / 49) * height : `calc(${height} * ${197 / 49})`,
    color, flexShrink: 0, ...style,
  };
  if (!markup) return <span style={box} role="img" aria-label="Apex" />;
  return <span role="img" aria-label="Apex" style={box} dangerouslySetInnerHTML={{ __html: markup }} />;
}

function SiteNav({ active }) {
  const scrolled = useScrolled(80);
  const [open, setOpen] = React.useState(false);
  useScrollLock(open);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <React.Fragment>
      <header className="apex-header" data-scrolled={String(scrolled)}>
        <a href="Apex Home.html" aria-label="Apex — home" style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <Wordmark height={scrolled ? 24 : 27.837} color="var(--apex-ink)" style={{ transition: 'height var(--dur-state) var(--ease-state)' }} />
        </a>
        <nav className="apex-nav" aria-label="Primary">
          {NAV.map((it) => (
            <NavLink key={it.label} href={it.href} withCaret={it.withCaret} active={active === it.label} className={active === it.label ? 'is-active' : undefined}>{it.label}</NavLink>
          ))}
        </nav>
        <div className="apex-utility">
          {SOCIALS.map((s) => (
            <IconButton key={s.icon} icon={s.icon} label={s.label} tone="light" href={s.href} {...(s.href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})} />
          ))}
        </div>
        <button
          type="button" className="apex-burger" aria-expanded={open} aria-controls="apex-menu"
          aria-label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen(!open)}
        >
          <span></span><span></span><span></span>
        </button>
      </header>
      <div className="apex-scrim" data-open={String(open)} onClick={() => setOpen(false)} aria-hidden="true"></div>
      <div className="apex-panel" id="apex-menu" data-open={String(open)} aria-hidden={!open}>
        <div className="apex-panel-items">
          {NAV.map((it, i) => (
            <a key={it.label} href={it.href} tabIndex={open ? 0 : -1} style={{ transitionDelay: open ? `${80 + i * 70}ms` : '0ms' }}>{it.label}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          {SOCIALS.map((s) => (
            <IconButton key={s.icon} icon={s.icon} label={s.label} tone="light" href={s.href} {...(s.href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})} />
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { SiteNav, Wordmark });