/* Keen Flows website, top navigation. Sticky, blurs/solidifies on scroll.
   NOTE: each <script type="text/babel"> shares one global scope, so we read
   hooks off React inline rather than destructuring at top level (which would
   collide with other section scripts). */

function KFNav({ onContact }) {
  const { Button } = window.KeenFlowsDesignSystem_019e96;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const links = [
    { label: 'Services', href: '#services' },
    { label: 'How it works', href: '#how' },
  ];

  return (
    <header className={'kfsite-nav' + (scrolled ? ' is-scrolled' : '')}>
      <div className="kfsite-nav__inner kf-container">
        <a className="kfsite-brand" href="#top">
          <img src="assets/keen-logo-mark-trim.png" alt="" className="kfsite-brand__mark" />
          <span className="kfsite-brand__word">Keen&nbsp;Flows</span>
        </a>

        <nav className="kfsite-nav__links">
          {links.map((l) => (
            <a key={l.label} href={l.href} className="kfsite-nav__link">{l.label}</a>
          ))}
        </nav>

        <div className="kfsite-nav__actions">
          <Button variant="primary" size="sm" onClick={onContact}>Get in touch</Button>
        </div>

        <button className={'kfsite-nav__burger' + (open ? ' is-open' : '')} onClick={() => setOpen((v) => !v)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>

      {open && (
        <div className="kfsite-nav__mobile">
          {links.map((l) => <a key={l.label} href={l.href} className="kfsite-nav__link" onClick={() => setOpen(false)}>{l.label}</a>)}
          <Button variant="primary" block onClick={() => { setOpen(false); onContact && onContact(); }}>
            Get in touch
          </Button>
        </div>
      )}
    </header>
  );
}

window.KFNav = KFNav;