// Scene.jsx — the "besetztes Gym" room as an enclosing 2.5D atmospheric space.
// NOT a real 3D mesh (that's the code track) — a CSS perspective room that
// WRAPS the viewer: material back wall (concrete + real Sprossenwände + cracks
// + pipes/cables + layered posters/stickers/graffiti) meeting a vanishing-point
// floor at the horizon, with a mirror-ball throwing speckles, colored wash
// lights and haze. Verfall trifft Feier.

// deterministic speckle field (mirror-ball reflections on wall + floor)
const GY_SPECKLES = Array.from({ length: 46 }).map((_, i) => {
  const r = (n) => ((Math.sin(i * 12.9898 + n * 78.233) * 43758.5453) % 1 + 1) % 1;
  return {
    left: (r(1) * 100).toFixed(1),
    top: (r(2) * 100).toFixed(1),
    size: (1.5 + r(3) * 3).toFixed(1),
    col: ['#00ffff', '#ff00aa', '#ff7a00', '#ffffff'][Math.floor(r(4) * 4)],
    delay: (r(5) * 3).toFixed(2),
  };
});

function Scene({ people, room }) {
  return (
    <div className="gy-scene" role="img" aria-label={'Raum ' + room.name}>
      <div className="gy-room">

        {/* ---- BACK WALL (above horizon): concrete + material ---- */}
        <div className="gy-wall">
          <div className="gy-wall-grain" aria-hidden="true" />
          <div className="gy-crack gy-crack-1" aria-hidden="true" />
          <div className="gy-crack gy-crack-2" aria-hidden="true" />
          {/* real Sprossenwand — vertical posts + horizontal rungs */}
          <div className="gy-sprossen" aria-hidden="true">
            <span /><span /><span /><span />
          </div>
          {/* exposed pipe + drooping cable */}
          <div className="gy-pipe" aria-hidden="true" />
          <div className="gy-cable" aria-hidden="true" />
          {/* layered posters + stickers (generic, no real flyers) */}
          <div className="gy-poster gy-poster-1" aria-hidden="true"><span>OPEN<br/>AIR</span></div>
          <div className="gy-poster gy-poster-2" aria-hidden="true"><span>🌀</span></div>
          <div className="gy-sticker gy-sticker-1" aria-hidden="true">RAVE ON</div>
          <div className="gy-sticker gy-sticker-2" aria-hidden="true">🪩 124</div>
          {/* graffiti tags */}
          <div className="gy-tag gy-tag-1">🌀 aufnpunkt woz hier</div>
          <div className="gy-tag gy-tag-2">SQUAT&nbsp;&amp;&nbsp;FEIER</div>
          <div className="gy-neonstrip" aria-hidden="true" />
        </div>

        {/* ---- FLOOR (below horizon): vanishing-point grid ---- */}
        <div className="gy-floor" aria-hidden="true" />
        <div className="gy-horizon" aria-hidden="true" />

        {/* ---- LIGHT: wash beams + haze ---- */}
        <div className="gy-wash gy-wash-cyan" aria-hidden="true" />
        <div className="gy-wash gy-wash-magenta" aria-hidden="true" />
        <div className="gy-haze" aria-hidden="true" />

        {/* ---- mirror ball + its speckle reflections ---- */}
        <div className="gy-speckles" aria-hidden="true">
          {GY_SPECKLES.map((s, i) => (
            <span key={i} style={{
              left: s.left + '%', top: s.top + '%', width: s.size + 'px', height: s.size + 'px',
              background: s.col, boxShadow: `0 0 6px ${s.col}`, animationDelay: s.delay + 's',
            }} />
          ))}
        </div>
        <div className="gy-ball" aria-hidden="true">
          <div className="gy-ball-facets" />
          <div className="gy-ball-shine" />
        </div>

        {/* fairy lights string */}
        <div className="gy-fairy" aria-hidden="true">
          {Array.from({ length: 16 }).map((_, i) => <span key={i} style={{ left: (i / 15 * 100) + '%' }} />)}
        </div>

        {/* freaky instrument prompt in the room */}
        <button className="gy-instrument" title="Instrument spielen">
          <span className="gy-instr-glyph">🥁</span>
          <span className="gy-instr-hint">tap = spielen</span>
        </button>

        {/* avatars placed on the floor, scaled by depth */}
        <div className="gy-people">
          {people.map(p => (
            <div key={p.name} className="gy-person" style={{ left: p.x + '%', bottom: p.y + '%', transform: `scale(${p.s})`, zIndex: Math.round(p.s * 100) }}>
              <Avatar name={p.name} speaking={p.speaking} holdingStick={p.stick} muted={p.muted} size="md" />
              <div className="gy-shadow" style={{ opacity: 0.3 * p.s }} />
            </div>
          ))}
        </div>

        <div className="gy-vignette" aria-hidden="true" />
        <div className="gy-movehint t-mono">WASD + Maus · umsehen · Tap spielt</div>
      </div>
    </div>
  );
}
window.Scene = Scene;