360_Viewer_Component_Brutalism_Grayscale

<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-950 font-mono text-neutral-900 dark:text-neutral-100 transition-colors duration-300">
  <!-- Component Wrapper -->
  <div class="max-w-7xl mx-auto border-4 border-neutral-900 dark:border-neutral-100 p-4 sm:p-6 lg:p-8 bg-neutral-200 dark:bg-neutral-900 shadow-[8px_8px_0px_2px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_2px_rgba(255,255,255,1)]">
    <!-- Header -->
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b-4 border-neutral-900 dark:border-neutral-100">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold uppercase leading-none mb-2 sm:mb-0">360° Object <span class="hidden sm:inline">Viewer</span></h1>
      <div class="flex space-x-2">
        <button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Live Feed</button>
        <button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Settings</button>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Main Viewer Area -->
      <section class="lg:col-span-2 relative aspect-video bg-neutral-300 dark:bg-neutral-800 border-4 border-neutral-900 dark:border-neutral-100 overflow-hidden shadow-lg p-2 sm:p-4 md:p-6">
        <div class="absolute inset-0 flex items-center justify-center p-4">
          <img src="https://picsum.photos/1200/800?grayscale&random=1" alt="360 object view placeholder" class="w-full h-full object-contain filter grayscale border-2 border-neutral-600 dark:border-neutral-400">
        </div>
        <!-- Overlay Controls -->
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4 bg-neutral-900 dark:bg-neutral-100 bg-opacity-70 dark:bg-opacity-70 text-neutral-100 dark:text-neutral-900 flex justify-between items-center">
          <div class="flex space-x-2 sm:space-x-4">
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Left">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M11 2C6.03 2 2 6.03 2 11h3c0-3.87 3.13-7 7-7s7 3.13 7 7c0 1.93-.78 3.68-2.05 4.95L15.36 12H19v7h-7l2.84-2.84C10.71 18.29 8.91 19 7 19c-3.87 0-7-3.13-7-7c0-3.87 3.13-7 7-7zm-4 4h2v5h5v2h-7zm6 3l-3 3h3zm-3 8h-2v-5h-5v-2h7z" />
              </svg>
            </button>
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Right">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M13 2c4.97 0 9 4.03 9 9h-3c0-3.87-3.13-7-7-7s-7 3.13-7 7c0 1.93.78 3.68 2.05 4.95L8.64 12H5v7h7l-2.84-2.84C13.29 18.29 15.09 19 17 19c3.87 0 7-3.13 7-7c0-3.87-3.13-7-7-7zm4 4h-2v5h-5v2h7zm-6 3l3 3h-3zm3 8h2v-5h5v-2h-7z" />
              </svg>
            </button>
          </div>
          <div class="flex space-x-2 sm:space-x-4">
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Toggle Fullscreen">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M5 5h5v2H7v3H5zm14 0h-5v2h3v3h2zm-5 14h5v-2h-3v-3h-2zm-7 0H5v-2h3v-3h2z" />
              </svg>
            </button>
          </div>
        </div>
      </section>

      <!-- Side Panel: Stats & Controls -->
      <aside class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6 sm:gap-8">
        <!-- Object Details -->
        <section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
          <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Object Info</h2>
          <dl class="text-sm sm:text-base">
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">ID:</dt>
              <dd>OBJ-734X</dd>
            </div>
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">Type:</dt>
              <dd>Heavy Unit</dd>
            </div>
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">Status:</dt>
              <dd class="text-green-700 dark:text-green-400 font-bold">ONLINE</dd>
            </div>
            <div class="flex justify-between py-1">
              <dt class="font-bold">Last Scan:</dt>
              <dd>2023-10-27 14:30 UTC</dd>
            </div>
          </dl>
        </section>

        <!-- Control Panel -->
        <section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
          <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Actions</h2>
          <div class="grid grid-cols-1 gap-4">
            <button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-neutral-500 dark:hover:bg-neutral-500 transition-colors duration-200 shadow-md">Initiate Scan</button>
            <button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-negative-700 transition-colors duration-200 shadow-md">Deactivate Unit</button>
            <select class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 appearance-none shadow-md">
              <option>Select View Mode</option>
              <option>Wireframe</option>
              <option>Thermal</option>
              <option>X-Ray</option>
            </select>
          </div>
        </section>
      </aside>
    </div>

    <!-- Activity Log / Footer -->
    <section class="mt-8 p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
      <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Recent Activity</h2>
      <div class="space-y-2 text-sm sm:text-base max-h-48 overflow-y-auto pr-2">
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:35:01]</span> <span class="font-bold">SYSTEM:</span> User 'JOHN.DOE' requested full scan.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:34:20]</span> <span class="font-bold">ALERT:</span> Environmental anomaly detected. Severity LOW.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:30:00]</span> <span class="font-bold">REPORT:</span> Scan 'OBJ-734X' completed. No critical deviations.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:29:15]</span> <span class="font-bold">SYSTEM:</span> Object 'OBJ-734X' power cycle initiated.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:28:50]</span> <span class="font-bold">USER:</span> 'JANE.SMITH' logged in from Console 03.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:27:05]</span> <span class="font-bold">SYSTEM:</span> Module 'ALPHA-01' diagnostics complete. OK.</p>
      </div>
    </section>

    <!-- Dark Mode Toggle (Conceptual - outside core component) -->
    <div class="absolute top-4 right-4">
      <button class="px-3 py-2 text-sm font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
    </div>

  </div>
</div>