// room.jsx — Original SVG doomer-room scene with parallax + clickable hotspots.
// Hand-drawn original art. No copyrighted Wojak imagery.

function DoomerRoom({ onSelect }) {
  const wrapRef = React.useRef(null);
  const sceneRef = React.useRef(null);

  React.useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      const cx = e.clientX - r.left - r.width / 2;
      const cy = e.clientY - r.top - r.height / 2;
      const tx = (cx / r.width) * -16;
      const ty = (cy / r.height) * -10;
      if (sceneRef.current) {
        sceneRef.current.style.transform = `translate(${tx}px, ${ty}px)`;
      }
    };
    const onLeave = () => {
      if (sceneRef.current) sceneRef.current.style.transform = 'translate(0,0)';
    };
    wrap.addEventListener('mousemove', onMove);
    wrap.addEventListener('mouseleave', onLeave);
    return () => {
      wrap.removeEventListener('mousemove', onMove);
      wrap.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  // hotspots positioned as % of the SVG viewbox
  const hotspots = [
    { id: 'monitor', label: 'TOKENOMICS', x: 38, y: 28, w: 24, h: 22 },
    { id: 'cans',    label: 'COPE WALL',  x: 16, y: 75, w: 20, h: 14 },
    { id: 'mug',     label: 'ABOUT',      x: 64, y: 78, w: 14, h: 12 },
    { id: 'papers',  label: 'ROADMAP',    x: 72, y: 60, w: 18, h: 14 },
    { id: 'phone',   label: 'HOW TO BUY', x: 38, y: 60, w: 12, h: 10 },
  ];

  return (
    <div className="room-wrap" ref={wrapRef}>
      <div className="room-scene" ref={sceneRef} style={{ width: '100%', height: '100%' }}>
        <svg viewBox="0 0 800 560" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
          <defs>
            <radialGradient id="roomLight" cx="50%" cy="38%" r="55%">
              <stop offset="0%" stopColor="oklch(0.35 0.18 25)" stopOpacity="0.9"/>
              <stop offset="50%" stopColor="oklch(0.18 0.08 25)" stopOpacity="0.7"/>
              <stop offset="100%" stopColor="oklch(0.05 0.005 30)" stopOpacity="1"/>
            </radialGradient>
            <linearGradient id="floor" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.35 0.07 55)"/>
              <stop offset="100%" stopColor="oklch(0.18 0.05 50)"/>
            </linearGradient>
            <linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.1 0.005 30)"/>
              <stop offset="100%" stopColor="oklch(0.06 0.005 30)"/>
            </linearGradient>
            <pattern id="boards" width="60" height="560" patternUnits="userSpaceOnUse">
              <rect width="60" height="560" fill="url(#floor)"/>
              <line x1="60" y1="320" x2="60" y2="560" stroke="oklch(0.1 0.04 50)" strokeWidth="1"/>
            </pattern>
          </defs>

          {/* wall */}
          <rect x="0" y="0" width="800" height="380" fill="url(#wall)"/>
          {/* floor */}
          <polygon points="0,380 800,380 800,560 0,560" fill="url(#boards)"/>
          {/* baseboard */}
          <rect x="0" y="375" width="800" height="6" fill="oklch(0.12 0.03 50)"/>

          {/* red glow from monitor */}
          <ellipse cx="400" cy="280" rx="380" ry="220" fill="url(#roomLight)" opacity="0.85"/>

          {/* desk */}
          <rect x="260" y="290" width="320" height="14" fill="oklch(0.15 0.03 55)"/>
          <rect x="270" y="304" width="6" height="120" fill="oklch(0.12 0.03 55)"/>
          <rect x="564" y="304" width="6" height="120" fill="oklch(0.12 0.03 55)"/>

          {/* CRT monitor body */}
          <g>
            {/* base */}
            <rect x="340" y="280" width="120" height="10" fill="oklch(0.18 0.005 80)"/>
            {/* monitor */}
            <rect x="310" y="170" width="180" height="120" rx="8" fill="oklch(0.2 0.005 80)" stroke="oklch(0.3 0.005 80)" strokeWidth="1"/>
            {/* screen */}
            <rect x="324" y="184" width="152" height="92" rx="3" fill="oklch(0.06 0.02 25)"/>
            {/* crashing chart drawn into screen */}
            <g clipPath="url(#sc)">
              <defs>
                <clipPath id="sc"><rect x="324" y="184" width="152" height="92"/></clipPath>
              </defs>
              {/* descending candles */}
              {[...Array(18)].map((_, i) => {
                const x = 326 + i * 8;
                const baseY = 200 + i * 3.4;
                const h = 6 + (i % 3) * 4;
                return (
                  <g key={i}>
                    <line x1={x+2} y1={baseY-3} x2={x+2} y2={baseY+h+3} stroke="oklch(0.58 0.22 25)" strokeWidth="0.7"/>
                    <rect x={x} y={baseY} width="4" height={h} fill="oklch(0.58 0.22 25)"/>
                  </g>
                );
              })}
              <line x1="324" y1="270" x2="476" y2="270" stroke="oklch(0.58 0.22 25)" strokeDasharray="2,2" strokeWidth="0.5" opacity="0.7"/>
            </g>
            {/* power led */}
            <circle cx="478" cy="284" r="2" fill="oklch(0.7 0.22 25)"/>
            {/* monitor brand placeholder */}
            <rect x="380" y="280" width="40" height="3" fill="oklch(0.3 0.005 80)"/>
          </g>

          {/* keyboard */}
          <rect x="320" y="306" width="160" height="20" rx="2" fill="oklch(0.22 0.005 80)"/>
          {[...Array(12)].map((_, i) => (
            <rect key={i} x={326 + i * 12} y={310} width="9" height="6" rx="1" fill="oklch(0.16 0.005 80)"/>
          ))}
          {[...Array(12)].map((_, i) => (
            <rect key={i} x={326 + i * 12} y={318} width="9" height="6" rx="1" fill="oklch(0.16 0.005 80)"/>
          ))}

          {/* phone (face down, screen on) */}
          <g>
            <rect x="296" y="328" width="46" height="80" rx="6" fill="oklch(0.08 0 0)" stroke="oklch(0.2 0 0)" strokeWidth="1"/>
            <rect x="300" y="332" width="38" height="68" rx="3" fill="oklch(0.18 0.08 25)"/>
            <text x="319" y="368" textAnchor="middle" fontFamily="VT323, monospace" fontSize="10" fill="oklch(0.92 0.01 80)">UR EX</text>
            <text x="319" y="382" textAnchor="middle" fontFamily="VT323, monospace" fontSize="8" fill="oklch(0.85 0.01 80)">23 missed</text>
          </g>

          {/* scattered papers */}
          <g>
            <polygon points="580,360 660,355 670,400 590,408" fill="oklch(0.85 0.01 80)" opacity="0.8" transform="rotate(-8 625 380)"/>
            <polygon points="600,380 680,372 690,420 605,428" fill="oklch(0.8 0.02 60)" opacity="0.75" transform="rotate(6 645 400)"/>
            <line x1="595" y1="372" x2="660" y2="368" stroke="oklch(0.3 0 0)" strokeWidth="0.5"/>
            <line x1="595" y1="380" x2="655" y2="376" stroke="oklch(0.3 0 0)" strokeWidth="0.5"/>
            <line x1="600" y1="388" x2="650" y2="384" stroke="oklch(0.3 0 0)" strokeWidth="0.5"/>
            {/* red OVERDUE stamp */}
            <text x="620" y="395" fontFamily="'Press Start 2P', monospace" fontSize="7" fill="oklch(0.58 0.22 25)" opacity="0.85" transform="rotate(-12 620 395)">OVERDUE</text>
          </g>

          {/* beer cans */}
          <g>
            <ellipse cx="170" cy="465" rx="22" ry="6" fill="oklch(0.05 0 0)" opacity="0.5"/>
            <rect x="148" y="430" width="44" height="36" rx="3" fill="oklch(0.45 0.12 25)"/>
            <rect x="148" y="436" width="44" height="6" fill="oklch(0.92 0.01 80)"/>
            <rect x="148" y="430" width="44" height="3" fill="oklch(0.3 0.08 25)"/>
            <ellipse cx="170" cy="430" rx="22" ry="3" fill="oklch(0.5 0.12 25)"/>
            <text x="170" y="458" textAnchor="middle" fontFamily="'Press Start 2P', monospace" fontSize="6" fill="oklch(0.92 0.01 80)">COPE</text>

            <g transform="rotate(28 240 478)">
              <ellipse cx="240" cy="478" rx="18" ry="5" fill="oklch(0.05 0 0)" opacity="0.5"/>
              <rect x="222" y="450" width="36" height="28" rx="2" fill="oklch(0.4 0.1 60)"/>
              <ellipse cx="240" cy="450" rx="18" ry="2.5" fill="oklch(0.45 0.1 60)"/>
              <text x="240" y="470" textAnchor="middle" fontFamily="'Press Start 2P', monospace" fontSize="5" fill="oklch(0.92 0.01 80)">RUG LITE</text>
            </g>

            <g transform="rotate(-12 110 480)">
              <rect x="92" y="455" width="36" height="28" rx="2" fill="oklch(0.35 0.08 25)"/>
              <ellipse cx="110" cy="455" rx="18" ry="2.5" fill="oklch(0.4 0.08 25)"/>
            </g>
          </g>

          {/* overturned mug */}
          <g transform="rotate(48 540 470)">
            <rect x="520" y="448" width="40" height="44" rx="3" fill="oklch(0.3 0.005 80)"/>
            <rect x="520" y="448" width="40" height="6" fill="oklch(0.4 0.005 80)"/>
            <path d="M 558 458 q 12 8 0 22" fill="none" stroke="oklch(0.3 0.005 80)" strokeWidth="3"/>
          </g>
          {/* spilled liquid */}
          <ellipse cx="500" cy="490" rx="60" ry="10" fill="oklch(0.18 0.05 60)" opacity="0.7"/>

          {/* picture of family on wall, askew */}
          <g transform="rotate(-6 110 110)">
            <rect x="80" y="80" width="60" height="50" fill="oklch(0.2 0.02 60)" stroke="oklch(0.4 0.06 60)" strokeWidth="1"/>
            <rect x="84" y="84" width="52" height="42" fill="oklch(0.35 0.04 80)"/>
            {/* simplified figures, geometric */}
            <circle cx="100" cy="98" r="4" fill="oklch(0.65 0.05 60)"/>
            <rect x="96" y="103" width="8" height="14" fill="oklch(0.4 0.1 25)"/>
            <circle cx="120" cy="100" r="3" fill="oklch(0.65 0.05 60)"/>
            <rect x="117" y="104" width="6" height="12" fill="oklch(0.45 0.06 280)"/>
            <circle cx="113" cy="104" r="2" fill="oklch(0.65 0.05 60)"/>
            <rect x="111" y="107" width="4" height="9" fill="oklch(0.4 0.08 145)"/>
            {/* crack overlay */}
            <polyline points="84,108 100,90 110,118 132,96" fill="none" stroke="oklch(0.95 0 0)" strokeWidth="0.6" opacity="0.7"/>
          </g>

          {/* window with rain drops, just suggested */}
          <g>
            <rect x="640" y="60" width="120" height="100" fill="oklch(0.05 0.02 250)" stroke="oklch(0.18 0.005 30)" strokeWidth="1"/>
            <line x1="700" y1="60" x2="700" y2="160" stroke="oklch(0.18 0.005 30)" strokeWidth="1"/>
            <line x1="640" y1="110" x2="760" y2="110" stroke="oklch(0.18 0.005 30)" strokeWidth="1"/>
            {[[660,80],[680,95],[710,75],[730,100],[745,130],[665,140],[715,140]].map(([x,y],i)=>(
              <line key={i} x1={x} y1={y} x2={x-3} y2={y+8} stroke="oklch(0.4 0.01 250)" strokeWidth="0.7"/>
            ))}
          </g>

          {/* distant city / nothing */}

          {/* dust motes */}
          {[...Array(20)].map((_,i)=>(
            <circle key={i} cx={60+i*38} cy={140+(i%5)*40} r="0.7" fill="oklch(0.7 0.05 25)" opacity="0.4"/>
          ))}

          {/* placeholder note */}
          <text x="20" y="548" fontFamily="'VT323', monospace" fontSize="11" fill="oklch(0.4 0.005 80)" opacity="0.6">
            // placeholder room art — drop final illustration here
          </text>
        </svg>

        {/* clickable hotspots layer */}
        {hotspots.map((h) => (
          <button key={h.id} className="room-hotspot"
            onClick={() => onSelect(h.id)}
            style={{
              left: `${h.x}%`, top: `${h.y}%`,
              width: `${h.w}%`, height: `${h.h}%`,
              background: 'transparent', border: 'none',
            }}>
            <span className="room-tip">{h.label}</span>
          </button>
        ))}
      </div>

      <div style={{ position: 'absolute', bottom: 10, left: 12, fontFamily: "'Press Start 2P', monospace", fontSize: 7, color: 'var(--ink-faint)', letterSpacing: '0.1em', pointerEvents: 'none' }}>
        ◌ HOVER TO LOOK AROUND · CLICK OBJECTS
      </div>
    </div>
  );
}

window.DoomerRoom = DoomerRoom;