@extends('layout')
@section('content')
<section class="relative w-full h-[85vh] md:h-screen overflow-hidden bg-gray-100">
    <div id="carouselTrack" class="flex w-full h-full transition-transform duration-1000 ease-in-out transform translate-x-0">
        <div class="w-full h-full flex-shrink-0">
            <img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?q=80&w=1920&auto=format&fit=crop" class="w-full h-full object-cover" alt="Hero 1" />
        </div>
        <div class="w-full h-full flex-shrink-0">
            <img src="https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=1920&auto=format&fit=crop" class="w-full h-full object-cover" alt="Hero 2" />
        </div>
        <div class="w-full h-full flex-shrink-0">
            <img src="https://images.unsplash.com/photo-1537368910025-700350fe46c7?q=80&w=1920&auto=format&fit=crop" class="w-full h-full object-cover" alt="Hero 3" />
        </div>
    </div>

    <button id="prevSlideBtn" class="absolute left-2 md:left-6 top-1/2 -translate-y-1/2 z-20 bg-black/20 hover:bg-black/50 backdrop-blur-sm text-white p-2 md:p-3 rounded-full transition-all duration-300">
        <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    <button id="nextSlideBtn" class="absolute right-2 md:right-6 top-1/2 -translate-y-1/2 z-20 bg-black/20 hover:bg-black/50 backdrop-blur-sm text-white p-2 md:p-3 rounded-full transition-all duration-300">
        <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </button>
</section>

<section id="gallery" class="py-20 bg-white scroll-mt-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10">
            <h2 class="text-2xl md:text-4xl font-bold mb-3 text-black tracking-wide capitalize font-playfair-sc">Check Out Our Latest Work</h2>
            <div class="w-16 h-px bg-black mx-auto mb-4"></div>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 mb-8" id="portfolioGrid">
            
            <a href="#link-klien-1" class="relative group block h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>
            <a href="#link-klien-2" class="relative group block h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1537368910025-700350fe46c7?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>
            <a href="#link-klien-3" class="relative group block h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1606800052052-a08af7148866?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>
            <a href="#link-klien-4" class="relative group block h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>
            <a href="#link-klien-5" class="relative group block h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1520854221256-17451cc331bf?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>
            <a href="#link-klien-6" class="relative group block h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1543854589-9b93557008fd?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>

            <a href="#link-klien-7" class="hidden-item hidden relative group h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>
            <a href="#link-klien-8" class="hidden-item hidden relative group h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>
            <a href="#link-klien-9" class="hidden-item hidden relative group h-64 md:h-72 overflow-hidden bg-gray-100">
                <img src="https://images.unsplash.com/photo-1597157639073-69294dc0a0d4?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 transition-colors duration-300"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span class="text-white text-base md:text-lg font-medium tracking-wide opacity-90 group-hover:opacity-100 transition-opacity">Bride & Groom</span>
                </div>
            </a>

        </div>
        
        <div class="flex flex-col items-center gap-4 mt-8">
            <button id="loadMoreBtn" class="inline-block border border-gray-300 text-gray-600 px-8 py-2 text-xs font-medium rounded-full hover:border-black hover:text-black transition-colors duration-300">
                Load More
            </button>
        </div>
    </div>
</section>
@endsection