/* burp.agency — Navbar
   Logo · Offerings ▾ (Words / Shape / Motion) · Blog · Contact · ?
   Plus a "Book a free audit" CTA on the right. */

const Nav = ({ depth = 0 }) => {
  const r = fileRoutes(depth);
  const [scrolled, setScrolled]   = React.useState(false);
  const [openDrop, setOpenDrop]   = React.useState(false);
  const dropRef = React.useRef(null);
  const closeTimer = React.useRef(null);

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

  // Close dropdown on outside click / Esc
  React.useEffect(() => {
    if (!openDrop) return;
    const onClick = e => { if (dropRef.current && !dropRef.current.contains(e.target)) setOpenDrop(false); };
    const onKey   = e => { if (e.key === 'Escape') setOpenDrop(false); };
    document.addEventListener('mousedown', onClick);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [openDrop]);

  // Hover-open with a small delay so it's not twitchy
  const hoverOpen  = () => { clearTimeout(closeTimer.current); setOpenDrop(true); };
  const hoverClose = () => { closeTimer.current = setTimeout(() => setOpenDrop(false), 150); };

  const offerings = [
    { href: r.words,  label: 'Words',  blurb: 'Content marketing' },
    { href: r.shape,  label: 'Shape',  blurb: 'Design'            },
    { href: r.motion, label: 'Motion', blurb: 'Growth marketing'  },
  ];

  return (
    <header data-screen-label="Navbar"
            style={{
              position: 'sticky', top: 0, zIndex: 100,
              background: 'var(--color-cream)',
              borderBottom: '1px solid var(--color-warm-gray)',
              boxShadow: scrolled ? '0 1px 0 var(--color-warm-gray)' : 'none',
              transition: 'box-shadow .15s ease',
            }}>
      <Container style={{
        display: 'flex', alignItems: 'center',
        gap: 24, paddingTop: 14, paddingBottom: 14,
      }}>
        <a href={r.home} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          color: 'inherit', flexShrink: 0,
        }}>
          <img src={`${'../'.repeat(depth)}assets/burp-mascot.png`}
               alt="burp.agency"
               style={{ height: 32, width: 'auto' }} />
          <span style={{ fontFamily: 'Georgia, serif', fontSize: 19, letterSpacing: '-0.02em' }}>burp.agency</span>
        </a>

        <nav className="nav-links" style={{
          display: 'flex', alignItems: 'center', gap: 22,
          marginLeft: 16,
        }}>
          {/* Offerings dropdown */}
          <div ref={dropRef}
               onMouseEnter={hoverOpen}
               onMouseLeave={hoverClose}
               style={{ position: 'relative' }}>
            <button onClick={() => setOpenDrop(o => !o)}
              aria-expanded={openDrop}
              style={{
                background: 'transparent', border: 0, padding: '6px 0',
                fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
                color: 'var(--color-ink)', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 6,
                transition: 'font-weight .12s ease',
              }}
              onMouseEnter={e => { e.currentTarget.style.fontWeight = 600; }}
              onMouseLeave={e => { e.currentTarget.style.fontWeight = 500; }}>
              Offerings
              <span style={{
                display: 'inline-block', fontSize: 10,
                transform: openDrop ? 'rotate(180deg)' : 'rotate(0)',
                transition: 'transform .15s ease',
              }}>▼</span>
            </button>

            {openDrop && (
              <div style={{
                position: 'absolute', top: 'calc(100% + 8px)', left: -16,
                background: '#fff',
                border: '1px solid var(--color-ink)',
                minWidth: 280,
                animation: 'burp-fade-in .15s ease both',
                boxShadow: '0 4px 0 rgba(17,17,17,0.04)',
              }}>
                {/* Tiny tip pointing up */}
                <div style={{
                  position: 'absolute', top: -6, left: 32,
                  width: 10, height: 10,
                  background: '#fff',
                  borderTop: '1px solid var(--color-ink)',
                  borderLeft: '1px solid var(--color-ink)',
                  transform: 'rotate(45deg)',
                }}/>
                <a href={r.offerings} style={{
                  display: 'block', padding: '12px 16px',
                  borderBottom: '1px solid var(--color-warm-gray)',
                  fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
                  letterSpacing: '0.10em', textTransform: 'uppercase',
                  color: 'var(--color-orange)',
                }}>All three practices  →</a>

                {offerings.map(o => (
                  <a key={o.label} href={o.href}
                     style={{
                       display: 'block', padding: '14px 16px',
                       borderBottom: '1px solid var(--color-warm-gray)',
                       color: 'var(--color-ink)', textDecoration: 'none',
                       transition: 'background .12s ease',
                     }}
                     onMouseEnter={e => e.currentTarget.style.background = 'var(--color-pale-orange)'}
                     onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <div style={{
                      fontFamily: 'Georgia, serif', fontSize: 22,
                      letterSpacing: '-0.018em', lineHeight: 1,
                    }}>{o.label}.</div>
                    <div style={{
                      marginTop: 4,
                      fontFamily: 'Inter, sans-serif', fontSize: 12,
                      color: 'var(--color-mid-gray)',
                    }}>{o.blurb}</div>
                  </a>
                ))}
              </div>
            )}
          </div>

          <a href={r.work}
             style={{
               fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
               color: 'var(--color-ink)',
               transition: 'font-weight .12s ease',
             }}
             onMouseEnter={e => { e.currentTarget.style.fontWeight = 600; }}
             onMouseLeave={e => { e.currentTarget.style.fontWeight = 500; }}
          >Work</a>

          <a href={r.blog}
             style={{
               fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
               color: 'var(--color-ink)',
               transition: 'font-weight .12s ease',
             }}
             onMouseEnter={e => { e.currentTarget.style.fontWeight = 600; }}
             onMouseLeave={e => { e.currentTarget.style.fontWeight = 500; }}
          >Blog</a>

          <a href={r.contact}
             style={{
               fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
               color: 'var(--color-ink)',
               transition: 'font-weight .12s ease',
             }}
             onMouseEnter={e => { e.currentTarget.style.fontWeight = 600; }}
             onMouseLeave={e => { e.currentTarget.style.fontWeight = 500; }}
          >Contact</a>

          {/* The ? — does not appear interesting until you click. */}
          <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
             target="_blank" rel="noopener noreferrer"
             aria-label="A small surprise"
             title="?"
             style={{
               display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
               width: 24, height: 24, borderRadius: '50%',
               border: '1px solid var(--color-warm-gray)',
               fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600,
               color: 'var(--color-mid-gray)',
               transition: 'border-color .12s ease, color .12s ease',
             }}
             onMouseEnter={e => {
               e.currentTarget.style.borderColor = 'var(--color-ink)';
               e.currentTarget.style.color = 'var(--color-ink)';
             }}
             onMouseLeave={e => {
               e.currentTarget.style.borderColor = 'var(--color-warm-gray)';
               e.currentTarget.style.color = 'var(--color-mid-gray)';
             }}
          >?</a>
        </nav>

        <div style={{ marginLeft: 'auto', flexShrink: 0 }}>
          <Btn size="sm" onClick={() => bookAudit()}>Book a free audit  →</Btn>
        </div>
      </Container>
    </header>
  );
};

Object.assign(window, { Nav });