@extends('layouts.app')

@section('title', 'Our Rooms - Paradise Villas Arenal | El Castillo')

@section('meta')
    <meta name="description" content="Explore our lodging options in El Castillo, La Fortuna. From standard to quadruple rooms with the best view of the Arenal Volcano and Lake." />
    <meta name="keywords" content="lodging castillo la fortuna, cabins in el castillo, hotel rooms arenal volcano view, paradise villas rooms, accommodation 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 Rooms 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">Our Rooms</h1>
            <p class="text-xl md:text-2xl mt-4 font-light tracking-[0.2em] drop-shadow-lg">Comfort & Nature in Harmony</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">Accommodations</h2>
                <p class="text-stone-500 mt-2 italic">Choose the perfect space for your stay</p>
            </div>
@include('components.interactive-map')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                <!-- Standard Room -->
                <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="Standard Room">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Standard Room</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Perfect for solo travelers or couples looking for a cozy retreat near the volcano.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Book Now</a>
                    </div>
                </div>

                <!-- Double Room -->
                <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="Double Room">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Double Room</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Spacious and comfortable, ideal for couples seeking a peaceful getaway with great views.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Book Now</a>
                    </div>
                </div>

                <!-- Triple Room -->
                <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="Triple Room">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Triple Room</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Perfect for small families or groups of friends exploring the Arenal area.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Book Now</a>
                    </div>
                </div>

                <!-- Quadruple Room -->
                <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="Quadruple Room">
                    </div>
                    <div class="p-8">
                        <h3 class="text-2xl font-bold text-stone-900 mb-2 uppercase">Quadruple Room</h3>
                        <p class="text-stone-600 mb-6 leading-relaxed text-sm">Our largest space designed for families, offering ultimate comfort and direct nature contact.</p>
                        <a href="https://book.securebookings.net/roomrate?id=90dae528-46dd-1670985435-459d-bbb1-4dfac9828062" class="inline-block border-b-2 border-amber-500 font-bold uppercase tracking-widest text-xs hover:text-amber-600 transition">Book Now</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">Room Details</h2>
                <p class="text-stone-400 mt-2">Every corner designed for your relaxation</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="Room Detail {{ $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">Ready to stay with us?</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">
                    Email Support
                </a>
            </div>
        </div>
    </section>

    @include('partials.footer_en')
@endsection