IndustrialVibrantMapsComponent

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Component Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-t-4 border-fuchsia-600 dark:border-fuchsia-500">

    <!-- Header Section -->
    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-0">
        Industrial Site Overview
      </h2>
      <div class="flex space-x-2">
        <button class="px-4 py-2 bg-fuchsia-600 dark:bg-fuchsia-500 text-white rounded-md text-sm font-semibold hover:bg-fuchsia-700 dark:hover:bg-fuchsia-600 transition duration-300">
          <i class="fas fa-plus mr-1"></i> Add Location
        </button>
        <button class="px-4 py-2 bg-teal-500 dark:bg-teal-400 text-white rounded-md text-sm font-semibold hover:bg-teal-600 dark:hover:bg-teal-500 transition duration-300">
          <i class="fas fa-filter mr-1"></i> Filter
        </button>
      </div>
    </div>

    <!-- Main Content Area - Map and Sidebar -->
    <div class="flex flex-col lg:flex-row">

      <!-- Map Section (Placeholder for actual map) -->
      <div class="relative flex-1 h-80 sm:h-96 lg:h-[600px] bg-gray-300 dark:bg-gray-950 flex items-center justify-center overflow-hidden border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/1000/700?random=1" alt="Industrial Map" class="absolute inset-0 w-full h-full object-cover opacity-80">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-800/60 via-indigo-800/60 to-cyan-800/60 dark:from-fuchsia-900/70 dark:via-indigo-900/70 dark:to-cyan-900/70"></div>
        <div class="relative z-10 p-4 text-center">
          <p class="text-white text-3xl sm:text-4xl font-bold drop-shadow-lg">Map View Placeholder</p>
          <p class="text-white text-lg mt-2 opacity-90">Interactive map integration goes here.</p>
        </div>
        <!-- Map Controls Placeholder -->
        <div class="absolute bottom-4 right-4 z-20 flex flex-col space-y-2">
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-plus"></i></button>
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-minus"></i></button>
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-location-arrow"></i></button>
        </div>

        <!-- Map Overlay Markers Placeholder -->
        <div class="hidden sm:block absolute top-1/3 left-1/4 -translate-x-1/2 -translate-y-1/2 bg-yellow-400 dark:bg-yellow-300 p-2 rounded-full shadow-lg text-xs font-bold text-gray-900 ring-4 ring-yellow-200 animate-pulse cursor-pointer hover:scale-110 transition"><i class="fas fa-warehouse mr-1"></i> Site A</div>
        <div class="absolute top-2/3 right-1/4 -translate-x-1/2 -translate-y-1/2 bg-red-500 dark:bg-red-400 p-2 rounded-full shadow-lg text-xs font-bold text-white ring-4 ring-red-200 animate-pulse cursor-pointer hover:scale-110 transition"><i class="fas fa-exclamation-triangle mr-1"></i> Incident X</div>
        <div class="hidden sm:block absolute bottom-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-green-500 dark:bg-green-400 p-2 rounded-full shadow-lg text-xs font-bold text-white ring-4 ring-green-200 cursor-pointer hover:scale-110 transition"><i class="fas fa-truck mr-1"></i> Depot B</div>
      </div>

      <!-- Sidebar / Details Section -->
      <div class="lg:w-96 p-4 sm:p-6 bg-gray-50 dark:bg-gray-800 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 overflow-y-auto max-h-[500px] lg:max-h-[600px]">

        <!-- Search and Filter -->
        <div class="mb-6">
          <label for="search-location" class="sr-only">Search Locations</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fas fa-search text-gray-400 dark:text-gray-500"></i>
            </div>
            <input type="text" id="search-location" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400 focus:border-transparent sm:text-sm" placeholder="Search locations...">
          </div>
        </div>

        <!-- Location List -->
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 border-b border-gray-200 dark:border-gray-600 pb-2">Active Sites</h3>

        <ul class="space-y-4">
          <!-- Location Item 1 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-yellow-500 dark:border-yellow-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-warehouse mr-2 text-yellow-500 dark:text-yellow-400"></i>Warehouse Alpha</h4>
              <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-800 px-2 py-1 rounded-full">Active</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">123 Industrial Rd, Metropolis, CA<br>Employees: 45 | Status: Operational</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 10m ago</span>
            </div>
          </li>

          <!-- Location Item 2 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-red-500 dark:border-red-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-flask mr-2 text-red-500 dark:text-red-400"></i>Chemical Plant Gamma</h4>
              <span class="text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-800 px-2 py-1 rounded-full">Alert</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">456 Toxic Ave, Gotham, NY<br>Employees: 60 | Status: Maintenance Required</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 2m ago</span>
            </div>
          </li>

          <!-- Location Item 3 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-blue-500 dark:border-blue-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-building mr-2 text-blue-500 dark:text-blue-400"></i>HQ Office Delta</h4>
              <span class="text-xs font-medium text-indigo-600 dark:text-indigo-400 bg-indigo-100 dark:bg-indigo-800 px-2 py-1 rounded-full">Online</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">789 Enterprise Blvd, Star City, CA<br>Employees: 120 | Status: Fully Staffed</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 30m ago</span>
            </div>
          </li>

          <!-- Location Item 4 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-green-500 dark:border-green-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-truck-moving mr-2 text-green-500 dark:text-green-400"></i>Logistics Hub Zeta</h4>
              <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-800 px-2 py-1 rounded-full">Active</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">101 Transit Way, Central City, FL<br>Employees: 75 | Status: High Traffic</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 15m ago</span>
            </div>
          </li>
        </ul>
        <!-- End Location List -->
      </div>
      <!-- End Sidebar -->

    </div>
    <!-- End Main Content Area -->

  </div>
  <!-- End Component Container -->

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">