{{ define "main" }}
<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
  <!-- Navigation -->
  {{ partial "nav.html" . }}
  <div class="container mx-auto px-4 pt-24 pb-12">
    <header class="mb-12 text-center">
      <h1 class="text-4xl font-bold text-white mb-4">{{ .Title }}</h1>
      <div class="max-w-2xl mx-auto text-gray-300">
        {{ .Content }}
      </div>
    </header>
    
    <!-- Productions List -->
    <div class="space-y-16 max-w-[1920px] mx-auto">
      {{ range .Pages.ByDate.Reverse }}
      <div class="bg-gray-800/50 rounded-xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300">
        {{ if .Params.featured_video }}
        <div class="aspect-w-16 aspect-h-9">
          {{ if eq .Params.video_type "youtube" }}
          <iframe 
            src="{{ .Params.featured_video }}"
            class="w-full h-full"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
          {{ else }}
          <video 
            class="w-full h-full object-cover" 
            controls 
            poster="{{ .Params.poster }}"
            preload="none"
            loading="lazy"
          >
            <source src="{{ .Params.featured_video }}" type="video/mp4">
          </video>
          {{ end }}
        </div>
        {{ end }}

        <div class="p-8 sm:p-10">
          <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">{{ .Title }}</h2>
            <div class="text-sm text-gray-400 mb-8">{{ .Date.Format "January 2, 2006" }}</div>
            
            <div class="grid md:grid-cols-2 gap-10 text-gray-300">
              <!-- Project Credits -->
              <div class="space-y-6">
                {{ with .Params.director }}
                <div>
                  <h3 class="text-xl font-semibold text-white mb-2">Director</h3>
                  <p class="text-lg">{{ . }}</p>
                </div>
                {{ end }}
                
                {{ with .Params.cinematographer }}
                <div>
                  <h3 class="text-xl font-semibold text-white mb-2">Cinematographer</h3>
                  <p class="text-lg">{{ . }}</p>
                </div>
                {{ end }}
                
                {{ with .Params.editor }}
                <div>
                  <h3 class="text-xl font-semibold text-white mb-2">Editor</h3>
                  <p class="text-lg">{{ . }}</p>
                </div>
                {{ end }}
                
                {{ with .Params.cast }}
                <div>
                  <h3 class="text-xl font-semibold text-white mb-2">Cast</h3>
                  <ul class="list-disc list-inside space-y-2 text-lg">
                    {{ range . }}
                    <li>{{ . }}</li>
                    {{ end }}
                  </ul>
                </div>
                {{ end }}
              </div>
              
              <!-- Project Description -->
              <div class="space-y-8">
                {{ with .Description }}
                <div>
                  <h3 class="text-xl font-semibold text-white mb-2">About the Project</h3>
                  <p class="text-lg">{{ . }}</p>
                </div>
                {{ end }}
                
                {{ with .Params.behind_the_scenes }}
                <div>
                  <h3 class="text-xl font-semibold text-white mb-4">Behind the Scenes</h3>
                  <div class="relative w-96 mx-auto rounded-lg overflow-hidden shadow-xl bg-black">
                    <div class="aspect-w-1 aspect-h-1">
                      {{ range . }}
                      <img 
                        src="{{ . }}" 
                        alt="Behind the scenes" 
                        class="bts-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-all duration-700"
                        loading="lazy"
                        decoding="async"
                      >
                      {{ end }}
                    </div>
                  </div>
                </div>
                {{ end }}
              </div>
            </div>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</div>

<style>
.aspect-w-16 {
  position: relative;
  padding-bottom: 56.25%;
}

.aspect-w-16 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.aspect-w-1 {
  position: relative;
  padding-bottom: 100%;
}

.aspect-w-1 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

/* BTS Image Slideshow */
.bts-slide {
  opacity: 0;
  transform: scale(1.02);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.bts-slide:first-child {
  opacity: 1;
  transform: scale(1);
}

@keyframes fadeInOut {
  0%, 45% { 
    opacity: 1;
    transform: scale(1);
  }
  50%, 95% { 
    opacity: 0;
    transform: scale(1.02);
  }
  100% { 
    opacity: 1;
    transform: scale(1);
  }
}

.bts-slide {
  animation: fadeInOut 12s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.bts-slide:nth-child(2) { animation-delay: 2s; }
.bts-slide:nth-child(3) { animation-delay: 4s; }
.bts-slide:nth-child(4) { animation-delay: 6s; }
.bts-slide:nth-child(5) { animation-delay: 8s; }
.bts-slide:nth-child(6) { animation-delay: 10s; }

@media (max-width: 1023px) {
  .container {
    padding-bottom: 5rem;
  }
}
</style>
{{ end }}