// HUD.jsx — the in-room overlay: room bar, presence list, voice controls,
// and the meeting-ritual dock. Voice/rituals are the documented next phase —
// framed as "in Arbeit", the UI is the design layer.
function RoomBar({ room, onLeave }) {
  return (
    <div className="gy-bar">
      <div className="gy-bar-room">
        <span className="gy-dot live" />
        <span className="gy-bar-name">{room.name}</span>
        <span className="gy-bar-sub">{room.sub}</span>
      </div>
      <div className="gy-bar-actions">
        <a className="gy-leave gy-3d" href="room3d.html">🌀 3D-Raum →</a>
        <button className="gy-leave" onClick={onLeave}>← Hausflur</button>
      </div>
    </div>
  );
}

function Presence({ people }) {
  return (
    <div className="gy-presence">
      <div className="t-eyebrow">// im raum · {people.length}</div>
      <div className="gy-presence-list">
        {people.map(p => (
          <div key={p.name} className={'gy-pr' + (p.speaking ? ' speaking' : '')}>
            <span className="gy-pr-cap" style={{ background: hashColor(p.name) }} />
            <span className="gy-pr-name">{p.name}</span>
            <span className="gy-pr-state">{p.muted ? '🔇' : p.speaking ? '● spricht' : '🎙'}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function VoiceBar({ muted, onMute, ducking }) {
  return (
    <div className="gy-voice">
      <button className={'gy-mic' + (muted ? ' muted' : '')} onClick={onMute}>
        {muted ? '🔇 Mic an' : '🎙 Mic aus'}
      </button>
      <div className="gy-voice-meta">
        <span className="gy-chip">positional</span>
        <span className={'gy-chip' + (ducking ? ' hot' : '')}>{ducking ? 'ducking −6dB' : 'Betonhall'}</span>
        <span className="gy-chip">Voice = 7. Instrument</span>
      </div>
    </div>
  );
}

const GYM_RITUALS = [
  { id: 'stick', glyph: '🪄', label: 'Redestab', note: 'wer hält, spricht' },
  { id: 'vote',  glyph: '🎛️', label: 'Voting',   note: 'Einigkeit = Dur-Akkord' },
  { id: 'energy',glyph: '🥁', label: 'Energie',  note: 'Check an der Kick' },
  { id: 'clap',  glyph: '👏', label: 'Applaus',  note: 'Welle durch den Raum' },
];

function RitualDock({ active, onRitual, energy }) {
  return (
    <div className="gy-dock">
      <div className="t-eyebrow gy-dock-head">// meeting-rituale · in arbeit</div>
      <div className="gy-dock-row">
        {GYM_RITUALS.map(r => (
          <button key={r.id} className={'gy-ritual' + (active === r.id ? ' on' : '')} onClick={() => onRitual(r.id)}>
            <span className="gy-ritual-glyph">{r.glyph}</span>
            <span className="gy-ritual-label">{r.label}</span>
            <span className="gy-ritual-note">{r.note}</span>
            {r.id === 'energy' && (
              <span className="gy-energy"><span className="gy-energy-fill" style={{ width: energy + '%' }} /></span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { RoomBar, Presence, VoiceBar, RitualDock, GYM_RITUALS });