@extends('default.layouts.app')

@section('title', 'Home - Heritage Lux')

@section('content')
<!-- Hero Section: High Priority LCP -->
@if($heroBanner)
<section class="w-full">
    <div class="relative group overflow-hidden h-[70vh] md:h-[80vh] lg:h-[85vh]">
        <!-- fetchpriority='high' for LCP optimization + Explicit Dimensions -->
        <img
            src="{{ $heroBanner->image }}"
            alt="{{ $heroBanner->title }}"
            width="1920" height="1080"
            fetchpriority="high"
            class="absolute inset-0 w-full h-full object-cover object-top transition-transform duration-[2000ms] ease-out group-hover:scale-105"
        />
        <div class="absolute inset-0 bg-black/10"></div> <!-- Contrast Overlay -->
        <div class="absolute inset-0 flex flex-col p-6 items-center justify-end pb-16 md:pb-20 text-center">
            <div class="transform transition-all duration-700 ease-out translate-y-4 group-hover:translate-y-0 text-white w-full max-w-3xl">
                <span class="block text-xs md:text-sm uppercase tracking-[0.2em] font-medium mb-3 md:mb-4 drop-shadow-md">
                    {{ $heroBanner->subtitle ?? 'Ralph Lauren' }}
                </span>
                <h2 class="text-4xl md:text-6xl lg:text-7xl font-serif mb-6 md:mb-8 leading-tight drop-shadow-lg">
                    {{ $heroBanner->title }}
                </h2>
                <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
                    <a href="{{ $heroBanner->button_link ?? '#' }}" class="inline-block px-8 py-3 bg-white text-primary text-xs uppercase tracking-[0.2em] font-bold hover:bg-slate-100 transition-colors shadow-lg min-w-[160px]">
                        {{ $heroBanner->button_text ?? 'Explore Now' }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Promo Grid 1 -->
@if($promos->count() > 0)
<section class="grid grid-cols-1 md:grid-cols-2">
    @foreach($promos as $promo)
    <div class="relative group overflow-hidden aspect-[4/5] lg:aspect-square w-full">
        <img
            src="{{ $promo->image }}"
            alt="{{ $promo->title }}"
            loading="lazy"
            width="1000" height="1000"
            class="absolute inset-0 w-full h-full object-cover transition-transform duration-[2000ms] ease-out group-hover:scale-105"
        />
        <div class="absolute inset-0 flex flex-col p-6 md:p-12 items-start justify-end text-left bg-gradient-to-t from-white/90 via-white/40 to-transparent md:bg-none">
            <div class="transform transition-all duration-700 ease-out translate-y-4 group-hover:translate-y-0 text-primary w-full">
                <span class="block text-xs uppercase tracking-[0.2em] font-medium mb-2 md:mb-4">
                    {{ $promo->subtitle }}
                </span>
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-serif mb-3 md:mb-4 leading-tight">
                    {{ $promo->title }}
                </h2>
                @if($promo->description)
                <p class="text-sm md:text-base font-light mb-6 md:mb-8 max-w-md leading-relaxed hidden md:block text-slate-800">
                    {{ $promo->description }}
                </p>
                @endif
                @if($promo->links && count($promo->links) > 0)
                <div class="flex flex-wrap gap-x-6 gap-y-3">
                    @foreach($promo->links as $link)
                    <a href="{{ $link['url'] ?? '#' }}" class="relative pb-1 text-xs uppercase tracking-[0.2em] font-bold after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1px] after:bg-primary hover:text-primary/80 after:transition-all hover:after:h-[2px]">{{ $link['text'] }}</a>
                    @endforeach
                </div>
                @elseif($promo->button_text)
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="{{ $promo->button_link ?? '#' }}" class="inline-block px-8 py-3 bg-primary text-white text-xs uppercase tracking-[0.2em] font-bold hover:bg-primary/90 transition-colors shadow-md">
                        {{ $promo->button_text }}
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</section>
@endif

<!-- Full Width Banner: Olympics -->
@if($fullBanner)
<section class="w-full bg-slate-100">
    <div class="relative group overflow-hidden aspect-[4/5] md:aspect-[16/9] w-full">
        <img
            src="{{ $fullBanner->image }}"
            alt="{{ $fullBanner->title }}"
            loading="lazy"
            width="1920" height="1080"
            class="absolute inset-0 w-full h-full object-cover transition-transform duration-[2000ms] ease-out group-hover:scale-105"
        />
        <div class="absolute inset-0 bg-black/20 md:bg-transparent"></div>
        <div class="absolute inset-0 flex flex-col p-6 md:p-16 items-start justify-end text-left">
            <div class="transform transition-all duration-700 ease-out translate-y-4 group-hover:translate-y-0 text-white md:text-primary max-w-2xl bg-black/40 md:bg-white/95 p-6 md:p-10 backdrop-blur-md md:backdrop-blur-none rounded-sm shadow-xl">
                <span class="block text-xs uppercase tracking-[0.2em] font-medium mb-3 md:mb-4 text-white md:text-primary">
                    {{ $fullBanner->subtitle }}
                </span>
                <h2 class="text-3xl md:text-5xl font-serif mb-4 md:mb-6 leading-tight text-white md:text-primary">
                    {{ $fullBanner->title }}
                </h2>
                <p class="text-sm md:text-base font-light mb-6 md:mb-8 leading-relaxed text-slate-100 md:text-slate-800">
                    {{ $fullBanner->description }}
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="{{ $fullBanner->button_link ?? '#' }}" class="inline-block px-8 py-3 bg-white md:bg-primary text-primary md:text-white text-xs uppercase tracking-[0.2em] font-bold hover:opacity-90 transition-opacity text-center min-w-[140px] shadow-md">
                        {{ $fullBanner->button_text ?? 'Shop Now' }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Carousel: Holiday Dressing -->
@if($carousel)
<section class="border-t border-b border-slate-100 bg-[#f9f9f9]" aria-label="{{ $carousel->title }} Carousel">
    <div class="py-16 md:py-24 max-w-[1920px] mx-auto">
        <div class="px-4 md:px-12 mb-10 flex flex-col md:flex-row md:items-end justify-between">
            <div class="mb-6 md:mb-0">
                <span class="block text-xs uppercase tracking-[0.2em] text-primary mb-3 font-medium">{{ $carousel->subtitle }}</span>
                <h2 class="text-3xl md:text-4xl font-serif text-primary mb-3">{{ $carousel->title }}</h2>
                <p class="text-slate-600 text-sm font-light max-w-xl leading-relaxed">{{ $carousel->description }}</p>
            </div>
            <div class="flex space-x-2">
                <button onclick="scrollCarousel('holiday', 'left')" class="p-3 border border-slate-200 bg-white hover:bg-slate-50 transition-colors group rounded-full focus:ring-2 focus:ring-primary focus:outline-none" aria-label="Previous Slide">
                    <svg class="w-4 h-4 text-slate-600 group-hover:text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button onclick="scrollCarousel('holiday', 'right')" class="p-3 border border-slate-200 bg-white hover:bg-slate-50 transition-colors group rounded-full focus:ring-2 focus:ring-primary focus:outline-none" aria-label="Next Slide">
                    <svg class="w-4 h-4 text-slate-600 group-hover:text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- Scroll Container -->
        <div id="holiday-carousel" class="flex overflow-x-auto hide-scrollbar space-x-4 md:space-x-6 px-4 md:px-12 snap-x snap-mandatory scroll-pl-4 md:scroll-pl-12 pb-8">
            @foreach($carousel->items as $item)
            <div class="flex-none snap-start group cursor-pointer w-[75vw] sm:w-[300px] md:w-[320px]">
                <div class="relative overflow-hidden mb-6 aspect-[3/4] bg-white shadow-sm">
                    <img src="{{ $item->image }}" alt="{{ $item->title }} Holiday Fashion" loading="lazy" width="320" height="426" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                </div>
                <div class="text-center md:text-left">
                    <h3 class="text-lg md:text-xl font-serif text-primary mb-2">{{ $item->title }}</h3>
                    <span class="text-xs uppercase tracking-[0.2em] font-bold text-primary border-b border-primary pb-1 inline-block">Shop Now</span>
                </div>
            </div>
            @endforeach

            <!-- Spacer -->
            <div class="w-4 md:w-8 flex-none"></div>
        </div>
    </div>
</section>
@endif
@endsection