// Caret landing — floating glass nav
function Nav({ accent }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', on, { passive: true }); on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  const links = [
    ['How it works', '#how'],
    ['Features', '#features'],
    ['Action Library', '#actions'],
    ['Bring your own', '#byo'],
    ['Pricing', '#pricing'],
    ['FAQ', '#faq'],
  ];
  return (
    <div style={{ position: 'sticky', top: 16, zIndex: 50, padding: '0 28px' }}>
      <div className="wrap-wide" style={{ padding: 0 }}>
        <div className={'nav-inner' + (scrolled ? ' scrolled' : '')}>
          <a href="#top" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
            <img src="assets/caret-wordmark.svg" alt="Caret" style={{ height: 30, display: 'block' }} />
          </a>
          <div className="nav-links">
            {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
          </div>
          <details className="mobile-nav"><summary aria-label="Navigation menu">Menu</summary><nav aria-label="Page sections">{links.map(([label, href]) => <a key={href} href={href} onClick={event => { event.currentTarget.closest('details').open = false; }}>{label}</a>)}</nav></details>
          <a className="btn btn-primary" href="https://github.com/arjmandi/caret-releases/releases/latest/download/Caret.dmg" style={{ padding: '10px 18px', fontSize: 15 }}>
            <Icon name="arrow-down-to-line" size={16} color="#fff" /> Download
          </a>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Nav });