Brutalist_Industrial_Notifications_Component

<div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-start justify-center">
  <div class="w-full max-w-6xl bg-red-600 dark:bg-red-800 border-4 border-solid border-amber-900 dark:border-amber-700 shadow-brutal dark:shadow-brutal-dark p-4 sm:p-6 md:p-8 relative overflow-hidden">
    <!-- Top brutalist border/bar -->
    <div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
    <div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>

    <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold uppercase text-amber-100 dark:text-amber-200 mb-6 sm:mb-8 tracking-wider text-shadow-brutal dark:text-shadow-brutal-darker pt-4">
      <span class="block transform -skew-x-6 inline-block bg-amber-900 dark:bg-red-900 px-4 py-2 border-2 border-amber-500 dark:border-amber-600">System Alerts</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 md:gap-10 pb-4">
      <!-- Left Filter/Controls Panel -->
      <div class="md:col-span-1 bg-amber-900 dark:bg-red-900 p-4 sm:p-6 border-4 border-solid border-amber-700 dark:border-amber-600 space-y-6">
        <div class="flex items-center justify-between text-amber-100 dark:text-amber-200 mb-4">
          <h3 class="text-xl md:text-2xl font-bold uppercase tracking-wider">Filter</h3>
          <button class="px-3 py-1 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-sm transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
            Reset
          </button>
        </div>

        <!-- Filter Options -->
        <div>
          <label for="alert-type" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Severity:</label>
          <select id="alert-type" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
            <option value="all">All</option>
            <option value="critical">Critical</option>
            <option value="warning">Warning</option>
            <option value="info">Info</option>
          </select>
        </div>

        <div>
          <label for="status" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Status:</label>
          <select id="status" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
            <option value="all">All</option>
            <option value="new">New</option>
            <option value="acknowledged">Acknowledged</option>
            <option value="resolved">Resolved</option>
          </select>
        </div>

        <div class="flex items-center">
          <input id="show-archived" type="checkbox" class="h-5 w-5 text-amber-500 dark:text-orange-500 bg-amber-800 dark:bg-red-800 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring-amber-400 dark:focus:ring-orange-500">
          <label for="show-archived" class="ml-2 text-amber-200 dark:text-amber-300 uppercase text-sm font-bold">Show Archived</label>
        </div>

        <button class="w-full px-4 py-2 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-lg transform skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200 mt-4 md:mt-6">
          Apply Filters
        </button>
      </div>

      <!-- Main Notifications List -->
      <div class="md:col-span-2 space-y-6 sm:space-y-8">
        <!-- Notification Card 1: Critical -->
        <div class="bg-orange-400 dark:bg-orange-600 p-4 sm:p-5 border-4 border-solid border-red-900 dark:border-red-700 transform rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
          <div class="absolute -top-3 -right-3 text-red-900 dark:text-red-950 text-6xl opacity-20 transform rotate-45 font-black z-0">!</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-red-900 dark:text-red-950 mb-2 border-l-4 border-red-900 dark:border-red-950 pl-3 leading-tight">CRITICAL: Machine ID 789-A Shutdown</h4>
            <p class="text-red-800 dark:text-red-900 text-sm sm:text-base mb-3">Main hydraulic pump pressure failure detected. Immediate attention required to prevent further system damage.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-red-700 dark:text-red-800 mb-3">
              <span class="font-semibold">Source: Assembly Line 3</span>
              <span class="truncate">Timestamp: 2024-07-26 14:35 UTC</span>
            </div>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
                Acknowledge
              </a>
              <a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
                View Details
              </a>
            </div>
          </div>
        </div>

        <!-- Notification Card 2: Warning -->
        <div class="bg-amber-500 dark:bg-amber-700 p-4 sm:p-5 border-4 border-solid border-orange-900 dark:border-orange-700 transform -rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
          <div class="absolute -bottom-3 -left-3 text-orange-900 dark:text-orange-950 text-6xl opacity-20 transform -rotate-45 font-black z-0">&#9763;</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-orange-900 dark:text-orange-950 mb-2 border-l-4 border-orange-900 dark:border-orange-950 pl-3 leading-tight">WARNING: Conveyor Belt 2 Speed Anomaly</h4>
            <p class="text-orange-800 dark:text-orange-900 text-sm sm:text-base mb-3">Fluctuations detected in Conveyor Belt 2 speed. Potential for material backlog. Monitor closely.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-orange-700 dark:text-orange-800 mb-3">
              <span class="font-semibold">Source: Logistics Hub</span>
              <span>Timestamp: 2024-07-26 15:10 UTC</span>
            </div>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
                Acknowledge
              </a>
              <a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
                View Details
              </a>
            </div>
          </div>
        </div>

        <!-- Notification Card 3: Info (Acknowledged/Resolved style) -->
        <div class="bg-red-700 dark:bg-red-900 p-4 sm:p-5 border-4 border-solid border-amber-800 dark:border-amber-600 filter grayscale opacity-75 transform rotate-2 shadow-brutal-inner dark:shadow-brutal-inner-dark relative">
          <div class="absolute -top-3 -left-3 text-amber-900 dark:text-orange-950 text-6xl opacity-20 transform rotate-12 font-black z-0">i</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-amber-100 dark:text-amber-200 mb-2 border-l-4 border-amber-100 dark:border-amber-200 pl-3 leading-tight">INFO: Firmware Update Completed for Robot Arm 5</h4>
            <p class="text-amber-200 dark:text-amber-300 text-sm sm:text-base mb-3">Scheduled firmware update for Robot Arm 5 in Welding Station 1 completed successfully.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-amber-300 dark:text-amber-400">
              <span class="font-semibold">Source: IT Department</span>
              <span>Timestamp: 2024-07-25 09:00 UTC</span>
            </div>
            <div class="mt-4 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <span class="inline-block px-4 py-2 bg-orange-800 dark:bg-amber-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-100 dark:border-amber-200 transform -skew-x-3 flex-grow text-center">Status: Resolved</span>
            </div>
          </div>
        </div>

        <!-- Empty State / Load More -->
        <div class="text-center py-8 bg-amber-900 dark:bg-red-900 border-4 border-solid border-amber-700 dark:border-amber-600 text-amber-100 dark:text-amber-200 font-bold uppercase tracking-widest text-lg sm:text-xl transform skew-y-1 mt-8">
          <button class="px-6 py-3 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-base sm:text-lg transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
            Load More Alerts
          </button>
        </div>
      </div>
    </div>

    <!-- Bottom brutalist border/bar -->
    <div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
    <div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>

  </div>
</div>

<style>
  /* Custom shadow for brutalism effect */
  .shadow-brutal {
    box-shadow: 12px 12px 0px rgba(120, 53, 15, 0.8);
  }
  .dark\:shadow-brutal-dark {
    box-shadow: 12px 12px 0px rgba(69, 21, 21, 0.8);
  }
  .shadow-brutal-inner {
    box-shadow: inset 5px 5px 0px rgba(120, 53, 15, 0.6);
  }
  .dark\:shadow-brutal-inner-dark {
    box-shadow: inset 5px 5px 0px rgba(69, 21, 21, 0.6);
  }

  /* Text shadow for brutalism */
  .text-shadow-brutal {
    text-shadow: 4px 4px 0px rgba(120, 53, 15, 0.6);
  }
  .dark\:text-shadow-brutal-darker {
    text-shadow: 4px 4px 0px rgba(69, 21, 21, 0.6);
  }
</style>