// MobileHeader.jsx — minimal top bar: logo, section name, status dot
const MobileHeader = ({ route, onHome }) => {
  const routeLabels = {
    home: '~/',
    shop: '~/shop',
    product: '~/shop/detail',
    cart: '~/cart',
    login: '~/login',
    register: '~/register',
    account: '~/account',
    guide: '~/brew-guide',
    manifesto: '~/manifesto',
    origins: '~/origins',
  };

  const sectionLabel = route.startsWith('shop:') ? '~/shop' : (routeLabels[route] || '~/');

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      height: 48, background: '#000',
      borderBottom: '1px solid rgba(0, 255, 65, 0.2)',
      display: 'flex', alignItems: 'center',
      padding: '0 16px',
      fontFamily: "'JetBrains Mono', monospace",
    }}>
      {/* Logo — tap to go home */}
      <div
        onClick={onHome}
        style={{
          width: 32, height: 32,
          border: '1px solid #00FF41',
          display: 'grid', placeItems: 'center',
          color: '#00FF41', fontWeight: 800, fontSize: 18,
          cursor: 'pointer', flexShrink: 0,
          minHeight: 44, minWidth: 44,
          /* 44px touch target via min dimensions, visual 32px via width/height */
        }}
      >
        #
      </div>

      {/* Current section */}
      <div style={{
        flex: 1, textAlign: 'center',
        fontSize: 13, letterSpacing: '0.12em',
        color: '#00FF41', fontWeight: 600,
      }}>
        <span style={{ color: '#6E6E6E' }}>operator:</span>{sectionLabel}
      </div>

      {/* Status dot — online indicator */}
      <div style={{
        width: 8, height: 8, borderRadius: '50%',
        background: '#00FF41',
        boxShadow: '0 0 6px rgba(0, 255, 65, 0.6)',
        flexShrink: 0,
      }} />
    </header>
  );
};

window.MobileHeader = MobileHeader;