@extends('default.layouts.app')

@section('title', 'Ralph Lauren Gift Guide | Holiday 2025')

@section('content')
      <!-- Hero Section -->
      <section class="relative h-[85vh] sm:h-screen w-full overflow-hidden bg-navy" aria-label="Holiday Campaign Hero">
        <div class="absolute inset-0">
          @if($hero && $hero->video)
          <!-- Poster image serves as fallback and loads first -->
          <video
            class="w-full h-full object-cover opacity-80"
            autoplay
            muted
            loop
            playsinline
            poster="{{ $hero->poster }}"
            aria-hidden="true"
          >
            <source src="{{ $hero->video }}" type="video/mp4" />
          </video>
          @elseif($hero && $hero->image)
          <img src="{{ $hero->image }}" class="w-full h-full object-cover opacity-80" alt="{{ $hero->title }}">
          @endif
          <!-- Dark overlay for text contrast -->
          <div class="absolute inset-0 bg-black/30"></div>
        </div>

        <div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4 animate-fade-in">
          <!-- Added explicit dimensions to prevent layout shift -->
          <img
            src="https://www.ralphlauren.com/on/demandware.static/-/Library-Sites-RalphLauren_NA_Library/default/dwd3abbb87/img/Brand_Logo_Library/POLO/2021_ralph_lauren_logo_white.svg"
            alt="Polo Ralph Lauren"
            class="w-32 sm:w-48 md:w-64 mb-6 sm:mb-8"
            width="256"
            height="50"
          />

          <h1 class="font-serif text-5xl sm:text-7xl lg:text-9xl mb-6 tracking-tight drop-shadow-lg">
            {{ $hero->title ?? 'The Gift Guide' }}
          </h1>

          <p class="text-xs sm:text-base font-bold tracking-[0.2em] uppercase mt-2 mb-8 max-w-lg leading-relaxed text-shadow-md">
            {{ $hero->subtitle ?? 'Timeless Presents for Memorable Moments' }}
          </p>

          @if($hero && $hero->button_text)
          <a href="{{ $hero->button_link ?? route('products.index') }}" class="bg-white text-navy hover:bg-gray-100 px-8 py-3.5 uppercase text-[10px] sm:text-xs font-bold tracking-widest transition-colors duration-300">
            {{ $hero->button_text }}
          </a>
          @endif
        </div>
      </section>

      <!-- Sticky Sub-Navigation -->
      <nav class="sticky top-[90px] sm:top-[110px] z-30 bg-white/95 backdrop-blur-sm border-b shadow-sm py-6 overflow-x-auto hide-scrollbar" aria-label="Gift Guide Categories">
        <div class="container mx-auto px-4">
          <ul class="flex justify-start md:justify-center space-x-8 sm:space-x-12 min-w-max px-2">
            @foreach($navCategories as $nav)
            <li>
              <a href="#{{ $nav->slug }}" class="group flex flex-col items-center space-y-3 focus:outline-none p-1 rounded-lg">
                <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden border-2 border-transparent group-hover:border-navy group-focus:border-navy transition-all">
                  <!-- Added width/height to all small images for CLS -->
                  <img src="{{ $nav->image }}" alt="{{ $nav->title }}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500" loading="lazy" width="80" height="80" />
                </div>
                <span class="text-[10px] sm:text-xs font-bold tracking-widest uppercase text-navy group-hover:underline decoration-navy underline-offset-4">{{ $nav->title }}</span>
              </a>
            </li>
            @endforeach
          </ul>

          <div class="text-center mt-10 max-w-3xl mx-auto px-4">
            <p class="font-serif text-xl sm:text-3xl text-navy leading-relaxed italic">
              {{ $hero->description ?? 'Create memorable moments and timeless holiday traditions with signature Ralph Lauren styles they\'ll love now and forever.' }}
            </p>
          </div>
        </div>
      </nav>

      <!-- Gift Shops Grid -->
      <section id="gift-shops" class="grid grid-cols-1 md:grid-cols-2 gap-1 bg-white" aria-label="Featured Gift Shops">
        @foreach($shopGrid as $shop)
        <article class="relative group h-[500px] sm:h-[600px] lg:h-[800px] overflow-hidden bg-gray-100">
          <img
            src="{{ $shop->image }}"
            alt="{{ $shop->title }}"
            class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 will-change-transform"
            loading="lazy"
            width="800"
            height="1000"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
          <div class="absolute bottom-0 left-0 p-8 sm:p-12 w-full text-white">
            <h3 class="font-serif text-3xl sm:text-4xl lg:text-5xl mb-3">{{ $shop->title }}</h3>
            <p class="text-sm sm:text-base font-medium mb-6 max-w-sm leading-relaxed text-white/90">
              {{ $shop->description }}
            </p>
            @if($shop->button_text)
            <a href="#" class="inline-block uppercase text-xs font-bold tracking-widest border-b border-white pb-1 hover:text-gray-200 hover:border-gray-200 transition-colors p-2">
              {{ $shop->button_text }}
            </a>
            @endif
          </div>
        </article>
        @endforeach
      </section>

      <!-- Section: For Her -->
      @php $herHero = $sections['section_hero']->where('slug', 'gifts-for-her-hero')->first(); @endphp
      @if($herHero)
      <section id="for-her" aria-labelledby="heading-her">
        <div class="relative w-full h-[500px] sm:h-[700px] bg-gray-100 flex items-end justify-center pb-16 sm:pb-24">
          <picture class="absolute inset-0 w-full h-full">
            <source media="(min-width: 768px)" srcset="{{ $herHero->image }}" />
            <img
              src="{{ $herHero->image }}"
              alt="{{ $herHero->title }}"
              class="w-full h-full object-cover"
              loading="lazy"
              width="1440"
              height="800"
            />
          </picture>
          <div class="relative z-10 text-center px-4 text-navy">
            <h2 id="heading-her" class="font-serif text-4xl sm:text-6xl mb-4 drop-shadow-sm">{{ $herHero->title }}</h2>
            <p class="font-medium text-sm sm:text-lg tracking-wide max-w-lg mx-auto">{{ $herHero->subtitle }}</p>
          </div>
        </div>

      @php $herItems = $sections['section_item']->whereIn('slug', ['polo-bear-shop-women', 'luxury-gifts', 'our-favorites-her']); @endphp
        <div class="bg-[#f4f4f4] py-16 sm:py-24">
          <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 items-stretch">
              <!-- Large Feature -->
              @php $largeItem = $herItems->where('slug', 'polo-bear-shop-women')->first(); @endphp
              @if($largeItem)
              <div class="w-full lg:w-1/2 relative h-[500px] sm:h-[600px] group overflow-hidden">
                <img src="{{ $largeItem->image }}" alt="{{ $largeItem->title }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" width="800" height="1000" />
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
                <div class="absolute bottom-8 left-8 text-white">
                  <h3 class="font-serif text-3xl mb-2">{{ $largeItem->title }}</h3>
                  @if($largeItem->button_text)
                  <a href="#" class="uppercase text-xs font-bold tracking-widest border-b border-white pb-1 hover:opacity-80 p-2">{{ $largeItem->button_text }}</a>
                  @endif
                </div>
              </div>
              @endif

              <!-- Smaller Grid -->
              <div class="w-full lg:w-1/2 grid grid-cols-2 gap-4">
                @foreach($herItems->whereNotIn('slug', ['polo-bear-shop-women']) as $item)
                <div class="relative group overflow-hidden h-[300px] lg:h-auto">
                  <img src="{{ $item->image }}" alt="{{ $item->title }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" width="600" height="600" />
                  <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>
                  <div class="absolute bottom-6 left-6 text-white">
                    <h4 class="font-serif text-xl sm:text-2xl mb-2">{{ $item->title }}</h4>
                    @if($item->button_text)
                    <span class="uppercase text-[10px] font-bold tracking-widest border-b border-white pb-0.5">{{ $item->button_text }}</span>
                    @endif
                  </div>
                </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      </section>
      @endif

      <!-- Section: For Him -->
      @php $himHero = $sections['section_hero']->where('slug', 'gifts-for-him-hero')->first(); @endphp
      @if($himHero)
      <section id="for-him" aria-labelledby="heading-him">
        <div class="relative w-full h-[500px] sm:h-[700px] bg-gray-100 flex items-end justify-center pb-16 sm:pb-24">
          <picture class="absolute inset-0 w-full h-full">
            <source media="(min-width: 768px)" srcset="{{ $himHero->image }}" />
            <img
              src="{{ $himHero->image }}"
              alt="{{ $himHero->title }}"
              class="w-full h-full object-cover"
              loading="lazy"
              width="1440"
              height="800"
            />
          </picture>
          <div class="relative z-10 text-center px-4 text-navy">
            <h2 id="heading-him" class="font-serif text-4xl sm:text-6xl mb-4 drop-shadow-sm">{{ $himHero->title }}</h2>
            <p class="font-medium text-sm sm:text-lg tracking-wide max-w-lg mx-auto">{{ $himHero->subtitle }}</p>
          </div>
        </div>

        @php $himItems = $sections['section_item']->whereIn('slug', ['our-favorites-him', 'polo-bear-shop-men', 'custom-shop']); @endphp
        <div class="bg-[#f4f4f4] py-16 sm:py-24">
          <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 items-stretch">
              <!-- Large Feature -->
              @php $largeItem = $himItems->where('slug', 'our-favorites-him')->first(); @endphp
              @if($largeItem)
              <div class="w-full lg:w-1/2 relative h-[500px] sm:h-[600px] group overflow-hidden">
                <img src="{{ $largeItem->image }}" alt="{{ $largeItem->title }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" width="800" height="1000" />
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
                <div class="absolute bottom-8 left-8 text-white">
                  <h3 class="font-serif text-3xl mb-2">{{ $largeItem->title }}</h3>
                  @if($largeItem->button_text)
                  <a href="#" class="uppercase text-xs font-bold tracking-widest border-b border-white pb-1 hover:opacity-80 p-2">{{ $largeItem->button_text }}</a>
                  @endif
                </div>
              </div>
              @endif

              <!-- Smaller Grid -->
              <div class="w-full lg:w-1/2 grid grid-cols-2 gap-4">
                @foreach($himItems->whereNotIn('slug', ['our-favorites-him']) as $item)
                <div class="relative group overflow-hidden h-[300px] lg:h-auto">
                  <img src="{{ $item->image }}" alt="{{ $item->title }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" width="600" height="600" />
                  <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div>
                  <div class="absolute bottom-6 left-6 text-white">
                    <h4 class="font-serif text-xl sm:text-2xl mb-2">{{ $item->title }}</h4>
                    @if($item->button_text)
                    <span class="uppercase text-[10px] font-bold tracking-widest border-b border-white pb-0.5">{{ $item->button_text }}</span>
                    @endif
                  </div>
                </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      </section>
      @endif

      <!-- Section: For Kids -->
      @php $kidsHero = $sections['section_hero']->where('slug', 'gifts-for-kids-hero')->first(); @endphp
      @if($kidsHero)
      <section id="for-kids" aria-labelledby="heading-kids" class="relative w-full h-[500px] sm:h-[700px] bg-gray-100 flex items-end justify-center pb-16 sm:pb-24">
        <picture class="absolute inset-0 w-full h-full">
          <source media="(min-width: 768px)" srcset="{{ $kidsHero->image }}" />
          <img
            src="{{ $kidsHero->image }}"
            alt="{{ $kidsHero->title }}"
            class="w-full h-full object-cover"
            loading="lazy"
            width="1440"
            height="800"
          />
        </picture>
        <div class="relative z-10 text-center px-4 text-navy">
          <h2 id="heading-kids" class="font-serif text-4xl sm:text-6xl mb-4 drop-shadow-sm">{{ $kidsHero->title }}</h2>
          <p class="font-medium text-sm sm:text-lg tracking-wide max-w-lg mx-auto">{{ $kidsHero->subtitle }}</p>
        </div>
      </section>
      @endif

      <!-- Section: For Home -->
      @php $homeHero = $sections['section_hero']->where('slug', 'for-the-home-hero')->first(); @endphp
      @if($homeHero)
      <section id="for-home" aria-labelledby="heading-home" class="relative w-full h-[500px] sm:h-[700px] bg-gray-100 flex items-end justify-center pb-16 sm:pb-24">
        <picture class="absolute inset-0 w-full h-full">
          <source media="(min-width: 768px)" srcset="{{ $homeHero->image }}" />
          <img
            src="{{ $homeHero->image }}"
            alt="{{ $homeHero->title }}"
            class="w-full h-full object-cover"
            loading="lazy"
            width="1440"
            height="800"
          />
        </picture>
        <div class="relative z-10 text-center px-4 text-navy">
          <h2 id="heading-home" class="font-serif text-4xl sm:text-6xl mb-4 drop-shadow-sm">{{ $homeHero->title }}</h2>
          <p class="font-medium text-sm sm:text-lg tracking-wide max-w-lg mx-auto">{{ $homeHero->subtitle }}</p>
        </div>
      </section>
      @endif
@endsection