@extends('layouts.app')

@section('content')

<div x-data="{ openModal: false, room: {} }" class="py-12">
    
    <div class="text-center mb-16">
        <h1 class="text-4xl md:text-5xl font-serif text-green-800 mb-4">Our Bungalows</h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">Luxury, comfort, and the magic of the Costa Rican jungle in every detail.</p>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @php
        $rooms = [
            ['img' => 'Standard-Bungalow-2.webp', 'name' => 'Standard Bungalow', 'desc' => 'Hardwood & glass mix with garden views. Ideal for couples or families of four.', 'details' => 'Two double beds, central location near restaurant and pools.'],
            ['img' => 'Glass-Bungalow-02-1.webp', 'name' => 'Glass Bungalow', 'desc' => '300° jungle view from your bed. A unique dream-like experience.', 'details' => 'One queen bed, one sofa bed, wrap-around glass walls, private balcony with hammocks.'],
            ['img' => 'Treehouse-Bungalow-1.webp', 'name' => 'Classic Treehouse', 'desc' => 'Elevated 3m in the fruit trees. Wake up to bird songs and sloths.', 'details' => 'One queen bed, one sofa bed, panoramic views, private balcony with rocking chairs.'],
            ['img' => 'deluxe-treehouse.webp', 'name' => 'Deluxe Treehouse', 'desc' => 'Our most exclusive stay, 6m high. Includes a complimentary Farm Tour.', 'details' => 'One queen bed, one sofa bed, private location, special welcome packages available.'],
            ['img' => 'glass-bungalow-with-jungle-view.webp', 'name' => 'Deluxe Bungalow', 'desc' => 'Our most spacious option for families, quiet and secluded.', 'details' => 'Two queen beds, private balcony with hammocks. Extra bed available upon request.']
        ];
        @endphp

        @foreach($rooms as $r)
        <div class="bg-white rounded-3xl shadow-lg overflow-hidden border border-gray-100">
            <img src="/images/{{ $r['img'] }}" class="w-full h-64 object-cover">
            <div class="p-6">
                <h3 class="text-xl font-bold text-green-800 mb-2">{{ $r['name'] }}</h3>
                <p class="text-gray-600 mb-4 text-sm">{{ $r['desc'] }}</p>
                <button @click="room = {{ json_encode($r) }}; openModal = true" 
                        class="w-full text-green-600 font-bold border border-green-600 py-2 rounded-lg hover:bg-green-600 hover:text-white transition">
                    View Details
                </button>
            </div>
        </div>
        @endforeach
    </div>

    <div x-show="openModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" x-cloak>
        <div @click.away="openModal = false" class="bg-white rounded-3xl p-8 max-w-lg w-full max-h-[90vh] overflow-y-auto">
            <h2 class="text-2xl font-bold text-green-800" x-text="room.name"></h2>
            <p class="text-gray-600 mt-4" x-text="room.details"></p>
            
            <div class="mt-6 border-t pt-4">
                <h4 class="font-bold mb-2">Standard Amenities Included:</h4>
                <ul class="grid grid-cols-2 gap-2 text-sm text-gray-600">
                    <li>✓ Full Breakfast</li><li>✓ Private Balcony</li>
                    <li>✓ Private Bathroom</li><li>✓ Hot Water</li>
                    <li>✓ Air Conditioning</li><li>✓ Satellite TV</li>
                    <li>✓ Wifi & Parking</li><li>✓ Safe & Mini Fridge</li>
                </ul>
            </div>
            
            <div class="mt-8 flex gap-4">
                <a href="https://www.booking.com/hotel/cr/cabanas-heliconias.en.html?aid=365285" target="_blank" class="flex-1 bg-green-600 text-white text-center py-3 rounded-xl font-bold">Book Now</a>
                <button @click="openModal = false" class="px-6 py-3 border rounded-xl">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection