{{ define "main" }}
<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
  <!-- Navigation -->
  {{ partial "nav.html" . }}

  <!-- Main Content -->
  <div class="py-16 px-4 sm:px-6 lg:px-8">
    <div class="max-w-5xl mx-auto space-y-24">

      {{/* Production Feature 1 */}}
      <div class="space-y-12 py-16 border-t border-gray-700">
      <div class="space-y-8">
        <div class="media-container">
          <iframe width="100%" height="315" src="https://www.youtube.com/embed/uBCRzrkY9dY" title="CAN'T SAY – LOWERCASE & SELF" frameborder="0" allowfullscreen class="w-full h-full video-frame"></iframe>
        </div>
        <div>
          <h2 class="text-white text-2xl font-bold mb-1">CAN'T SAY – LOWERCASE & SELF</h2>
          <p class="text-gray-400 text-sm mb-6">May 20, 2025</p>
          <div class="grid md:grid-cols-2 gap-8 text-gray-300">
            <div class="space-y-4">
              <h3 class="text-white font-semibold mb-2">Production Credits</h3>
              <p><strong>Director</strong><br>LOWERCASE & SELF</p>
              <p class="mt-2"><strong>Cinematographer</strong><br>EUGENE TWIEN</p>
              <p class="mt-2"><strong>Editor</strong><br>EUGENE TWIEN</p>
              <h3 class="text-white font-semibold mt-6 mb-2">Cast</h3>
              <ul class="list-disc list-inside space-y-1">
                <li>BIANCA ROMANO</li>
                <li>TYMIA BROWN</li>
                <li>HENRY LEE</li>              
              <h3 class="text-white font-semibold mt-6 mb-2">WRONG CROWD</h3>
              </ul>
            </div>
            <div class="space-y-4">
              <h3 class="text-white font-semibold mb-2">About the Project</h3>
              LOWERCASE and SELF release “Can’t Say,” a rebellious anthem centered on addictive vices and indulgence.  This the 1st lead single from LOWERCASE & SELF's upcoming album that introduces a narrative journey that will explore themes of reflection, awakening, and personal growth. LOWERSELF.           </div>
          </div>
        </div>
      </div>
      </div>

      {{/* Production Feature: Yellow Mellow Clawz – Spring 2025 */}}
      <div class="space-y-12 py-16 border-t border-gray-700">
      <div class="space-y-8">
        <div class="media-container rounded-lg overflow-hidden">
          <video 
            controls 
            preload="metadata" 
            poster="/vd2025/thumb.jpg" 
            class="w-full h-full object-cover video-frame"
            playsinline
          >
            <source src="/vd2025/main.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>

        <div>
          <h2 class="text-white text-2xl font-bold mb-1">Yellow Mellow Clawz – Valentine's Day 2025</h2>
          <p class="text-gray-400 text-sm mb-6">February 14, 2025</p>

          <div class="grid md:grid-cols-2 gap-8 text-gray-300">
            <div class="space-y-4">
              <h3 class="text-white font-semibold mb-2">Production Credits</h3>
              <p><strong>Director</strong><br>Sam Cloud</p>
              <p class="mt-2"><strong>Producer</strong><br>Yellow Mellow Clawz</p>
              <p class="mt-2"><strong>Editor</strong><br>TBD</p>

              <h3 class="text-white font-semibold mt-6 mb-2">Cast</h3>
              <ul class="list-disc list-inside space-y-1">
                <li>Featured Nail Models</li>
                <li>Yellow Mellow Team</li>
              </ul>
            </div>

            <div class="space-y-4">
              <h3 class="text-white font-semibold mb-2">About the Project</h3>
              <p>A bold new campaign capturing spring 2025 nail fashion with dramatic studio lighting, close-up detail shots, and behind-the-scenes creativity in full bloom.</p>

              <div class="mt-6">
                <h4 class="text-white text-lg font-semibold mb-2">Behind the Scenes</h4>
                <div class="relative w-full max-w-md mx-auto overflow-hidden rounded-lg space-y-4">
                  <div class="media-container">
                    <div class="slideshow-container">
                      {{ range $index := (seq 1 6) }}
                        <img 
                          src="/bts/vd2025/bts{{ $index }}-optimized.jpg" 
                          alt="Behind the Scenes {{ $index }}" 
                          class="w-full h-auto transition duration-700 ease-in-out slideshow-container img {{ if eq $index 1 }}active{{ end }}"
                          data-index="{{ $index }}"
                          loading="lazy">
                      {{ end }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

      {{/* Production Feature 2: Yellow Mellow Clawz – Valentine's Day 2024 */}}
      <div class="space-y-12 py-16 border-t border-gray-700">
      <div class="space-y-8">
        <div class="media-container rounded-lg overflow-hidden">
          <video 
            controls 
            preload="metadata" 
            poster="/vd2024/thumb.jpg" 
            class="w-full h-full object-cover video-frame"
            playsinline
          >
            <source src="/vd2024/main.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>

        <div>
          <h2 class="text-white text-2xl font-bold mb-1">Yellow Mellow Clawz – Valentine's Day 2024</h2>
          <p class="text-gray-400 text-sm mb-6">February 14, 2024</p>

          <div class="grid md:grid-cols-2 gap-8 text-gray-300">
            <div class="space-y-4">
              <h3 class="text-white font-semibold mb-2">Production Credits</h3>
              <p><strong>Director</strong><br>Sam Cloud</p>
              <p class="mt-2"><strong>Producer</strong><br>Yellow Mellow Clawz</p>
              <p class="mt-2"><strong>Editor</strong><br>Sam Cloud</p>

              <h3 class="text-white font-semibold mt-6 mb-2">Cast</h3>
              <ul class="list-disc list-inside space-y-1">
                <li>Yellow Mellow Team</li>
                <li>Valentine's Day Models</li>
              </ul>
            </div>

            <div class="space-y-4">
              <h3 class="text-white font-semibold mb-2">About the Project</h3>
              <p>A special Valentine's Day campaign for Yellow Mellow Clawz featuring bold looks, rich red tones, and stunning detail shots. Filmed in-studio with a focus on glamour and intimacy.</p>

              <div class="mt-6">
                <h4 class="text-white text-lg font-semibold mb-2">Behind the Scenes</h4>
                <div class="relative w-full max-w-md mx-auto overflow-hidden rounded-lg space-y-4">
                  <div class="media-container">
                    <div class="slideshow-container">
                      {{ range $index := (seq 1 6) }}
                        <img 
                          src="/bts/vd2024/bts{{ $index }}-optimized.jpg" 
                          alt="Behind the Scenes {{ $index }}" 
                          class="w-full h-auto transition duration-700 ease-in-out slideshow-container img {{ if eq $index 1 }}active{{ end }}"
                          data-index="{{ $index }}"
                          loading="lazy">
                      {{ end }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

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

<style>
  body {
    background: linear-gradient(270deg, #0f172a, #1e1b4b, #0a0f1c);
    background-size: 600% 600%;
    animation: gradientMove 30s ease infinite;
    color: #cbd5e1;
  }

  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .media-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    background: #000;
    transition: box-shadow 0.3s ease;
  }

  .media-container:hover {
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  }

  .media-container iframe,
  .media-container video,
  .media-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  video::-webkit-media-controls-panel {
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    transition: opacity 0.3s ease;
  }

  video::-webkit-media-controls-play-button,
  video::-webkit-media-controls-timeline,
  video::-webkit-media-controls-volume-slider {
    transition: opacity 0.2s ease;
  }

  video:hover::-webkit-media-controls-panel {
    opacity: 1;
  }

  .video-frame, video, .slideshow-container img {
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  }

  h2 {
    font-size: 1.75rem;
    letter-spacing: 0.5px;
  }

  h3 {
    color: #f8fafc;
    font-weight: 600;
  }

  p, li {
    color: #cbd5e1;
    line-height: 1.6;
  }

  .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;
  }
  .slideshow-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slideshow-container img {
    transition: opacity 0.6s ease-in-out;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
</style>

<script>
  const btsImages2024 = ["/vd2024/bts1.jpg", "/vd2024/bts2.jpg"];
  const btsImages2025 = ["/vd2025/bts1.jpg", "/vd2025/bts2.jpg"];
  let current2024 = 0;
  let current2025 = 0;

  const slideImg2024 = document.getElementById('bts-slide');
  const slideImg2025 = document.getElementById('bts-slide-2025');

  setInterval(() => {
    current2024 = (current2024 + 1) % btsImages2024.length;
    slideImg2024.style.opacity = 0;
    setTimeout(() => {
      slideImg2024.src = btsImages2024[current2024];
      slideImg2024.style.opacity = 1;
    }, 300);
  }, 3000);

  setInterval(() => {
    current2025 = (current2025 + 1) % btsImages2025.length;
    slideImg2025.style.opacity = 0;
    setTimeout(() => {
      slideImg2025.src = btsImages2025[current2025];
      slideImg2025.style.opacity = 1;
    }, 300);
  }, 3000);
</script>
{{ end }}