// Lobby.jsx — "besetzter Hausflur": pick a room and walk straight in.
// Passwörter ENTFERNT (User-Direktive) — alle Türen offen, kein Modal.
// Room names are generic building-spaces (atmosphere, not real venues).
const GYM_ROOMS = [
  { id: 'turnhalle', name: 'Turnhalle', sub: 'großer Floor · Sprossenwände', count: 6, live: true },
  { id: 'kesselraum', name: 'Kesselraum', sub: 'Downtempo · Beton & Hall', count: 3, live: true },
  { id: 'dachboden', name: 'Dachboden', sub: 'Chill · Lichterketten', count: 1, live: false },
  { id: 'keller',    name: 'Heizungskeller', sub: 'Techno · eng & heiß', count: 0, live: false },
];

function Lobby({ onEnterRoom }) {
  return (
    <div className="gy-lobby">
      <div className="gy-lobby-head">
        <div className="t-eyebrow">// besetztes gym · hausflur</div>
        <h1 className="gy-lobby-title">Komm rein.<br />Der Hausflur ist offen.</h1>
        <p className="gy-lobby-sub">
          Such dir eine Tür und geh rein — alles offen, kein Passwort. Drinnen triffst
          du das Kollektiv. Gather.town trifft Squat-Rave. 🪩
        </p>
      </div>
      <div className="gy-doors">
        {GYM_ROOMS.map(room => (
          <button key={room.id} className={'gy-door' + (room.live ? ' live' : '')} onClick={() => onEnterRoom(room)}>
            <div className="gy-door-top">
              <span className="gy-door-lock">🔓</span>
              {room.live
                ? <span className="gy-door-live"><span className="gy-dot" />{room.count} im Raum</span>
                : <span className="gy-door-empty">{room.count ? room.count + ' da' : 'leer'}</span>}
            </div>
            <div className="gy-door-name">{room.name}</div>
            <div className="gy-door-sub">{room.sub}</div>
            <div className="gy-door-cta">Eintreten →</div>
          </button>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { Lobby, GYM_ROOMS });