Live Stream Dashboard with Stats Sidebar

<section class="relative z-10 max-w-7xl md:px-8 mt-16 mr-auto ml-auto pr-6 pl-6">
  <div class="rounded-3xl border border-white/10 bg-white/[0.02] backdrop-blur overflow-hidden">
    <!-- Header -->
    <div class="px-6 py-6 border-b border-white/10">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="h-10 w-10 hover:bg-white/10 grid place-items-center transition group bg-white/5 border-white/10 border rounded-xl">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="telescope" class="lucide lucide-telescope w-5 h-5 text-white"><path d="m10.065 12.493-6.18 1.318a.934.934 0 0 1-1.108-.702l-.537-2.15a1.07 1.07 0 0 1 .691-1.265l13.504-4.44" class=""></path><path d="m13.56 11.747 4.332-.924" class=""></path><path d="m16 21-3.105-6.21" class=""></path><path d="M16.485 5.94a2 2 0 0 1 1.455-2.425l1.09-.272a1 1 0 0 1 1.212.727l1.515 6.06a1 1 0 0 1-.727 1.213l-1.09.272a2 2 0 0 1-2.425-1.455z" class=""></path><path d="m6.158 8.633 1.114 4.456" class=""></path><path d="m8 21 3.105-6.21" class=""></path><circle cx="12" cy="13" r="2" class=""></circle></svg>
          </div>
          <div class="">
            <h2 class="text-xl md:text-2xl font-semibold tracking-tight text-white/95">Live from Space</h2>
            <p class="text-sm text-white/60">Real-time observatory feeds</p>
          </div>
        </div>
        <span class="inline-flex items-center gap-2 hover:bg-white/10 transition text-sm font-medium text-white/80 bg-white/5 border-white/10 border rounded-xl pt-2 pr-4 pb-2 pl-4">
          <span class="h-1.5 w-1.5 rounded-full bg-red-400 animate-pulse"></span>
          LIVE
        </span>
      </div>
    </div>

    <!-- Content Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3">
      <!-- Main Featured Stream -->
      <div class="lg:col-span-2 relative group">
        <div class="aspect-video relative overflow-hidden bg-slate-900">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5b5ae7cb-627f-4f6c-99c8-84cc2bb08f45_1600w.jpg" alt="Jupiter observation" class="absolute inset-0 w-full h-full object-cover opacity-80" style="">
          <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent"></div>
          
          <!-- Stream Info Overlay -->
          <div class="absolute bottom-4 left-4 right-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="inline-flex items-center gap-1.5 rounded-full bg-purple-500/20 border border-purple-400/30 px-2 py-1 text-xs font-medium text-purple-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="radio" class="lucide lucide-radio w-3 h-3"><path d="M16.247 7.761a6 6 0 0 1 0 8.478" class=""></path><path d="M19.075 4.933a10 10 0 0 1 0 14.134" class=""></path><path d="M4.925 19.067a10 10 0 0 1 0-14.134" class=""></path><path d="M7.753 16.239a6 6 0 0 1 0-8.478" class=""></path><circle cx="12" cy="12" r="2" class=""></circle></svg>
                Hubble Live
              </span>
              <span class="text-xs text-white/60">2.3K viewers</span>
            </div>
            <h3 class="text-lg md:text-xl font-semibold tracking-tight text-white mb-1">Jupiter's Great Red Spot</h3>
            <p class="text-sm text-white/70">Capturing atmospheric dynamics in real-time infrared</p>
          </div>

          <!-- Play Button Overlay -->
          <button class="absolute inset-0 grid place-items-center group-hover:bg-black/20 transition">
            <div class="h-16 w-16 rounded-full bg-white/90 hover:bg-white grid place-items-center transition shadow-xl">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-6 h-6 text-slate-900 ml-1"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
            </div>
          </button>
        </div>
      </div>

      <!-- Side Panel -->
      <div class="border-l border-white/10">
        <!-- Active Observations -->
        <div class="p-6 border-b border-white/10">
          <h4 class="uppercase text-sm font-medium text-slate-50 tracking-wide mb-4">Active Observations</h4>
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-3">
                <div class="h-10 w-10 hover:bg-white/10 grid place-items-center transition group bg-white/5 border-white/10 border rounded-xl">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon" class="lucide lucide-moon w-4 h-4 text-white"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
                </div>
                <div>
                  <p class="text-sm font-medium text-white">Lunar Surface</p>
                  <p class="text-xs text-white/60">Mare Tranquillitatis</p>
                </div>
              </div>
              <span class="h-2 w-2 animate-pulse bg-slate-400 rounded-full"></span>
            </div>
            
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-3">
                <div class="h-10 w-10 hover:bg-white/10 grid place-items-center transition group bg-white/5 border-white/10 border rounded-xl">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sun" class="lucide lucide-sun w-4 h-4 text-white"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 2v2" class=""></path><path d="M12 20v2" class=""></path><path d="m4.93 4.93 1.41 1.41" class=""></path><path d="m17.66 17.66 1.41 1.41" class=""></path><path d="M2 12h2" class=""></path><path d="M20 12h2" class=""></path><path d="m6.34 17.66-1.41 1.41" class=""></path><path d="m19.07 4.93-1.41 1.41" class=""></path></svg>
                </div>
                <div class="">
                  <p class="text-sm font-medium text-white">Solar Activity</p>
                  <p class="text-xs text-white/60">Coronal mass ejection</p>
                </div>
              </div>
              <span class="h-2 w-2 animate-pulse bg-slate-400 rounded-full"></span>
            </div>

            <div class="flex items-center justify-between">
              <div class="flex items-center gap-3">
                <div class="h-10 w-10 hover:bg-white/10 grid place-items-center transition group bg-white/5 border-white/10 border rounded-xl">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-4 h-4 text-white"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                </div>
                <div class="">
                  <p class="text-sm font-medium text-white">Deep Space</p>
                  <p class="text-xs text-white/60">Andromeda Galaxy</p>
                </div>
              </div>
              <span class="h-2 w-2 animate-pulse bg-slate-50 rounded-full"></span>
            </div>
          </div>
        </div>

        <!-- Quick Stats -->
        <div class="p-6">
          <h4 class="uppercase text-sm font-medium text-slate-50 tracking-wide mb-4">Observatory Stats</h4>
          <div class="grid grid-cols-2 gap-4">
            <div class="">
              <p class="text-2xl font-semibold tracking-tight text-white">24/7</p>
              <p class="text-xs text-white/60 uppercase tracking-wide">Active Monitoring</p>
            </div>
            <div class="">
              <p class="text-2xl font-semibold tracking-tight text-white">8</p>
              <p class="text-xs text-white/60 uppercase tracking-wide">Live Feeds</p>
            </div>
            <div class="">
              <p class="text-2xl font-semibold tracking-tight text-white">4K</p>
              <p class="text-xs text-white/60 uppercase tracking-wide">Resolution</p>
            </div>
            <div class="">
              <p class="text-2xl font-semibold tracking-tight text-white">12</p>
              <p class="text-xs text-white/60 uppercase tracking-wide">Telescopes</p>
            </div>
          </div>
          
          <a href="#" class="w-full inline-flex items-center justify-center gap-2 hover:from-emerald-500 hover:to-emerald-400 transition shadow-emerald-500/20 text-sm font-medium text-white bg-gradient-to-t from-teal-500 to-emerald-400 border-emerald-50/10 border rounded-xl mt-6 pt-3 pr-4 pb-3 pl-4 shadow-lg">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="external-link" class="lucide lucide-external-link w-4 h-4"><path d="M15 3h6v6" class=""></path><path d="M10 14 21 3" class=""></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" class=""></path></svg>
            View All Streams
          </a>
        </div>
      </div>
    </div>
  </div>
</section>