{{-- resources/views/livewire/property-landing-page.blade.php --}}
<div class="kiosk-container bg-white d-flex flex-column vh-100">
    {{-- Header (shrink to content) --}}
    <div class="text-center py-4 flex-shrink-0">
        <img src="{{ asset('storage/assets/img/' . Str::slug($property->PropertyName) . '.png') }}"
            alt="{{ $property->PropertyName }} Logo"
            onerror="this.onerror=null;this.src='{{ asset('storage/assets/img/placeholder.png') }}';"
            style="max-height:500px; max-width:80vw; width:auto;" class="mb-3">
    </div>

    {{-- Tiles container (fills remaining height) --}}
    <div class="flex-fill px-3 pb-4 d-flex flex-column gap-4">
        {{-- Self Check-In --}}
        <div class="flex-fill">
            <a href="{{ route('self.checkin.card', $property->PropertyID) }}"
                class="d-block text-decoration-none h-100">
                <div class="card kiosk-card overflow-hidden h-100" style="
              border-radius:15px;
              background: url('{{ asset('storage/assets/img/selfcheck-bg.png') }}') center/cover no-repeat;
            ">
                    <div class="h-100 w-100 d-flex flex-column justify-content-center align-items-center"
                        style="background: rgba(0,0,0,0.5);">
                        <i class="fa fa-mobile-alt fa-4x mb-3"></i>
                        <h2 class="mb-0">Self Check-In</h2>
                    </div>
                </div>
            </a>
        </div>

        {{-- Book Your Stay --}}
        <div class="flex-fill">
            <a href="https://property.godo.is/booking.php?propid={{ $property->PropertyID }}&referer=brafakiosk"
                class="d-block text-decoration-none h-100">
                <div class="card kiosk-card overflow-hidden h-100" style="
              border-radius:15px;
              background: url('{{ asset('storage/assets/img/stay-bg.png') }}') center/cover no-repeat;
            ">
                    <div class="h-100 w-100 d-flex flex-column justify-content-center align-items-center"
                        style="background: rgba(0,0,0,0.5);">
                        <i class="fa fa-bed fa-4x mb-3"></i>
                        <h2 class="mb-0">Book Your Stay</h2>
                    </div>
                </div>
            </a>
        </div>

        {{-- Book Your Tour --}}
        <div class="flex-fill">
            @if($tourdeskUrl)
            <a href="{{ $tourdeskUrl }}" class="d-block text-decoration-none h-100">
                <div class="card kiosk-card overflow-hidden h-100" style="
                border-radius:15px;
                background: url('{{ asset('storage/assets/img/tour-bg.png') }}') center/cover no-repeat;
              ">
                    <div class="h-100 w-100 d-flex flex-column justify-content-center align-items-center"
                        style="background: rgba(0,0,0,0.5);">
                        <i class="fa fa-bus fa-4x mb-3"></i>
                        <h2 class="mb-0">Book Your Tour</h2>
                    </div>
                </div>
            </a>
            @else
            <div class="card kiosk-card overflow-hidden text-center h-100" style="
              border-radius:15px;
              background: #f8f9fa;
            ">
                <div class="h-100 d-flex flex-column justify-content-center align-items-center">
                    <i class="fa fa-bus fa-4x mb-3"></i>
                    <h2 class="mb-0">Tour Bookings Coming Soon</h2>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

@push('css')
<style>
    /* full-width white background */
    .kiosk-container {
        max-width: 100% !important;
        padding: 0 !important;
        background: #fff;
    }

    /* elevate cards */
    .kiosk-card {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

    /* force white icons & text */
    .kiosk-card i,
    .kiosk-card h2 {
        color: #fff !important;
    }

    .kiosk-card i:hover,
    .kiosk-card h2:hover {
        color: #fff !important;
    }

    /* larger headings */
    .kiosk-card h2 {
        font-size: 2.5rem !important;
    }
</style>
@endpush