@extends('layouts.app')

@section('content')
<main class="bg-white">
    <!-- HERO SECTION -->
    <section class="relative h-[40vh] flex items-center justify-center bg-stone-900 overflow-hidden">
        <img src="{{ asset('images/villas-paradise.jpg') }}" 
             class="absolute inset-0 w-full h-full object-cover opacity-60" 
             alt="Paradise Villas Gallery">
        <div class="relative z-10 text-center px-4">
            <h1 class="text-4xl md:text-7xl font-extrabold text-white uppercase tracking-widest drop-shadow-lg">
                Nuestra Galería
            </h1>
            <div class="w-24 h-1 bg-amber-500 mx-auto mt-6"></div>
        </div>
    </section>

    <!-- SECCIÓN DE FOTOS -->
    <section class="py-16 bg-stone-50">
        <div class="container mx-auto px-6">
            
            @php
                // LISTA EXACTA PROPORCIONADA
                $fotosReales = [
                    'el-castillo-la-fortuna-hotel.jpg',
                    'el-castillo-la-fortuna-hotel2.jpg',
                    'el-castillo-la-fortuna-hotel3.jpg',
                    'el-castillo-la-fortuna-hotel4.jpg',
                    'el-castillo-la-fortuna-hotel6.jpg',
                    'fusion-mirador-arenal.jpg',
                    'fusion-mirador-arenal1.jpg',
                    'fusion-mirador-arenal3.jpg',
                    'fusion-mirador-arenal4.jpg',
                    'fusion-mirador-arenal7.jpg',
                    'fusion-mirador-arenal8.jpg',
                    'fusion-mirador-arenal9.jpg',
                    'fusion-mirador-arenal10.jpg',
                    'fusion-mirador-arenal11.jpg',
                    'hotel.jpg',
                    'hotel2.jpg',
                    'hotel3.jpg',
                    'villas-paradise.jpg',
                    'villas-paradise2.jpg',
                    'villas-paradise3.jpg',
                    'villas-paradise4.jpg',
                    'villas-paradise5.jpg',
                    'villas-paradise7.jpg'
                ];
            @endphp

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($fotosReales as $archivo)
                    <div class="group relative overflow-hidden rounded-xl shadow-md h-72 bg-stone-200">
                        <img src="{{ asset('images/' . $archivo) }}" 
                             alt="Paradise Villas CR - El Castillo" 
                             class="w-full h-full object-cover transition duration-700 group-hover:scale-110">
                        
                        <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition duration-500 flex items-center justify-center">
                            <span class="text-white border border-white px-4 py-2 rounded-full text-[10px] uppercase tracking-widest">
                                Ampliar
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- CTA WHATSAPP -->
            <div class="mt-20 text-center">
                <a href="https://wa.me/50662884010" target="_blank" 
                   class="inline-block bg-stone-900 text-white px-12 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-amber-600 transition-all shadow-xl">
                    Reservar ahora
                </a>
            </div>
        </div>
    </section>
</main>
@endsection