@extends('layouts.site')
@section('title', $roomType->name)

@section('content')
    <section class="bg-slate-950 py-14 text-white">
        <div class="mx-auto max-w-4xl px-4 text-center sm:px-6">
            <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Rooms & Suites</p>
            <h1 class="mt-2 font-serif text-4xl font-bold">{{ $roomType->name }}</h1>
            <p class="mt-3 text-2xl font-extrabold text-gold-400">@money($roomType->base_price)<span class="text-sm font-medium text-slate-400"> / night</span></p>
        </div>
    </section>

    <section class="mx-auto max-w-4xl px-4 py-12 sm:px-6">
        @if ($roomType->image)
            <img src="{{ asset($roomType->image) }}" alt="{{ $roomType->name }}" class="h-72 w-full rounded-3xl object-cover">
        @else
            <div class="flex h-64 items-center justify-center rounded-3xl bg-gradient-to-br from-slate-800 to-slate-950 text-7xl">🛏</div>
        @endif
        <div class="mt-8 grid gap-8 md:grid-cols-3">
            <div class="md:col-span-2">
                <h2 class="font-serif text-xl font-bold text-slate-900">About this room</h2>
                <p class="mt-3 leading-relaxed text-slate-600">{{ $roomType->description }}</p>
                <h3 class="mt-6 font-serif text-lg font-bold text-slate-900">Amenities</h3>
                <div class="mt-3 grid grid-cols-2 gap-2">
                    @foreach ($roomType->amenities ?? [] as $amenity)
                        <div class="rounded-xl bg-white px-4 py-3 text-sm font-semibold text-slate-700 ring-1 ring-slate-200">✓ {{ $amenity }}</div>
                    @endforeach
                </div>
            </div>
            <div class="h-fit rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between"><dt class="text-slate-400">Sleeps</dt><dd class="font-bold text-slate-800">{{ $roomType->capacity_adults }} adults, {{ $roomType->capacity_children }} children</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-400">Size</dt><dd class="font-bold text-slate-800">{{ $roomType->size_sqm }} m²</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-400">Available rooms</dt><dd class="font-bold text-emerald-600">{{ $roomType->rooms_count }}</dd></div>
                    <div class="flex justify-between border-t border-slate-100 pt-3"><dt class="font-bold text-slate-800">Rate</dt><dd class="font-extrabold text-gold-600">@money($roomType->base_price)/night</dd></div>
                </dl>
                <a href="{{ route('site.book', ['room_type' => $roomType->id]) }}" class="mt-5 block rounded-xl bg-gradient-to-r from-gold-400 to-gold-600 py-3.5 text-center text-sm font-extrabold text-slate-950 hover:brightness-110">Book now</a>
            </div>
        </div>
    </section>
@endsection
