{{ define "main" }}
<div class="min-h-screen bg-[#181d29] flex flex-col items-center py-12">
  <div class="w-full max-w-5xl bg-[#232837] rounded-lg shadow-lg p-0 overflow-hidden">
    <div class="flex flex-col md:flex-row">
      <!-- Vertical Label -->
      <div class="flex flex-row md:flex-col items-center md:items-start justify-center bg-[#232837] px-4 py-6">
        <span class="text-white font-bold text-2xl md:text-3xl mb-2 md:mb-8" style="font-family: 'Poppins', serif; letter-spacing: 0.1em;">Featured ...</span>
        <span class="text-white font-bold text-3xl md:text-5xl tracking-widest md:rotate-[-90deg] md:mt-32 md:ml-[-2.5rem]" style="font-family: 'Poppins', serif;">PRODUCTION</span>
      </div>
      <!-- Main Video Feature -->
      <div class="flex-1 flex flex-col items-center justify-center p-6">
        <div class="w-full aspect-w-16 aspect-h-9 mb-4 rounded-lg overflow-hidden bg-black">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/uBCRzrkY9dY?si=AHjX0klnEEPEnr6V" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="w-full h-full"></iframe>
        </div>
      </div>
    </div>
    <!-- Behind the Scenes Section -->
    <div class="px-6 pb-8">
      <h2 class="text-white text-xl font-bold tracking-wide mt-4 mb-2" style="letter-spacing:0.1em;">BEHIND THE SCENES</h2>
      <div class="flex flex-row gap-2 overflow-x-auto mb-4">
        <img src="/images/production/bts1.jpg" class="h-32 rounded object-cover" alt="BTS 1">
        <img src="/images/production/bts2.jpg" class="h-32 rounded object-cover" alt="BTS 2">
        <img src="/images/production/bts3.jpg" class="h-32 rounded object-cover" alt="BTS 3">
        <img src="/images/production/bts4.jpg" class="h-32 rounded object-cover" alt="BTS 4">
        <img src="/images/production/bts5.jpg" class="h-32 rounded object-cover" alt="BTS 5">
      </div>
      <div class="text-gray-200 text-base mb-2">
        A production feature of LOWERCASE & SELF's music video 'Can't Say' off from the upcoming LOWERSELF album; with BTS content showcasing the creative process from start to finish.
      </div>
      <div class="text-gray-300 text-base">
        Check out the full video on LOWERCASE's <a href="https://www.youtube.com/@lowercaseofficial" class="underline text-blue-400 hover:text-blue-300" target="_blank">Youtube Page</a>
      </div>
    </div>
  </div>
</div>
<style>
  .aspect-w-16 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
  }
  .aspect-w-16 iframe, .aspect-w-16 video, .aspect-w-16 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
</style>
{{ end }}