{{ define "main" }}

<!-- Hero Section -->
<section class="hero-section bg-cover bg-center min-h-screen flex items-center justify-center text-white relative" style="background-image: url('/images/hero.jpg');">
  <div class="hero-content absolute inset-0 flex flex-col items-center justify-center text-center px-3 sm:px-6 md:px-8 z-10">
    <div class="max-w-7xl mx-auto">
      <h1 class="text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold text-white mb-3 sm:mb-4 md:mb-6 leading-tight animate-breath">WELCOME TO SAMCLOUD</h1>
      <p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl mt-2 sm:mt-3 md:mt-4 text-gray-200 tracking-wide mb-4 sm:mb-6 md:mb-8">
        MY SPACE. MY CONTENT.<br class="sm:hidden"/> MY CREATIVE CLOUD.
      </p>
    
    <!-- Mobile Navigation -->
    <nav class="md:hidden flex flex-col items-center space-y-2.5 mt-4 mb-6 w-full px-4">
      <a href="/portfolio/" class="text-white hover:text-blue-300 py-2.5 text-xl font-semibold bg-black/20 backdrop-blur-sm rounded-lg transition-all hover:bg-black/30 w-full text-center">PORTFOLIO</a>
      <a href="/production/" class="text-white hover:text-blue-300 py-2.5 text-xl font-semibold bg-black/20 backdrop-blur-sm rounded-lg transition-all hover:bg-black/30 w-full text-center">PRODUCTION</a>
      <a href="/samcloud/" class="text-white hover:text-blue-300 py-2.5 text-xl font-semibold bg-black/20 backdrop-blur-sm rounded-lg transition-all hover:bg-black/30 w-full text-center">.SamCloud</a>
      <a href="/services/" class="text-white hover:text-blue-300 py-2.5 text-xl font-semibold bg-black/20 backdrop-blur-sm rounded-lg transition-all hover:bg-black/30 w-full text-center">SERVICES</a>
      <a href="/about/" class="text-white hover:text-blue-300 py-2.5 text-xl font-semibold bg-black/20 backdrop-blur-sm rounded-lg transition-all hover:bg-black/30 w-full text-center">ABOUT ME</a>
    </nav>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex flex-wrap justify-between max-w-7xl mx-auto gap-y-4 mt-6 mb-8 text-xl lg:text-2xl font-semibold px-8">
      <a href="/portfolio/" class="text-white hover:text-blue-300 px-6 py-3 transition-colors">PORTFOLIO</a>
      <a href="/production/" class="text-white hover:text-blue-300 px-6 py-3 transition-colors">PRODUCTION</a>
      <a href="/samcloud/" class="text-white hover:text-blue-300 px-6 py-3 transition-colors">.SamCloud</a>
      <a href="/services/" class="text-white hover:text-blue-300 px-6 py-3 transition-colors">SERVICES</a>
      <a href="/about/" class="text-white hover:text-blue-300 px-6 py-3 transition-colors">ABOUT ME</a>
    </nav>


    <div class="hero-buttons mt-6 sm:mt-8 md:mt-10 flex justify-center w-full max-w-xs mx-auto px-4 sm:px-0">
      <a href="/bookings" class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 text-lg font-semibold text-center transition-colors duration-300 flex items-center justify-center">BOOK NOW</a>
    </div>
          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
        </svg>
      </a>
      
    <!-- Social Media Links (moved to bottom of hero-content) -->
    <div class="flex justify-center gap-10 mb-8 mt-8">
      <a href="https://www.linkedin.com/in/eugene-twien" target="_blank" rel="noopener noreferrer" class="text-white/75 hover:text-white transform hover:scale-110 transition-all" aria-label="LinkedIn">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
        </svg>
      </a>
      <a href="https://www.tiktok.com/@jeezysamcloud" target="_blank" rel="noopener noreferrer" class="text-white/75 hover:text-white transform hover:scale-110 transition-all" aria-label="TikTok">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
        </svg>
      </a>
      <a href="https://www.instagram.com/jeezysamcloud" target="_blank" rel="noopener noreferrer" class="text-white/75 hover:text-white transform hover:scale-110 transition-all" aria-label="Instagram">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
        </svg>
      </a>
    </div>

    <!-- Scroll Pointer with Label -->
    <div class="mt-10 flex flex-col items-center animate-bounce text-white">
      <span class="text-sm tracking-widest mb-2 opacity-80">PREVIEW</span>
      <a href="#preview-strip" aria-label="Scroll to gallery preview">
        <svg class="w-8 h-8 text-white/70 hover:text-white transition" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </a>
    </div>
    </div>
  </div>
</section>

<!-- Portfolio Preview Strip -->
<section id="preview-strip" class="w-full scroll-mt-16" style="background: linear-gradient(180deg, rgb(18, 24, 38) 0%, rgb(23, 29, 43) 50%, rgb(28, 34, 48) 100%);">
  <div class="flex w-full gap-1">
    <!-- Define base directories -->
    {{ $staticDirs := slice "portfolio/toronto-motorcross" "portfolio/maternity" "bts/vd2024" "bts/vd2025" "bts/cantsay" }}
    {{ $allImages := slice }}
    
    <!-- Collect images from static directories -->
    {{ range $staticDirs }}
      {{ $dir := . }}
      {{ if (fileExists (printf "static/%s" .)) }}
        {{ range (readDir (printf "static/%s" .)) }}
          {{ if and (not .IsDir) (or (strings.HasSuffix (lower .Name) ".jpg") (strings.HasSuffix (lower .Name) ".jpeg") (strings.HasSuffix (lower .Name) ".webp") (strings.HasSuffix (lower .Name) ".png")) }}
            {{ if and (ne .Name "cover.webp") (ne .Name "cover.jpg") (ne .Name ".DS_Store") (ne .Name "poster.jpg") (ne .Name "thumb.jpg") }}
              {{ $allImages = $allImages | append (dict "dir" $dir "name" .Name) }}
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}

    <!-- Try to collect from gallery if it exists -->
    {{ $galleryPath := "static/images/gallery" }}
    {{ if (fileExists $galleryPath) }}
      {{ range (readDir $galleryPath) }}
        {{ if .IsDir }}
          {{ $dir := .Name }}
          {{ range (readDir (printf "%s/%s" $galleryPath $dir)) }}
            {{ if and (not .IsDir) (or (strings.HasSuffix (lower .Name) ".jpg") (strings.HasSuffix (lower .Name) ".jpeg") (strings.HasSuffix (lower .Name) ".webp") (strings.HasSuffix (lower .Name) ".png")) }}
              {{ if and (ne .Name "cover.webp") (ne .Name "cover.jpg") (ne .Name ".DS_Store") (ne .Name "poster.jpg") (ne .Name "thumb.jpg") }}
                {{ $allImages = $allImages | append (dict "dir" (printf "images/gallery/%s" $dir) "name" .Name) }}
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}

    <!-- Double shuffle for better randomization -->
    {{ $shuffledOnce := shuffle $allImages }}
    {{ $shuffledTwice := shuffle $shuffledOnce }}
    
    {{ range $index := (seq 5) }}
    <div class="preview-frame flex-1 relative overflow-hidden" data-frame="{{ $index }}">
      <!-- Create truly random selection for each frame -->
      {{ $frameImages := shuffle $shuffledTwice }}
      {{ $frameImages = first 6 $frameImages }}
      
      {{ range $imgIndex, $image := $frameImages }}
        <img 
          src="/{{ $image.dir }}/{{ $image.name }}" 
          alt="Portfolio Image {{ add $imgIndex 1 }}"
          class="portfolio-image absolute inset-0 w-full h-full object-cover transition-all duration-700"
          loading="lazy"
          data-index="{{ $imgIndex }}"
          data-frame="{{ $index }}"
        >
      {{ end }}
    </div>
    {{ end }}
  </div>
</section>

<style>
  .gallery-preview-section {
    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;
    padding-bottom: 4rem;
  }
  
  .gallery-category-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #1e293b;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .gallery-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  }
  
  .preview-frame {
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
  }
  
  .preview-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  
  .preview-frame img:first-child {
    opacity: 1;
  }

  .gallery-category-card:hover img {
    transform: scale(1.05);
  }
  
  .category-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.875rem;
    text-align: center;
  }

  @media (max-width: 640px) {
    .category-label {
      font-size: 1rem;
      padding: 0.75rem;
    }
  }

  @keyframes breath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
  }

  .animate-breath {
    animation: breath 6s ease-in-out infinite;
  }

  .preview-frame {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(18, 24, 38, 0.5);
  }

  .preview-frame {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(18, 24, 38, 0.5);
    min-height: 40vh;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
  }

  .preview-frame:first-child {
    border-left: none;
  }

  .portfolio-image {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.7s ease-in-out, transform 1.2s ease-in-out;
    will-change: opacity, transform;
    color: transparent; /* Hide alt text during transitions */
  }

  .portfolio-image.active {
    opacity: 1;
    transform: scale(1);
    color: transparent; /* Keep alt text hidden even when active */
  }

  .portfolio-image.breathe-in {
    animation: breatheIn 1.4s ease-out;
  }

  .portfolio-image.breathe-out {
    animation: breatheOut 0.7s ease-in;
  }

  .portfolio-image.fade-out {
    opacity: 0;
  }

  @keyframes breatheIn {
    0% { transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  @keyframes breatheOut {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
  }

  @media (max-width: 768px) {
    .preview-frame {
      min-height: 30vh;
    }
  }

  @media (max-width: 640px) {
    .preview-frame {
      min-height: 25vh;
    }
  }

  /* Add subtle gradient overlay */
  .preview-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(18, 24, 38, 0.2) 0%,
      rgba(18, 24, 38, 0) 20%,
      rgba(18, 24, 38, 0) 80%,
      rgba(18, 24, 38, 0.3) 100%
    );
    pointer-events: none;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const frames = document.querySelectorAll('.preview-frame');
  let activeImages = new Set(); // Track currently displayed images across all frames
  let animationInProgress = false;
  
  // Shuffle array function
  const shuffle = array => {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  };

  // Debounce function to limit function calls
  const debounce = (func, wait) => {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  };
  
  frames.forEach((frame) => {
    const images = shuffle(Array.from(frame.querySelectorAll('.portfolio-image')));
    let currentIndex = 0;
    
    // Show first unique image immediately
    if (images.length > 0) {
      // Find first non-duplicate image
      while (activeImages.has(images[currentIndex].src) && currentIndex < images.length - 1) {
        currentIndex++;
      }
      images[currentIndex].classList.add('active');
      activeImages.add(images[currentIndex].src);
    }
    
    // Preload images with a delay between each
    images.forEach((img, index) => {
      setTimeout(() => {
        const imageLoader = new Image();
        imageLoader.src = img.src;
      }, index * 100); // Stagger loading by 100ms per image
    });
    
    // Get next unique image
    const getNextUniqueImage = () => {
      const unusedImages = images.filter(img => !activeImages.has(img.src));
      if (unusedImages.length > 0) {
        return images.indexOf(unusedImages[Math.floor(Math.random() * unusedImages.length)]);
      }
      return Math.floor(Math.random() * images.length);
    };
    
    // Function to change image in this frame
    const changeImage = () => {
      if (animationInProgress) return; // Skip if animation is already in progress
      
      const nextIndex = getNextUniqueImage();
      if (nextIndex === currentIndex) return; // Skip if same image
      
      animationInProgress = true;
      
      // Remove current image from active set
      activeImages.delete(images[currentIndex].src);
      
      // Start fade-out
      images[currentIndex].classList.add('fade-out');
      
      // Wait for fade-out, then switch images
      setTimeout(() => {
        images[currentIndex].classList.remove('active', 'fade-out');
        currentIndex = nextIndex;
        
        // Add new image to active set and show it
        activeImages.add(images[currentIndex].src);
        images[currentIndex].classList.add('active');
        
        animationInProgress = false;
      }, 700);
    };
    
    // Check every 5 seconds if this frame should change, with 20% chance
    setInterval(() => {
      if (Math.random() < 0.2) { // 20% chance to change
        changeImage();
      }
    }, 5000);
  });
  
  // Handle resize for responsive behavior, with debouncing
  const handleResize = debounce(() => {
    frames.forEach(frame => {
      const height = frame.offsetWidth * (3/4); // Maintain 4:3 aspect ratio
      frame.style.height = `${height}px`;
    });
  }, 250); // Wait 250ms after last resize event before executing
  
  window.addEventListener('resize', handleResize);
  
  // Trigger initial resize
  handleResize();
});
</script>

{{ end }}