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

  <!-- Header -->
  <header class="pt-24 pb-12 text-center text-white">
    <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-8">{{ .Title }}</h1>
    <div class="max-w-4xl mx-auto text-2xl md:text-3xl text-gray-300 px-4">
      {{ .Content }}
    </div>
  </header>

  <!-- Dynamic Gallery -->
  <section class="w-full overflow-hidden pb-16">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
      {{ $dirs := slice "portfolio/toronto-motorcross" "vd2024" "vd2025" }}
      {{ $images := slice }}
      {{ range $dirs }}
        {{ $dirImages := readDir (printf "static/%s" .) }}
        {{ range $dirImages }}
          {{ if not .IsDir }}
            {{ $images = $images | append (dict "Dir" . "Name" .Name) }}
          {{ end }}
        {{ end }}
      {{ end }}
      {{ range first 20 $images }}
        <div class="overflow-hidden rounded-lg shadow-lg">
          <img src="/{{ .Dir }}/{{ .Name }}" alt="{{ .Name }}" class="w-full h-64 object-cover" loading="lazy">
        </div>
      {{ end }}
    </div>
  </section>
  <script>
    // JavaScript for dynamic image rotation
    const images = document.querySelectorAll('.grid img');
    let currentIndex = 0;

    setInterval(() => {
      images[currentIndex].classList.add('hidden');
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].classList.remove('hidden');
    }, 3000);
  </script>
</div>
{{ end }}