/* Alchemy website — top navigation (shared) */
const { Button } = window.DS;

// "Ways to Join" groups the membership tiers. Meeting Rooms + Day Passes are their own top-level tabs.
const SPACES_ITEMS = [
  { route: 'join', label: 'Business Club', desc: 'Come and go, from $149/mo' },
  { route: 'desks', label: 'Dedicated Desks', desc: 'A desk to call your own' },
  { route: 'offices', label: 'Private Offices', desc: 'Your turn-key HQ' },
];

const NAV_LINKS = [
  ['meeting', 'Meeting Rooms'],
  ['daypass', 'Day Passes'],
];

function SpacesMenu({ light, current, onNavigate }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    function outside(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener('mousedown', outside);
    return () => document.removeEventListener('mousedown', outside);
  }, []);
  const active = SPACES_ITEMS.some((s) => s.route === current);
  const trigger = {
    all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.84rem',
    letterSpacing: '0.04em', textTransform: 'uppercase', padding: '0.5rem 0.85rem',
    color: light ? ((open || active) ? '#fff' : 'rgba(255,255,255,0.8)') : ((open || active) ? 'var(--navy-700)' : 'var(--stone-600)'),
    borderBottom: active ? '2px solid var(--slate-500)' : '2px solid transparent',
  };
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button style={trigger} onClick={() => setOpen((o) => !o)} aria-expanded={open}>
        Ways to Join
        <span style={{ fontSize: '0.6em', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur) var(--ease-out)' }}>▼</span>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 8px)', left: 0, minWidth: 300, zIndex: 80,
          background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)',
          padding: 6, display: 'flex', flexDirection: 'column',
        }}>
          {SPACES_ITEMS.map((s) => (
            <button key={s.route} onClick={() => { setOpen(false); onNavigate(s.route); }} style={{
              all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 14, padding: '0.7rem 0.85rem',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper-100)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
              <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1rem', color: 'var(--text-strong)' }}>{s.label}</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.82rem', color: 'var(--text-muted)' }}>{s.desc}</span>
              </span>
              <span style={{ color: 'var(--slate-500)', fontSize: '0.9rem', flex: 'none' }}>→</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Nav({ current, onNavigate, overDark = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const root = document.getElementById('kit-scroll') || window;
    const el = document.getElementById('kit-scroll');
    const handler = () => setScrolled((el ? el.scrollTop : window.scrollY) > 12);
    handler();
    root.addEventListener('scroll', handler);
    return () => root.removeEventListener('scroll', handler);
  }, []);

  // Light (knockout) treatment only when sitting over a dark hero and not scrolled.
  const light = overDark && !scrolled;
  /* Header CTA destinations come from the shared registry (links.jsx). Blank
     values keep the in-app navigation fallback. */
  const loginUrl = window.alcLink ? window.alcLink(null, 'partnerLogin') : '';
  const tourUrl = window.alcLink ? window.alcLink(null, 'scheduleTour') : '';

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(247,248,250,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(8px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto',
        padding: '0 var(--gutter)', height: 78,
        display: 'flex', alignItems: 'center', gap: 28,
      }}>
        <a onClick={() => onNavigate('home')} style={{ cursor: 'pointer', display: 'flex', flex: 'none', alignItems: 'center' }}>
          <img src={light ? '../../assets/logo-mark-white.png' : '../../assets/logo-mark.png'} alt="Alchemy Co-Working"
            style={{ height: 54, width: 'auto', display: 'block' }} />
        </a>
        <nav style={{ display: 'flex', gap: 4, marginLeft: 'auto', alignItems: 'center' }}>
          <window.LocationsMenu light={light} onNavigate={onNavigate} />
          <SpacesMenu light={light} current={current} onNavigate={onNavigate} />
          {NAV_LINKS.map(([id, label]) => {
            const active = current === id;
            const color = light
              ? (active ? '#fff' : 'rgba(255,255,255,0.8)')
              : (active ? 'var(--navy-700)' : 'var(--stone-600)');
            return (
              <button key={id} onClick={() => onNavigate(id)} style={{
                all: 'unset', cursor: 'pointer',
                fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.84rem',
                letterSpacing: '0.04em', padding: '0.5rem 0.85rem',
                color, textTransform: 'uppercase',
                borderBottom: active ? '2px solid var(--slate-500)' : '2px solid transparent',
              }}>{label}</button>
            );
          })}
          <a href={(window.alcLink && window.alcLink(null, 'instagram')) || 'https://www.instagram.com/alchemy_cowork'} target="_blank" rel="noopener" aria-label="Alchemy on Instagram" title="@alchemy_cowork" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginLeft: 4,
            width: 34, height: 34, flex: 'none', textDecoration: 'none',
            color: light ? 'rgba(255,255,255,0.85)' : 'var(--stone-600)',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.color = light ? '#fff' : 'var(--navy-700)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = light ? 'rgba(255,255,255,0.85)' : 'var(--stone-600)'; }}>
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
            </svg>
          </a>
        </nav>
        <div style={{ display: 'flex', gap: 10, flex: 'none', alignItems: 'center' }}>
          {loginUrl ? (
            <a href={loginUrl} target="_blank" rel="noopener noreferrer" style={{
              textDecoration: 'none', fontFamily: 'var(--font-label)', fontWeight: 600,
              fontSize: '0.82rem', letterSpacing: '0.04em', textTransform: 'uppercase',
              padding: '0.5rem 0.4rem', color: light ? 'rgba(255,255,255,0.9)' : 'var(--brand-strong)',
            }}>Partner Login</a>
          ) : (
            <button onClick={() => onNavigate('login')} style={{
              all: 'unset', cursor: 'pointer', fontFamily: 'var(--font-label)', fontWeight: 600,
              fontSize: '0.82rem', letterSpacing: '0.04em', textTransform: 'uppercase',
              padding: '0.5rem 0.4rem', color: light ? 'rgba(255,255,255,0.9)' : 'var(--brand-strong)',
            }}>Partner Login</button>
          )}
          {tourUrl
            ? <Button variant="slate" size="sm" as="a" href={tourUrl} target="_blank" rel="noopener noreferrer">Schedule a Tour</Button>
            : <Button variant="slate" size="sm" onClick={() => onNavigate('tour')}>Schedule a Tour</Button>}
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;