@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-8 sm:px-8 text-center max-h-[70vh]">

    <!-- 🏷️ Title -->
    <h1 class="text-xl sm:text-3xl font-bold text-gray-800 mb-2">
        What would you like to book?
    </h1>

    <p class="text-gray-500 mb-4 text-sm sm:text-base">
        You’re currently viewing <strong class="text-indigo-600">{{ $dewan->name }}</strong>.<br>
        Please choose your preferred booking type below.
    </p>

    <!-- 🧭 Choice Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8 justify-items-center">

        <!-- 🏐 Facility Booking -->
        <a href="{{ route('dewans.show', $dewan->id) }}" 
           class="block w-full sm:w-auto bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition p-6 sm:p-8 text-left">
            <img src="{{ asset('storage/images/facility.jpg') }}" 
                 alt="Facilities" 
                 class="w-full h-40 sm:h-44 object-cover rounded-lg mb-4">

            <h2 class="text-lg sm:text-xl font-semibold text-indigo-600">Book Sports Facilities</h2>
            <p class="text-gray-600 text-sm sm:text-base mt-2">
                Reserve a specific court, field, or room at this Dewan.
            </p>
        </a>

        <!-- 🏛️ Whole Dewan Booking -->
        <a href="{{ route('dewans.reserve', $dewan->id) }}" 
           class="block w-full sm:w-auto bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition p-6 sm:p-8 text-left">
            <img src="{{ asset('storage/images/dewan.jpg') }}" 
                 alt="Dewan" 
                 class="w-full h-40 sm:h-44 object-cover rounded-lg mb-4">

            <h2 class="text-lg sm:text-xl font-semibold text-indigo-600">Book the Entire Dewan</h2>
            <p class="text-gray-600 text-sm sm:text-base mt-2">
                Perfect for kenduris, weddings, or large gatherings.
            </p>
        </a>

    </div>

    <!-- 🔙 Back Button -->
    <div class="mt-4">
        <a href="{{ route('dewans.index') }}" 
           class="inline-flex items-center gap-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-medium px-5 py-2 rounded-md transition">
            ← Back to Dewans
        </a>
    </div>

</div>
@endsection