import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function RedRoomPage() {
  return (
    <ThemedLayout theme="dark" title="The Red Room Simulation">
      <div className="min-h-screen flex flex-col items-center justify-center text-red-600 font-mono p-8">
        <div className="max-w-3xl w-full border-4 border-red-900 p-12 bg-[#0a0000] shadow-[0_0_100px_rgba(255,0,0,0.2)]">
          <div className="text-center mb-12">
            <h1 className="text-6xl font-black tracking-tighter mb-4 animate-pulse">RED ROOM</h1>
            <p className="text-xs uppercase tracking-[1em] opacity-50">Live Stream Simulation</p>
          </div>

          <div className="relative aspect-video bg-black border-2 border-red-900 flex items-center justify-center overflow-hidden mb-8">
            <div className="absolute top-4 left-4 flex items-center gap-2">
              <div className="w-3 h-3 bg-red-600 rounded-full animate-ping" />
              <span className="text-xs font-bold">LIVE: 12,402 VIEWERS</span>
            </div>
            <div className="absolute top-4 right-4 text-[10px] opacity-40">
              03:24:12:08
            </div>
            
            <div className="text-center space-y-4">
              <div className="text-4xl opacity-20">NO SIGNAL</div>
              <div className="text-[10px] uppercase tracking-widest opacity-40">Waiting for next event...</div>
            </div>

            {/* Static Overlay */}
            <div className="absolute inset-0 opacity-10 pointer-events-none bg-[url('https://media.giphy.com/media/oEI9uWUqnW3CeEnwL6/giphy.gif')] bg-cover" />
          </div>

          <div className="grid grid-cols-2 gap-8 mb-12">
            <div className="space-y-4">
              <h3 className="text-xl font-bold border-b border-red-900/40 pb-2">VOTING</h3>
              <div className="flex justify-between items-center text-xs">
                <span>OPTION A: LIGHTS ON</span>
                <span className="font-bold">42%</span>
              </div>
              <div className="w-full h-1 bg-red-900/20">
                <div className="h-full bg-red-600 w-[42%]" />
              </div>
              <div className="flex justify-between items-center text-xs">
                <span>OPTION B: LIGHTS OFF</span>
                <span className="font-bold">58%</span>
              </div>
              <div className="w-full h-1 bg-red-900/20">
                <div className="h-full bg-red-600 w-[58%]" />
              </div>
            </div>
            <div className="space-y-4">
              <h3 className="text-xl font-bold border-b border-red-900/40 pb-2">BETTING</h3>
              <div className="text-[10px] opacity-60 leading-relaxed">
                Place your bets in BTC to influence the outcome. 
                Minimum bet: 0.005 BTC.
              </div>
              <button className="w-full bg-red-900/90 py-2 text-xs font-bold uppercase text-red-100 transition-all hover:bg-red-800">
                PLACE BET
              </button>
            </div>
          </div>

          <div className="text-[10px] text-red-900/40 leading-relaxed text-center italic">
            * This is a simulated interactive experience. No real harm is depicted. 
            All events are scripted for entertainment purposes.
          </div>
        </div>
      </div>
    </ThemedLayout>
  );
}