{{ define "main" }}
<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
  <!-- Navigation -->
  <nav class="bg-black/50 backdrop-blur-sm fixed w-full z-50">
    <div class="container mx-auto px-4 py-3">
      <div class="flex justify-between items-center">
        <a href="/" class="text-2xl font-bold text-white">SamCloud</a>
        <div class="space-x-6 text-white">
          <a href="/" class="hover:text-blue-400 transition-colors">Home</a>
          <a href="/production" class="hover:text-blue-400 transition-colors">Production</a>
          <a href="/gallery" class="hover:text-blue-400 transition-colors">Gallery</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Production Content -->
  <div class="container mx-auto px-4 pt-24 pb-12">
    <article class="max-w-6xl mx-auto">
      <!-- Featured Video -->
      <div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-lg overflow-hidden mb-8">
        <video class="w-full h-full object-cover" controls poster="{{ .Params.poster }}">
          <source src="{{ .Params.featured_video }}" type="video/mp4">
        </video>
      </div>

      <!-- Content -->
      <div class="bg-gray-800/50 rounded-lg p-8">
        <!-- Header -->
        <header class="mb-8">
          <h1 class="text-4xl font-bold text-white mb-4">{{ .Title }}</h1>
          <time class="text-gray-400 text-sm block">{{ .Date.Format "January 2, 2006" }}</time>
        </header>

        <!-- Production Details Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <!-- Left Column - Credits -->
          <div class="space-y-6">
            <div>
              <h2 class="text-2xl font-semibold text-white mb-4">Production Credits</h2>
              <dl class="grid grid-cols-1 gap-3">
                {{ with .Params.director }}
                <div>
                  <dt class="text-gray-400">Director</dt>
                  <dd class="text-white">{{ . }}</dd>
                </div>
                {{ end }}
                {{ with .Params.cinematographer }}
                <div>
                  <dt class="text-gray-400">Cinematographer</dt>
                  <dd class="text-white">{{ . }}</dd>
                </div>
                {{ end }}
                {{ with .Params.editor }}
                <div>
                  <dt class="text-gray-400">Editor</dt>
                  <dd class="text-white">{{ . }}</dd>
                </div>
                {{ end }}
              </dl>
            </div>

            {{ with .Params.cast }}
            <div>
              <h2 class="text-2xl font-semibold text-white mb-4">Cast</h2>
              <ul class="list-disc list-inside text-gray-300 space-y-2">
                {{ range . }}
                <li>{{ . }}</li>
                {{ end }}
              </ul>
            </div>
            {{ end }}
          </div>

          <!-- Right Column - Description and Content -->
          <div class="space-y-6">
            <div>
              <h2 class="text-2xl font-semibold text-white mb-4">About the Project</h2>
              <div class="prose prose-invert max-w-none">
                {{ with .Params.description }}
                <p>{{ . }}</p>
                {{ end }}
                {{ .Content }}
              </div>
            </div>

            {{ with .Params.behind_the_scenes }}
            <div>
              <h2 class="text-2xl font-semibold text-white mb-4">Behind the Scenes</h2>
              <div class="grid grid-cols-2 gap-4">
                {{ range . }}
                <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden">
                  <img src="{{ . }}" alt="Behind the scenes" class="w-full h-full object-cover">
                </div>
                {{ end }}
              </div>
            </div>
            {{ end }}
          </div>
        </div>
      </div>
    </article>
  </div>
</div>

<!-- Styles -->
<style>
  .prose {
    color: #94a3b8;
  }
  .prose h3 {
    color: #e2e8f0;
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .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;
    object-position: center;
  }
</style>
{{ end }}