@extends('layouts.site')
@section('title', 'Rooms & Suites')

@section('content')
    <section class="bg-slate-950 py-14 text-center text-white">
        <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Accommodation</p>
        <h1 class="mt-2 font-serif text-4xl font-bold">Rooms & Suites</h1>
        <p class="mx-auto mt-3 max-w-xl px-4 text-slate-300">From cosy standard rooms to our flagship Presidential Suite — every space designed for rest and delight.</p>
    </section>

    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
        <div class="grid gap-6 md:grid-cols-2">
            @foreach ($roomTypes as $type)
                <div class="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200">
                    @if ($type->image)
                        <img src="{{ asset($type->image) }}" alt="{{ $type->name }}" class="h-52 w-full object-cover">
                    @else
                        <div class="flex h-52 items-center justify-center bg-gradient-to-br from-slate-800 to-slate-950 text-6xl">🛏</div>
                    @endif
                    <div class="p-6">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <h2 class="font-serif text-2xl font-bold text-slate-900">{{ $type->name }}</h2>
                                <p class="mt-1 text-sm text-slate-500">{{ $type->capacity_adults }} adults · {{ $type->capacity_children }} children · {{ $type->size_sqm }}m² · {{ $type->rooms_count }} available</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xl font-extrabold text-gold-600">@money($type->base_price)</p>
                                <p class="text-xs text-slate-400">per night</p>
                            </div>
                        </div>
                        <p class="mt-3 text-sm leading-relaxed text-slate-600">{{ $type->description }}</p>
                        <div class="mt-3 flex flex-wrap gap-1.5">
                            @foreach ($type->amenities ?? [] as $amenity)
                                <span class="rounded-full bg-stone-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600">{{ $amenity }}</span>
                            @endforeach
                        </div>
                        <div class="mt-5 flex gap-2">
                            <a href="{{ route('site.book', ['room_type' => $type->id]) }}" class="flex-1 rounded-xl bg-slate-950 py-3 text-center text-sm font-bold text-white hover:bg-slate-800">Book this room</a>
                            <a href="{{ route('site.room_type', $type) }}" class="rounded-xl px-5 py-3 text-sm font-bold text-slate-600 ring-1 ring-slate-200 hover:bg-stone-100">Details</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection
