360_Viewer_Component

<div class="min-h-screen bg-gradient-to-br from-orange-50 to-amber-100 p-4 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 flex items-center justify-center font-sans">
  <div class="w-full max-w-5xl rounded-3xl shadow-xl overflow-hidden backdrop-blur-sm bg-white/70 dark:bg-gray-700/70 dark:shadow-2xl dark:shadow-amber-900/30 transition-all duration-500 border border-amber-50 dark:border-gray-600">
    <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Left Sidebar (Product Details/Controls) -->
      <div class="lg:col-span-1 xl:col-span-1 bg-gradient-to-t from-orange-100 to-white p-6 dark:from-gray-800 dark:to-gray-900 border-r border-amber-100 dark:border-gray-700 space-y-6 flex flex-col justify-between">
        <div>
          <h2 class="text-3xl font-extrabold text-gray-800 dark:text-amber-200 mb-2 leading-tight">Next-Gen VR Headset <span class="block text-xl font-semibold text-amber-600 dark:text-amber-400">A New Reality Awaits</span></h2>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience immersive virtual worlds with unparalleled clarity and comfort. Advanced haptics and spatial audio redefine entertainment.</p>

          <div class="space-y-3 mb-6">
            <div class="flex items-center text-gray-700 dark:text-gray-200">
              <svg class="w-5 h-5 mr-2 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.664 12.035a1 1 0 01.336 1.118l-.5 2A1 1 0 019 16h2a1 1 0 011 1v1a1 1 0 11-2 0v-.585l-.25-1A1 1 0 009.664 12.035zM12 9a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M9.293 8.293a1 1 0 011.414 0L12 9.586l1.293-1.293a1 1 0 011.414 1.414L13.414 11l1.293 1.293a1 1 0 01-1.414 1.414L12 12.414l-1.293 1.293a1 1 0 01-1.414-1.414L10.586 11l-1.293-1.293a1 1 0 010-1.414zM10 2a8 8 0 100 16 8 8 0 000-16zM2 10a8 8 0 1116 0 8 8 0 01-16 0z" clip-rule="evenodd"></path></svg>
              <span>Resolution: 4K per eye</span>
            </div>
            <div class="flex items-center text-gray-700 dark:text-gray-200">
              <svg class="w-5 h-5 mr-2 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
              <span>Refresh Rate: 120Hz</span>
            </div>
            <div class="flex items-center text-gray-700 dark:text-gray-200">
              <svg class="w-5 h-5 mr-2 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              <span>Connectivity: Wireless & USB-C</span>
            </div>
          </div>
        </div>

        <!-- Controls -->
        <div class="mt-auto space-y-4">
          <button class="w-full flex items-center justify-center px-4 py-3 rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 text-white font-semibold shadow-lg hover:from-amber-600 hover:to-orange-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800 transition-all duration-300 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553L16.25 6H5.953L5.477 3H3zM9 18a1 1 0 100-2 1 1 0 000 2zm7 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
            Buy Now
          </button>
          <button class="w-full flex items-center justify-center px-4 py-3 rounded-xl bg-gray-200 text-gray-700 font-semibold shadow-md hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 dark:focus:ring-gray-600 transition-all duration-300 border border-gray-300 dark:border-gray-500 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            View in AR
          </button>
        </div>
      </div>

      <!-- Main 360 Viewer Area -->
      <div class="lg:col-span-2 xl:col-span-3 h-[400px] sm:h-[500px] lg:h-[600px] relative overflow-hidden bg-gradient-to-r from-amber-50 dark:from-gray-700 to-orange-50 dark:to-gray-600 flex items-center justify-center">
        <div class="absolute inset-0 bg-contain bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
        
        <div class="absolute inset-0 backdrop-blur-sm bg-gradient-to-tr from-black/5 to-transparent flex items-center justify-center">
          <div class="relative w-48 h-48 sm:w-64 sm:h-64 lg:w-80 lg:h-80 rounded-full bg-gradient-to-br from-amber-300/80 to-orange-400/80 dark:from-amber-600/80 dark:to-orange-700/80 animate-pulse-slow flex items-center justify-center shadow-lg">
            <div class="w-32 h-32 sm:w-48 sm:h-48 lg:w-64 lg:h-64 rounded-full border-4 border-white/50 dark:border-gray-300/50 flex items-center justify-center p-2">
              <img src="https://picsum.photos/400/400?random=2" alt="360 Product View Placeholder" class="w-full h-full object-cover rounded-full shadow-inner border border-white dark:border-gray-500">
            </div>
            <div class="absolute bottom-4 right-4 flex items-center bg-gray-800/80 text-white px-3 py-1 rounded-full text-xs sm:text-sm shadow-md backdrop-blur-sm">
              <svg class="w-4 h-4 mr-1 text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 7C2.9 7 2 7.9 2 9v6h16V9c0-1.1-.9-2-2-2H4zm0 2h16c.3 0 .6-.1.8-.4.2-.3.2-.6 0-.9-.2-.3-.5-.4-.8-.4H4c-.3 0-.6.1-.8.4-.2.3-.2.6 0 .9.2.3.5.4.8.4zM2 15a2 2 0 002 2h12a2 2 0 002-2v-6H2v6z" clip-rule="evenodd"></path><path d="M10 11a1 1 0 100 2 1 1 0 000-2z"></path></svg>
              360° View Ready
            </div>
          </div>
        </div>

        <!-- 360 Controls / Progress Bar -->
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 w-[calc(100%-48px)] max-w-lg">
          <div class="flex items-center space-x-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl px-5 py-3 rounded-full shadow-lg border border-amber-100 dark:border-gray-700">
            <button class="p-2 rounded-full bg-amber-500 text-white shadow-md hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.553 4.553A1 1 0 015.26 4H14.74a1 1 0 01.707.293l3.586 3.586a1 1 0 010 1.414l-3.586 3.586A1 1 0 0114.74 16H5.26a1 1 0 01-.707-.293L.967 11.707A1 1 0 01.967 10.293l3.586-3.586zM11 9a1 1 0 100 2h2a1 1 0 100-2h-2zm-6 2a1 1 0 100-2h2a1 1 0 100 2H5z" clip-rule="evenodd"></path></svg>
            </button>
            <div class="flex-1 h-2 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-600">
              <div class="h-full bg-gradient-to-r from-amber-400 to-orange-500 w-1/3 rounded-full transition-all duration-500 ease-out" style="width: 30%;"></div>
            </div>
            <button class="p-2 rounded-full bg-gray-200 text-gray-700 shadow-md hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 dark:focus:ring-gray-600 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 016 0v5a1 1 0 11-2 0V7a1 1 0 00-1-1h-1z" clip-rule="evenodd"></path></svg>
            </button>
            <button class="p-2 rounded-full bg-gray-200 text-gray-700 shadow-md hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 dark:focus:ring-gray-600 transition-colors duration-200 hidden sm:block">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 4a1 1 0 112 0 1 1 0 01-2 0zm5-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>

        <!-- Hotspot Indicators (example) -->
        <div class="absolute top-1/4 left-1/4 animate-bounce-slow flex items-center justify-center">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
          </span>
        </div>
        <div class="absolute bottom-1/3 right-1/4 animate-bounce-slow flex items-center justify-center">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
          </span>
        </div>

      </div>

    </div>
  </div>
</div>