360_viewer_component

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">

  <div class="w-full max-w-6xl rounded-lg shadow-xl overflow-hidden
              bg-gradient-to-br from-purple-800 to-indigo-900 dark:from-gray-800 dark:to-gray-900
              border-4 border-purple-900 dark:border-gray-700
              text-gray-100 dark:text-gray-200">

    <!-- Header & Controls -->
    <div class="p-4 sm:p-6 border-b-2 border-purple-900 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-200 dark:text-gray-100 uppercase tracking-wide">
        Product Viewer
      </h2>
      <div class="flex items-center space-x-3">
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
          <svg class="w-6 h-6 text-purple-200 dark:text-gray-300" 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>
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex flex-col lg:flex-row">
      <!-- 360 Viewer Section (Left/Top) -->
      <div class="lg:w-3/4 p-4 sm:p-6 lg:p-8 border-b-2 lg:border-b-0 lg:border-r-2 border-purple-900 dark:border-gray-700 relative">
        <div class="aspect-w-16 aspect-h-9 bg-gray-700 dark:bg-gray-800 rounded-lg overflow-hidden border-2 border-purple-700 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/id/1018/1200/675" alt="Product 360 view" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy">
          <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <svg class="w-16 h-16 text-white text-opacity-80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <!-- 360 Control Bar -->
        <div class="flex justify-center items-center mt-6 space-x-2">
          <button class="p-2 rounded-lg bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 text-purple-200 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <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="M15.707 15.707a1 1 0 01-1.414 0V9.414L10 12.586 6.707 9.414V15.707a1 1 0 01-1.414 0L.586 10l.585-.586a1 1 0 011.415 0L5 12.414v-5.828a1 1 0 112 0v5.828l2.586-2.586A1 1 0 0110 9a1 1 0 01.707.293L12 11.586V5.414a1 1 0 112 0v5.828l2.586-2.586a1 1 0 011.415 0l.585.586a1 1 0 010 1.414l-5 5z" clip-rule="evenodd"></path></svg>
          </button>
          <input type="range" min="0" max="359" value="180" class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-purple-600 dark:bg-gray-600 focus:outline-none
            [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-300 [&::-webkit-slider-thumb]:dark:bg-gray-300 [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:appearance-none
            [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-purple-300 [&::-moz-range-thumb]:dark:bg-gray-300 [&::-moz-range-thumb]:shadow-lg">
          <button class="p-2 rounded-lg bg-purple-700 hover:bg-purple-600 dark:bg-gray-700 dark:hover:bg-gray-600 transition duration-300 text-purple-200 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <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="M15.707 15.707a1 1 0 01-1.414 0V9.414L10 12.586 6.707 9.414V15.707a1 1 0 01-1.414 0L.586 10l.585-.586a1 1 0 011.415 0L5 12.414v-5.828a1 1 0 112 0v5.828l2.586-2.586A1 1 0 0110 9a1 1 0 01.707.293L12 11.586V5.414a1 1 0 112 0v5.828l2.586-2.586a1 1 0 011.415 0l.585.586a1 1 0 010 1.414l-5 5z" clip-rule="evenodd"></path></svg>
          </button>
        </div>

        <!-- Hotspots/Annotations (placeholder) -->
        <div class="absolute top-1/4 left-1/4 p-1.5 bg-purple-500 rounded-full cursor-pointer border-2 border-purple-300 z-10 animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div>
        <div class="absolute bottom-1/3 right-1/4 p-1.5 bg-purple-500 rounded-full cursor-pointer border-2 border-purple-300 z-10 animate-pulse">
            <div class="w-3 h-3 bg-white rounded-full"></div>
        </div>
      </div>

      <!-- Product Details & Controls (Right/Bottom) -->
      <div class="lg:w-1/4 p-4 sm:p-6 lg:p-8 flex flex-col gap-6">
        <div class="flex-1">
          <h3 class="text-2xl sm:text-3xl font-bold text-purple-100 dark:text-gray-100 mb-3">Industrial Cogwheel</h3>
          <p class="text-purple-200 dark:text-gray-300 text-sm mb-4 leading-relaxed tracking-wide">
            Crafted from reinforced steel, this cogwheel exhibits precise engineering and robust durability, ideal for heavy machinery applications.
          </p>
          
          <div class="text-lg mb-4">
            <span class="text-purple-300 dark:text-gray-400">Model ID:</span> <span class="font-semibold text-white dark:text-gray-200">XYZ789-A</span>
          </div>

          <div class="mb-6">
            <h4 class="text-xl font-semibold text-purple-200 dark:text-gray-200 mb-2">Key Features:</h4>
            <ul class="list-disc list-inside text-purple-200 dark:text-gray-300 text-sm space-y-1">
              <li>High-strength alloy construction</li>
              <li>Precision-machined teeth</li>
              <li>Corrosion-resistant coating</li>
              <li>Optimized for torque transfer</li>
            </ul>
          </div>
        </div>

        <div class="space-y-4">
          <button class="w-full flex items-center justify-center px-6 py-3 border-2 border-purple-600 dark:border-gray-600 rounded-lg text-lg font-bold uppercase
                         bg-purple-700 dark:bg-gray-700 text-purple-100 dark:text-gray-100
                         hover:bg-purple-600 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 10a7.001 7.001 0 00-6-6.93V4a1 1 0 00-2 0v.07A7.001 7.001 0 003 10a7.001 7.001 0 006 6.93V17a1 1 0 102 0v-.07z" clip-rule="evenodd"></path></svg>
            Request Quote
          </button>
          <button class="w-full flex items-center justify-center px-6 py-3 border-2 border-purple-500 dark:border-gray-500 rounded-lg text-lg font-bold uppercase
                         bg-transparent text-purple-200 dark:text-gray-200
                         hover:bg-purple-800 dark:hover:bg-gray-800 transition duration-300 transform hover:scale-105
                         focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
            Download Specs
          </button>
        </div>

      </div>
    </div>

  </div>

</div>