// NavDrawer — slide-in nav for phone. Triggered by 'nav-drawer:open' event.
// Contains all the page links + Ask 8/0 launcher + Sign in.

function NavDrawer() {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener('nav-drawer:open', onOpen);
    return () => window.removeEventListener('nav-drawer:open', onOpen);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  const close = () => setOpen(false);

  const NavLink = ({ href, children, external }) => (
    <a className="nav-drawer-link" href={href}
      target={external ? '_blank' : undefined}
      rel={external ? 'noopener' : undefined}
      onClick={() => setOpen(false)}>
      {children}
    </a>
  );

  return (
    <>
      <div className={`nav-drawer-scrim ${open ? 'open' : ''}`} onClick={close} aria-hidden="true"/>
      <aside className={`nav-drawer ${open ? 'open' : ''}`} role="dialog" aria-modal="true" aria-label="Navigation">
        <div className="nav-drawer-head">
          <a href="/" onClick={() => setOpen(false)} style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
            <img src="/assets/logo-mark.svg" width="26" height="26" alt=""/>
            <span className="wordmark" style={{ fontSize: 16 }}>
              <span style={{ color: 'var(--accent)' }}>Eight</span>
              <span style={{ color: 'var(--fg-1)' }}>by</span>
              <span style={{ color: 'var(--accent)' }}>Zero</span>
            </span>
          </a>
          <button className="nav-drawer-close" onClick={close} aria-label="Close">×</button>
        </div>

        <div className="nav-drawer-body">
          {/* Ask 8/0 input — full-width inside the drawer */}
          <div className="nav-drawer-section">
            <div className="label">Talk to the layer</div>
            <button onClick={() => { setOpen(false); setTimeout(() => window.dispatchEvent(new Event('ask-agent:open')), 200); }} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              height: 44, padding: '0 14px',
              width: '100%',
              background: 'rgba(16,200,128,0.10)',
              color: 'var(--fg-2)',
              border: '1px solid rgba(16,200,128,0.40)',
              borderRadius: 6,
              fontFamily: 'var(--font-sans)',
              fontSize: 14, fontWeight: 400,
              letterSpacing: '-0.005em',
              cursor: 'text',
              textAlign: 'left',
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)',
                flexShrink: 0, opacity: 0.7,
              }}/>
              <span style={{ flex: 1, color: 'var(--fg-3)' }}>Ask 8/0 anything…</span>
              <span style={{
                width: 18, height: 18, borderRadius: 3,
                border: '1px solid rgba(255,255,255,0.18)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <svg width="7" height="8" viewBox="0 0 7 8" style={{ display: 'block' }}>
                  <path d="M 1 1 L 6 4 L 1 7 Z" fill="rgba(232,243,236,0.55)"/>
                </svg>
              </span>
            </button>
          </div>

          <div className="nav-drawer-section">
            <div className="label">Pages</div>
            <NavLink href="/">Home</NavLink>
            <NavLink href="/about">About</NavLink>
            <NavLink href="https://connector.eightbyzero.com" external>The Connector</NavLink>
          </div>

          <div className="nav-drawer-section">
            <div className="label">Account</div>
            <a className="nav-drawer-link" href="#"
              onClick={(e) => { e.preventDefault(); setOpen(false); setTimeout(() => window.dispatchEvent(new Event('sign-in:open')), 200); }}>
              Sign in
            </a>
            <NavLink href="https://calendar.app.google/9eoXfoSh692Xr7ks9" external>Book a demo →</NavLink>
          </div>
        </div>

        <div className="nav-drawer-foot">
          connect@eightbyzero.com · Montréal
        </div>
      </aside>
    </>
  );
}

window.NavDrawer = NavDrawer;