/* OnSumn v2 — Glass Header */
const CITIES = ['ALL', 'OAKLAND', 'SF', 'SAN JOSE', 'VALLEJO', 'RICHMOND', 'DALY CITY'];

/* Inline SVG location pin */
function LocationPin({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: 6, marginTop: -1 }}>
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  );
}

function Header({ darkMode, activeCity, setActiveCity, onToggleDark, radius }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  const glass = glassStyle(darkMode, 'panel');
  const textColor = darkMode ? '#fff' : '#0A0A0A';
  const mutedColor = darkMode ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.4)';

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      padding: scrolled ? '0 16px' : '8px 16px',
      transition: 'padding 0.4s ease',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        ...glass,
        borderRadius: radius,
        border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '12px 24px',
        transition: 'border-radius 0.4s, background 0.4s',
        marginTop: scrolled ? 0 : 8,
      }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <span style={{
            fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 900,
            color: textColor, letterSpacing: '-0.02em', textTransform: 'uppercase',
            cursor: 'pointer',
          }}>OnSumn</span>
          <div style={{ width: 1, height: 18, background: darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)' }}/>
          {/* City nav */}
          <nav style={{ display: 'flex', gap: 2, alignItems: 'center' }} className="city-nav-desktop">
            {CITIES.map(c => (
              <button key={c} onClick={() => setActiveCity(c)} style={{
                fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                padding: '6px 10px', borderRadius: Math.max(radius - 4, 0),
                background: activeCity === c
                  ? (darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.07)')
                  : 'transparent',
                color: activeCity === c ? textColor : mutedColor,
                border: 'none', cursor: 'pointer',
                transition: 'all 0.25s ease',
              }}>{c}</button>
            ))}
          </nav>
        </div>

        {/* Right */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={onToggleDark} style={{
            ...glassStyle(darkMode, 'btn'),
            border: 'none', cursor: 'pointer',
            color: textColor, fontSize: 16, padding: '8px 10px',
            minHeight: 44, minWidth: 44,
            borderRadius: radius, display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'all 0.25s',
          }} title={darkMode ? 'Light mode' : 'Dark mode'}>
            {darkMode ? '☀' : '☾'}
          </button>
          <button className="desktop-cta" style={{
            background: 'var(--international-orange)', color: '#fff',
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.05em', textTransform: 'uppercase',
            padding: '10px 18px', minHeight: 44,
            border: '1.5px solid var(--international-orange)',
            cursor: 'pointer', borderRadius: radius,
            display: 'flex', alignItems: 'center',
            transition: 'transform 0.2s, box-shadow 0.2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform='translateY(-1px)'; e.currentTarget.style.boxShadow='0 8px 24px rgba(255,79,0,0.3)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform='none'; e.currentTarget.style.boxShadow='none'; }}
          >Drop Your Event</button>
          {/* Mobile hamburger */}
          <button className="mobile-menu-trigger" onClick={() => setMobileOpen(true)} style={{
            ...glassStyle(darkMode, 'btn'),
            border: 'none', cursor: 'pointer',
            color: textColor, fontSize: 20, padding: '8px 10px',
            minHeight: 44, minWidth: 44,
            borderRadius: radius, alignItems: 'center', justifyContent: 'center',
          }}>☰</button>
        </div>
      </div>

      {/* Mobile menu overlay */}
      <div className={`mobile-overlay ${mobileOpen ? 'open' : ''}`} onClick={() => setMobileOpen(false)}>
        <div className="mobile-panel" onClick={e => e.stopPropagation()} style={{
          ...glassStyle(darkMode, 'panel'),
          background: darkMode ? 'rgba(10,10,10,0.95)' : 'rgba(245,245,245,0.97)',
          borderLeft: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.06)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
            <span style={{
              fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 900,
              color: textColor, textTransform: 'uppercase',
            }}>Cities</span>
            <button onClick={() => setMobileOpen(false)} style={{
              background: 'none', border: 'none', color: mutedColor,
              fontSize: 24, cursor: 'pointer', minHeight: 44, minWidth: 44,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>×</button>
          </div>
          {CITIES.map(c => (
            <button key={c} onClick={() => { setActiveCity(c); setMobileOpen(false); }} style={{
              display: 'block', width: '100%', textAlign: 'left',
              fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
              letterSpacing: '0.04em', textTransform: 'uppercase',
              padding: '14px 16px', minHeight: 48, marginBottom: 4,
              borderRadius: Math.max(radius - 4, 8),
              background: activeCity === c
                ? (darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)')
                : 'transparent',
              color: activeCity === c ? textColor : mutedColor,
              border: 'none', cursor: 'pointer',
              transition: 'all 0.2s',
            }}>{c}</button>
          ))}
          <div style={{ marginTop: 24, paddingTop: 16, borderTop: darkMode ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.06)' }}>
            <button style={{
              width: '100%',
              background: 'var(--international-orange)', color: '#fff',
              fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 700,
              letterSpacing: '0.05em', textTransform: 'uppercase',
              padding: '14px 18px', minHeight: 48,
              border: 'none', borderRadius: radius,
              cursor: 'pointer',
            }}>Drop Your Event</button>
          </div>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;
window.CITIES = CITIES;