360_viewer_component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-900 text-orange-200 min-h-screen font-sans antialiased dark:bg-gray-950 dark:text-orange-100">

  <!-- Component Container -->
  <div class="max-w-7xl mx-auto bg-gray-800 rounded-xl shadow-2xl overflow-hidden border border-orange-600/30 dark:bg-gray-900 dark:border-orange-700/40">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8">

      <!-- Left Panel: 360 Viewer Placeholder & Controls -->
      <div class="lg:col-span-2 space-y-6">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-400 tracking-tight leading-tight uppercase relative drop-shadow-lg">
          <span class="relative z-10">Cybernetic Flora: Mycelial Network</span>
          <span class="absolute inset-y-0 left-0 w-full h-full bg-orange-600 mix-blend-multiply opacity-10 rounded-lg blur-sm"></span>
        </h2>
        <p class="text-sm text-orange-300/80 font-mono tracking-widest uppercase">Lesson ID: NWRK-734-ALPHA</p>

        <!-- 360 Viewer Area -->
        <div class="relative w-full h-96 sm:h-[500px] bg-gray-950 rounded-lg overflow-hidden border border-orange-700 shadow-inner shadow-orange-900/30 group">
          <img src="https://picsum.photos/1200/800?grayscale&blur=5" alt="360 Degree View of Mycelial Network" class="absolute inset-0 w-full h-full object-cover opacity-30 group-hover:opacity-40 transition-opacity duration-300">
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-32 h-32 bg-orange-700 rounded-full flex items-center justify-center animate-pulse-slow border-2 border-orange-500 shadow-lg shadow-orange-500/50">
              <svg class="w-16 h-16 text-orange-300" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              </svg>
            </div>
            <p class="absolute bottom-8 text-orange-500 text-lg font-bold drop-shadow-md">360° INTERACTIVE VIEW</p>
          </div>
          <!-- Overlay for VR/AR indicators -->
          <div class="absolute top-4 right-4 bg-orange-800/60 text-orange-200 text-xs px-3 py-1 rounded-full flex items-center gap-1 backdrop-blur-sm shadow-md">
            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 1.5l-6 10.5 6 10.5 6-10.5zM12 4.14l-3.46 6.01L12 16.15l3.46-6.01z"/></svg>
            VR/AR Compatible
          </div>
        </div>

        <!-- Playback Controls -->
        <div class="flex flex-wrap items-center justify-center gap-4 bg-gray-700/60 p-4 rounded-lg border border-orange-800/50 dark:bg-gray-800/70">
          <button class="flex items-center space-x-2 text-orange-300 hover:text-orange-100 bg-orange-900/40 px-4 py-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            <span>Play</span>
          </button>
          <button class="flex items-center space-x-2 text-orange-300 hover:text-orange-100 bg-orange-900/40 px-4 py-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
              <span>Pause</span>
            </button>
          <div class="flex-grow h-2 bg-orange-900 rounded-full cursor-pointer group">
            <div class="w-1/2 h-full bg-orange-500 rounded-full relative group-hover:bg-orange-400 transition-colors duration-200">
              <div class="absolute -right-2 -top-1 w-4 h-4 bg-orange-300 rounded-full border-2 border-orange-100 group-hover:scale-125 transition-transform duration-200 shadow-lg"></div>
            </div>
          </div>
          <span class="text-orange-400 text-sm font-mono">01:23 / 03:45</span>
          <button class="text-orange-300 hover:text-orange-100 bg-orange-900/40 p-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
          </button>
          <button class="text-orange-300 hover:text-orange-100 bg-orange-900/40 p-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 12h-2v4h2v-4zm-4 0H5v6h10v-6zM3 4c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H3zm0 15V5h18l.01 14H3z"/></svg>
          </button>
        </div>
      </div>

      <!-- Right Panel: Information & Interactions -->
      <div class="space-y-6 lg:space-y-8">
        <!-- Description/Synopsis -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 space-y-3 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide">Overview Protocol</h3>
          <p class="text-sm text-orange-200/90 leading-relaxed">
            Explore the intricate bio-electrical pathways of the <span class="text-orange-400 font-semibold">Symbiotic Mycelial Network</span>. This interactive module details its energy transfer mechanisms, defensive protocols, and potential applications in bio-engineering. Navigate the 3D model to uncover hidden <span class="text-orange-400 font-semibold">anomalies</span> and <span class="text-orange-400 font-semibold">data nodes</span>.
          </p>
          <div class="flex flex-wrap gap-2 text-xs font-mono pt-2">
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#BIO-CYBER</span>
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#NEURAL-NET</span>
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#EDUCATIONAL</span>
          </div>
        </section>

        <!-- Hotspots/Interactive Elements -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 space-y-4 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide">Data Nodes & Anomalies</h3>
          <ul class="space-y-3">
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Anomaly A-1: Energetic Signature Spike</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+20XP</span>
            </li>
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-teal-500 rounded-full"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Data Node B-4: Mycelial Transport</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+15XP</span>
            </li>
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-purple-500 rounded-full"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Hotspot C-7: Biomass Conversion</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+10XP</span>
            </li>
          </ul>
        </section>

        <!-- User/Instructor Info -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide mb-4">Instructor Profile</h3>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Instructor Avatar" class="w-16 h-16 rounded-full border-2 border-orange-500 shadow-md shadow-orange-700/50">
            <div>
              <h4 class="text-lg font-bold text-orange-300">Dr. Elias Thorne</h4>
              <p class="text-sm text-orange-400 font-mono tracking-wide">Bio-Cybernetics Specialist</p>
              <a href="#" class="text-xs text-orange-500 hover:underline mt-1 inline-block">View His Courses <span class="transform rotate-45 inline-block ml-1">⟶</span></a>
            </div>
          </div>
          <p class="text-sm text-orange-200/90 mt-4 leading-relaxed">Dr. Thorne is a leading authority on synthetic biology and neural integration. His research focuses on sustainable bio-computational systems for post-collapse environments.</p>
        </section>
      </div>

    </div>
  </div>

  <!-- Footer/Credits (Optional, but adds to the theme) -->
  <footer class="mt-8 text-center text-xs text-orange-400/50">
    <p>© 2077 Axiom Educational Network. All Rights Reserved. // Unauthorized access detected: Neural trace established.</p>
  </footer>

</div>