{{ define "main" }}

<section class="hero-section bg-cover bg-center min-h-screen flex items-center justify-center text-white" style="background-image: url('/images/hero.jpg');">
  <div class="hero-content text-center py-16 sm:py-24 px-4 sm:px-8">
    <h1 class="text-5xl sm:text-7xl md:text-8xl font-extrabold animate-pulse text-white mb-6 sm:mb-8">WELCOME TO SAMCLOUD</h1>
    <p class="text-xl sm:text-3xl md:text-4xl mt-4 sm:mt-6 text-gray-200 tracking-wide mb-10 sm:mb-12">MY SPACE. MY CONTENT. MY CREATIVE CLOUD.</p>
    <nav class="flex justify-center gap-12 mt-8 mb-12 text-2xl font-semibold">
      <a href="/portfolio/" class="text-white hover:text-blue-300 px-4">Portfolio</a>
      <a href="/production/" class="text-white hover:text-blue-300 px-4">Production</a>
      <a href="/samcloud/" class="text-white hover:text-blue-300 px-4">.SamCloud</a>
      <a href="/services/" class="text-white hover:text-blue-300 px-4">Services</a>
      <a href="/about/" class="text-white hover:text-blue-300 px-4">About Me</a>
    </nav>
    <div class="hero-buttons mt-12 sm:mt-16 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6 w-full max-w-md mx-auto">
      <a href="#gallery" class="bg-blue-600 text-white px-8 py-4 rounded hover:bg-blue-700 text-xl w-full sm:w-auto text-center">View Gallery</a>
      <a href="/bookings" class="bg-transparent border text-white px-8 py-4 rounded hover:border-blue-300 hover:text-blue-300 text-xl w-full sm:w-auto text-center">Reserve</a>
    </div>
  </div>
</section>

<section id="gallery" class="gallery-preview-section mt-12 sm:mt-20 px-4 sm:px-6 lg:px-8 pt-0">
  <div class="gallery-grid-categories">
    {{ $categories := (readDir "static/images/gallery") }}
    {{ if $categories }}
      {{ range $categories }}
        {{ if .IsDir }}
          {{ $cat := .Name }}
          {{ $catPath := printf "static/images/gallery/%s" $cat }}
          <a href="/gallery/{{ $cat | urlize }}/" class="gallery-category-card" style="--img-count: {{ len (readDir $catPath) }}">
            <div class="preview-frame">
              {{ range first 5 (readDir $catPath) }}
                {{ if and (not .IsDir) (not (hasPrefix .Name ".")) (not (hasPrefix .Name "._")) }}
                  <img src="/images/gallery/{{ $cat }}/{{ .Name }}" alt="{{ .Name }}" loading="lazy" />
                {{ end }}
              {{ end }}
            </div>
            <div class="category-label">{{ $cat | title }}</div>
          </a>
        {{ end }}
      {{ end }}
    {{ else }}
      <p>No gallery categories found.</p>
    {{ end }}
  </div>
</section>

<style>
  .gallery-preview-section {
    padding: 0 2rem 4rem 2rem;
    background: linear-gradient(to bottom, rgba(2, 2, 47, 0.95), rgba(30, 41, 59, 0.95)), url('/images/noise-texture.png');
    background-size: cover;
    background-blend-mode: overlay;
    margin-bottom: 0;
  }
  .gallery-grid-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
  }
  .gallery-category-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    text-decoration: none;
    background: #1e293b;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  .preview-frame {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    animation: scrollImages 8s linear infinite;
    animation-play-state: paused;
  }
  .preview-frame img {
    position: absolute;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .preview-frame img:first-child {
    opacity: 1;
  }
  .gallery-category-card:hover .preview-frame {
    animation-play-state: running;
  }
  @keyframes scrollImages {
    0%, 20% { transform: translateX(0); }
    25%, 45% { transform: translateX(-100%); }
    50%, 70% { transform: translateX(-200%); }
    75%, 95% { transform: translateX(-300%); }
    100% { transform: translateX(-400%); }
  }
  .category-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.7);
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
  }
</style>

{{ end }}