Battle Royale Prototype

export default function FortniteStyleBattleRoyale() {
  return (
    <div className="min-h-screen bg-zinc-950 text-white p-8 font-sans">
      <div className="max-w-6xl mx-auto space-y-8">
        <div className="text-center space-y-4">
          <h1 className="text-5xl font-black tracking-tight">Battle Royale Prototype</h1>
          <p className="text-zinc-400 text-lg max-w-3xl mx-auto">
            A lightweight Fortnite-inspired game concept built in React. This prototype includes:
            shrinking storm mechanics, player stats, loot rarity, eliminations, and a stylized map UI.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 bg-zinc-900 rounded-3xl p-4 shadow-2xl border border-zinc-800 relative overflow-hidden">
            <div className="aspect-video rounded-2xl bg-gradient-to-br from-green-700 via-green-900 to-black relative overflow-hidden">
              <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top,_white,_transparent_40%)]"></div>

              <div className="absolute top-6 left-6 bg-purple-500/20 border border-purple-400 px-4 py-2 rounded-xl backdrop-blur">
                <p className="font-bold">Storm Closing In</p>
                <p className="text-sm text-purple-200">0:43 remaining</p>
              </div>

              <div className="absolute bottom-6 left-6 w-24 h-24 bg-blue-500/20 border-4 border-blue-400 rounded-full animate-pulse"></div>

              <div className="absolute bottom-16 left-20 w-8 h-8 rounded-full bg-cyan-300 shadow-[0_0_20px_#67e8f9]"></div>

              <div className="absolute top-1/2 right-1/3 w-6 h-6 rounded-full bg-red-500 shadow-[0_0_20px_#ef4444]"></div>

              <div className="absolute bottom-10 right-10 bg-black/60 backdrop-blur p-4 rounded-2xl border border-zinc-700 w-64">
                <div className="space-y-3">
                  <div>
                    <div className="flex justify-between text-sm mb-1">
                      <span>Health</span>
                      <span>100</span>
                    </div>
                    <div className="h-3 rounded-full bg-zinc-700 overflow-hidden">
                      <div className="h-full w-full bg-green-400"></div>
                    </div>
                  </div>

                  <div>
                    <div className="flex justify-between text-sm mb-1">
                      <span>Shield</span>
                      <span>75</span>
                    </div>
                    <div className="h-3 rounded-full bg-zinc-700 overflow-hidden">
                      <div className="h-full w-3/4 bg-cyan-400"></div>
                    </div>
                  </div>

                  <div className="grid grid-cols-5 gap-2 pt-2">
                    {['AR', 'Shotgun', 'SMG', 'Med', 'Sniper'].map((item) => (
                      <div
                        key={item}
                        className="aspect-square rounded-lg bg-yellow-500/20 border border-yellow-400 text-[10px] flex items-center justify-center text-center p-1"
                      >
                        {item}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            <div className="bg-zinc-900 border border-zinc-800 rounded-3xl p-6 shadow-xl">
              <h2 className="text-2xl font-bold mb-4">Match Stats</h2>

              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-zinc-400">Players Remaining</span>
                  <span className="font-bold text-2xl">12</span>
                </div>

                <div className="flex justify-between items-center">
                  <span className="text-zinc-400">Eliminations</span>
                  <span className="font-bold text-2xl text-red-400">5</span>
                </div>

                <div className="flex justify-between items-center">
                  <span className="text-zinc-400">Damage</span>
                  <span className="font-bold text-2xl text-orange-400">1,248</span>
                </div>

                <div className="flex justify-between items-center">
                  <span className="text-zinc-400">Placement</span>
                  <span className="font-bold text-2xl text-cyan-400">#12</span>
                </div>
              </div>
            </div>

            <div className="bg-zinc-900 border border-zinc-800 rounded-3xl p-6 shadow-xl">
              <h2 className="text-2xl font-bold mb-4">Loot Rarity</h2>

              <div className="space-y-3">
                {[
                  { name: 'Common', color: 'bg-zinc-400', count: 12 },
                  { name: 'Rare', color: 'bg-blue-500', count: 8 },
                  { name: 'Epic', color: 'bg-purple-500', count: 5 },
                  { name: 'Legendary', color: 'bg-yellow-400', count: 2 },
                ].map((loot) => (
                  <div key={loot.name} className="space-y-1">
                    <div className="flex justify-between text-sm">
                      <span>{loot.name}</span>
                      <span>{loot.count}</span>
                    </div>
                    <div className="h-2 bg-zinc-800 rounded-full overflow-hidden">
                      <div
                        className={`h-full ${loot.color}`}
                        style={{ width: `${loot.count * 8}%` }}
                      ></div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="bg-zinc-900 border border-zinc-800 rounded-3xl p-8 shadow-xl">
          <h2 className="text-3xl font-bold mb-4">How To Expand This Into A Real Game</h2>

          <div className="grid md:grid-cols-2 gap-6 text-zinc-300">
            <div className="space-y-3">
              <h3 className="text-xl font-semibold text-white">Gameplay Systems</h3>
              <ul className="list-disc pl-5 space-y-2">
                <li>Add real player movement with Three.js or Unity.</li>
                <li>Create procedural loot spawning.</li>
                <li>Implement building mechanics and destruction physics.</li>
                <li>Add online multiplayer using WebSockets or Photon.</li>
              </ul>
            </div>

            <div className="space-y-3">
              <h3 className="text-xl font-semibold text-white">Visual Features</h3>
              <ul className="list-disc pl-5 space-y-2">
                <li>Use animated character models and emotes.</li>
                <li>Add dynamic lighting and weather.</li>
                <li>Create a large explorable island map.</li>
                <li>Build a battle pass and cosmetic system.</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}