Cyberpunk_Gaming_Maps_Component

<div class="p-4 md:p-8 bg-gray-950 dark:bg-black text-gray-200 min-h-screen font-mono">
    <div class="max-w-4xl mx-auto bg-gray-900 dark:bg-gray-950 border-2 border-fuchsia-600 dark:border-purple-700 shadow-2xl shadow-fuchsia-800/50 dark:shadow-purple-900/50 rounded-lg overflow-hidden relative">
        <!-- Neon Glitch Overlay -->
        <div class="absolute inset-0 z-0 opacity-10 blur-xl animate-pulse" style="background-image: linear-gradient(to right, #8A2BE2, #A020F0, #FF00FF);"></div>

        <div class="relative z-10 p-4 sm:p-6 md:p-8">
            <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-fuchsia-400 dark:text-purple-400 uppercase tracking-widest leading-tight border-b-2 border-fuchsia-700 dark:border-purple-600 pb-2">
                <span class="block text-xs text-fuchsia-600 dark:text-purple-500 mb-1">SYSTEM MAP</span>
                NEO-TOKYO SECTOR 7
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Map Placeholder -->
                <div class="order-2 md:order-1 bg-gray-800 dark:bg-gray-900 border border-fuchsia-700 dark:border-purple-700 rounded-md overflow-hidden relative group aspect-video sm:aspect-[4/3] md:aspect-square lg:aspect-video">
                    <img src="https://picsum.photos/id/237/600/400?grayscale&blur=2" alt="Cyberpunk Map Grid" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-900/30 via-purple-700/20 to-indigo-900/30 opacity-70 group-hover:opacity-90 transition-opacity duration-300"></div>
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <span class="text-fuchsia-300 dark:text-purple-300 text-6xl md:text-8xl font-black opacity-10 select-none">MAP</span>
                    </div>
                    <div class="absolute top-2 left-2 text-fuchsia-400 dark:text-purple-400 text-sm md:text-base">[23:45:01] GRID: A-7</div>
                    <div class="absolute bottom-2 right-2 flex space-x-2">
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">+</button>
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">-</button>
                    </div>
                </div>

                <!-- Map Controls/Info -->
                <div class="order-1 md:order-2 space-y-4">
                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">NAVIGATION</h3>
                        <div class="flex flex-wrap gap-2">
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">TARGET</span> SECTOR A
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">PING</span> LOCATION
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">ROUTE</span> OPTIMIZE
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">ACTIVE DATASTREAM</h3>
                        <p class="text-xs text-gray-400 leading-relaxed">
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> INCOMING ENCRYPTED TRANSMISSION #0XF3C.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> LOCAL GRID STATUS: STABLE. TRAFFIC FLOW NORM <span class="text-green-400">[OPTIMAL]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> ANOMALY DETECTED: SECTOR 7-B. <span class="text-yellow-400">[INVESTIGATE]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> SYSTEM HEALTH: <span class="text-fuchsia-400 dark:text-purple-400">98%</span>. DIAGNOSTICS COMPLETE.
                        </p>
                        <div class="mt-3 flex justify-end">
                            <button class="px-4 py-2 bg-fuchsia-900 dark:bg-purple-900 text-fuchsia-300 dark:text-purple-300 text-sm rounded-sm hover:bg-fuchsia-800 dark:hover:bg-purple-800 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
                                CLEAR LOG
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">WAYPOINTS</h3>
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></span>
                        <span>HQ: 12.4km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-blue-600 rounded-full"></span>
                        <span>DATANODE ALPHA: 3.1km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-green-600 rounded-full"></span>
                        <span>SAFEZONE γ: 7.8km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-yellow-600 rounded-full animate-ping"></span>
                        <span class="text-yellow-400">UNKNOWN SIG: 0.5km</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>