@extends('layouts.app')

@section('title', 'Nuestras Habitaciones - Paradise Villas Arenal | El Castillo')

@section('meta')
    <meta name="description" content="Explore nuestras opciones de hospedaje en El Castillo, La Fortuna. Desde habitaciones estándar hasta cuádruples con la mejor vista al Volcán Arenal y al Lago." />
    <meta name="keywords" content="hospedaje el castillo la fortuna, cabinas en el castillo, hotel con vista al volcan arenal, habitaciones paradise villas, alojamiento san carlos costa rica" />
@endsection

@section('content')
    <!-- HERO SECTION -->
    <header class="relative h-[60vh] flex items-center justify-center text-white overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="{{ asset('images/hero-rooms.jpg') }}" class="w-full h-full object-cover" alt="Paradise Villas Habitaciones Hero">
            <div class="absolute inset-0 bg-black/50"></div>
        </div>
        <div class="relative z-10 text-center px-4">
            <h1 class="text-5xl md:text-7xl font-extrabold uppercase tracking-tighter drop-shadow-2xl">Nuestras Habitaciones</h1>
            <p class="text-xl md:text-2xl mt-4 font-light tracking-[0.2em] drop-shadow-lg">Confort y Naturaleza en Armonía</p>
            <div class="w-24 h-1 bg-amber-500 mx-auto mt-6"></div>
        </div>
    </header>

    <!-- ROOM TYPES SECTION -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-black text-stone-900 uppercase">Alojamiento</h2>
                <p class="text-stone-500 mt-2 italic">Elija el espacio perfecto para su estadía</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                <!-- Habitación Estándar -->
                <div class="group bg-stone-50 rounded-2xl overflow-hidden shadow-lg transition hover:shadow-2xl">
                    <div class="h-72 overflow-hidden">
                        <img src="{{ asset('images/standard.jpg') }}" class="w-full h-full object-cover transition duration-700 group-hover:scale-110" alt="Habitación Estándar">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Habitación Estándar</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Perfecta para viajeros solos o parejas que buscan un refugio acogedor cerca del volcán.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062&lang=es" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Reservar Ahora</a>
                    </div>
                </div>

                <!-- Habitación Doble -->
                <div class="group bg-stone-50 rounded-2xl overflow-hidden shadow-lg transition hover:shadow-2xl">
                    <div class="h-72 overflow-hidden">
                        <img src="{{ asset('images/double.jpg') }}" class="w-full h-full object-cover transition duration-700 group-hover:scale-110" alt="Habitación Doble">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Habitación Doble</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Espaciosa y cómoda, ideal para parejas que buscan una escapada tranquila con excelentes vistas.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062&lang=es" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Reservar Ahora</a>
                    </div>
                </div>

                <!-- Habitación Triple -->
                <div class="group bg-stone-50 rounded-2xl overflow-hidden shadow-lg transition hover:shadow-2xl">
                    <div class="h-72 overflow-hidden">
                        <img src="{{ asset('images/triple.jpg') }}" class="w-full h-full object-cover transition duration-700 group-hover:scale-110" alt="Habitación Triple">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Habitación Triple</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Perfecta para familias pequeñas o grupos de amigos que exploran la zona del Arenal.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062&lang=es" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Reservar Ahora</a>
                    </div>
                </div>

                <!-- Habitación Cuádruple -->
                <div class="group bg-stone-50 rounded-2xl overflow-hidden shadow-lg transition hover:shadow-2xl">
                    <div class="h-72 overflow-hidden">
                        <img src="{{ asset('images/quadruple.jpg') }}" class="w-full h-full object-cover transition duration-700 group-hover:scale-110" alt="Habitación Cuádruple">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Habitación Cuádruple</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Nuestro espacio más amplio diseñado para familias, ofreciendo máxima comodidad y contacto directo con la naturaleza.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062&lang=es" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Reservar Ahora</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- INTERIOR GALLERY SECTION -->
    <section class="py-20 bg-stone-900 text-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-black uppercase tracking-widest">Detalles de las Habitaciones</h2>
                <p class="text-stone-400 mt-2">Cada rincón diseñado para su relajación</p>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @for ($i = 1; $i <= 7; $i++)
                    <div class="relative overflow-hidden rounded-lg h-64 @if($i == 1) md:col-span-2 @endif">
                        <img src="{{ asset('images/rooms' . $i . '.jpg') }}" class="w-full h-full object-cover hover:scale-105 transition duration-500" alt="Detalle de Habitación {{ $i }}">
                    </div>
                @endfor
            </div>
        </div>
    </section>

    <!-- FINAL CTA -->
    <section class="py-16 bg-white text-center">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-stone-900 mb-8 uppercase text-center">¿Listo para quedarse con nosotros?</h2>
            <div class="flex flex-col md:flex-row justify-center gap-6">
                <a href="https://wa.me/50662884010" class="bg-amber-500 text-stone-900 px-10 py-4 rounded-full font-black uppercase tracking-widest hover:bg-amber-400 transition shadow-xl">
                    WhatsApp: (506) 6288-4010
                </a>
                <a href="mailto:info@villasparadisecr.com" class="bg-stone-900 text-white px-10 py-4 rounded-full font-black uppercase tracking-widest hover:bg-stone-800 transition shadow-xl">
                    Soporte por Email
                </a>
            </div>
        </div>
    </section>

    @include('partials.footer_es')
@endsection