/* eslint-disable */
// SiteShell — sticky left sidebar with wordmark, nav, apply, footer.
// Source: src/components/site-shell.tsx + src/components/logo.tsx

function SiteShell({ route, onNavigate, onApply, children }) {
  const items = [
    { to: '/', label: 'Home' },
    { to: '/community', label: 'Community and Residency' },
    { to: '/research', label: 'Research' },
    { to: '/team', label: 'Team' },
  ];

  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);

  const handleNavigate = (to) => {
    setMobileMenuOpen(false);
    onNavigate(to);
  };

  return (
    <div className="shell">
      {/* Mobile Header */}
      <header className="mobile-header">
        <a onClick={() => handleNavigate('/')} style={{ cursor: 'pointer' }}>
          <span className="mobile-logo">in&mdash;between</span>
        </a>
        <button
          className={`hamburger ${mobileMenuOpen ? 'active' : ''}`}
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          aria-label="Toggle menu"
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </header>

      {/* Mobile Menu Overlay */}
      <div className={`mobile-menu ${mobileMenuOpen ? 'open' : ''}`}>
        <nav>
          {items.map((item) => {
            const active = route === item.to;
            return (
              <a key={item.to}
                onClick={() => handleNavigate(item.to)}
                className={active ? 'active' : ''}
                style={{ cursor: 'pointer' }}
              >
                {item.label}
              </a>
            );
          })}
        </nav>
      </div>

      {/* Desktop Sidebar */}
      <aside className="sidebar">
        <div>
          <a onClick={() => onNavigate('/')} style={{ cursor: 'pointer', display: 'block' }}>
            <span style={{
              display: 'inline-block',
              fontFamily: 'var(--font-display)',
              fontWeight: 500,
              fontSize: '26px',
              lineHeight: 1,
              letterSpacing: '-0.01em',
              color: 'var(--fg)',
              transition: 'opacity 320ms',
            }}
              onMouseEnter={(e) => e.currentTarget.style.opacity = '0.8'}
              onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
            >
              in&mdash;between
            </span>
          </a>
          <p className="eyebrow" style={{ marginTop: '16px', fontSize: '10px', visibility: 'hidden' }}>—</p>

          <nav style={{ marginTop: '56px', display: 'flex', flexDirection: 'column' }}>
            {items.map((item) => {
              const active = route === item.to;
              return (
                <a key={item.to}
                  onClick={() => onNavigate(item.to)}
                  style={{
                    padding: '12px 0 12px 16px',
                    marginLeft: '-16px',
                    borderLeft: active
                      ? '1px solid var(--accent)'
                      : '1px solid transparent',
                    fontFamily: 'var(--font-display)',
                    fontSize: '26px', lineHeight: 1,
                    color: active ? 'var(--fg)' : 'var(--fg-muted)',
                    cursor: 'pointer',
                    transition: 'color 320ms, border-color 320ms',
                  }}
                  onMouseEnter={(e) => {
                    if (!active) {
                      e.currentTarget.style.color = 'var(--fg)';
                      e.currentTarget.style.borderLeftColor = 'oklch(0.22 0.02 60 / 0.3)';
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (!active) {
                      e.currentTarget.style.color = 'var(--fg-muted)';
                      e.currentTarget.style.borderLeftColor = 'transparent';
                    }
                  }}
                >
                  {item.label}
                </a>
              );
            })}
          </nav>
        </div>

        <div style={{ fontSize: '11px', color: 'var(--fg-muted)', lineHeight: 1.7 }}>
          <p style={{ paddingTop: '0', margin: 0, textTransform: 'uppercase', letterSpacing: '0.2em', opacity: 0.7 }}>
            © {new Date().getFullYear()}
          </p>
        </div>
      </aside>

      <main className="content">{children}</main>
    </div>
  );
}

window.SiteShell = SiteShell;