@extends('layouts.app')

@section('title', 'Gallery - Paradise Villas Arenal | Vacation Rentals El Castillo')

{{-- Keywords de SEO Local optimizadas para tus proyectos en San Carlos --}}
@section('meta')
    <meta name="keywords" content="villas paradise arenal, vacation rentals el castillo, hotel la fortuna costa rica, lake arenal activities, arenal volcano view hotels, horse riding arenal, accommodation el castillo san carlos">
    <meta name="description" content="Explore our visual gallery of Paradise Villas Arenal. Stunning views of the Arenal Volcano and Lake, located just minutes from the best adventure tours in El Castillo.">
@endsection

@section('content')
    <!-- Hero Section -->
    <header class="relative h-[60vh] flex items-center justify-center text-white" 
            style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('{{ asset('images/villas-paradise.jpg') }}'); 
            background-size: cover; background-position: center; background-attachment: fixed;">
        <div class="text-center px-4">
            <h1 class="text-5xl md:text-7xl font-extrabold drop-shadow-2xl uppercase tracking-tighter">Our Gallery</h1>
            <p class="text-xl mt-4 drop-shadow-lg font-light tracking-widest">A visual journey through Paradise</p>
            <div class="w-24 h-1 bg-amber-500 mx-auto mt-6"></div>
        </div>
    </header>

    <!-- Photo Grid Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                @php
                    $imagenes = [
                        '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

                @foreach($imagenes as $img)
                    <div class="relative overflow-hidden rounded-xl shadow-lg group bg-white border border-gray-100">
                        <img src="{{ asset('images/' . $img) }}" 
                             alt="Paradise Villas Gallery - Arenal Volcano View" 
                             class="w-full h-72 object-cover transition duration-700 ease-in-out group-hover:scale-110">
                        
                        <div class="absolute inset-0 bg-stone-900 bg-opacity-0 group-hover:bg-opacity-30 transition duration-500 flex items-center justify-center">
                            <span class="text-white opacity-0 group-hover:opacity-100 border border-white px-4 py-2 rounded-full text-xs uppercase tracking-widest backdrop-blur-sm">
                                View
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Footer automático sin bloques duplicados --}}
    @include('partials.footer_en')
@endsection