@extends('layouts.app')

@section('title', $pageTitle . ' - G4 Homez')

@section('content')
@php
    $heroImage = match($roomCategory) {
        'apartment' => asset('assets/image_jengo.jpg'),
        'conference' => asset('assets/image_ukumbi.jpg'),
        default => asset('assets/about_us.jpg'),
    };

    $fallbackImage = match($roomCategory) {
        'apartment' => asset('assets/image_jengo.jpg'),
        'conference' => asset('assets/image_ukumbi.jpg'),
        default => asset('assets/house.jpg'),
    };
@endphp

<section class="pt-24 relative overflow-hidden">
    <div class="absolute inset-0">
        <img src="{{ $heroImage }}" alt="{{ $pageTitle }} hero image" class="w-full h-full object-cover">
        <div class="absolute inset-0" style="background: linear-gradient(120deg, rgba(42, 12, 12, 0.88) 0%, rgba(91, 13, 9, 0.78) 45%, rgba(91, 13, 9, 0.58) 100%);"></div>
    </div>

    <div class="container mx-auto px-4 relative z-10 py-20 md:py-24">
        <div class="max-w-4xl">
            <span class="inline-flex items-center px-4 py-1 rounded-full text-sm font-semibold mb-6 border border-white border-opacity-25 text-white" style="background: rgba(255,255,255,0.12);">
                <i class="fas fa-heart mr-2"></i> Welcome to G4 Homez
            </span>
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-5 leading-tight">{{ $heroTitle }}</h1>
            <p class="text-xl text-white opacity-95 mb-4">{{ $heroSubtitle }}</p>
            <p class="text-base md:text-lg text-gray-100 max-w-3xl">{{ $heroDescription }}</p>

            <div class="mt-9 flex flex-wrap gap-3">
                <a href="{{ route('booking.index', ['room_category' => $roomCategory]) }}" class="btn-primary px-7 py-3 rounded-lg font-semibold">
                    <i class="fas fa-calendar-check mr-2"></i>{{ $ctaLabel }}
                </a>
                <a href="{{ url('/contact') }}" class="px-7 py-3 rounded-lg font-semibold text-white border border-white border-opacity-40 hover:bg-white hover:text-gray-900 transition">
                    <i class="fas fa-phone-alt mr-2"></i>Contact Us
                </a>
            </div>
        </div>
    </div>
</section>

<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="section-title text-4xl font-bold text-gray-800">Explore Our {{ $pageTitle }}</h2>
            <p class="text-lg text-gray-600 mt-4 max-w-3xl mx-auto">
                Choose the option that fits you best, with high quality standards, spotless cleanliness, and a peaceful atmosphere for a truly memorable experience.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
            @forelse($items as $item)
                @php
                    $amenities = $item->amenities ?? [];
                    $pricingUnit = $item->pricing_unit ?: 'night';
                    $cardImage = $item->first_image_url ?: $fallbackImage;
                @endphp
                <article class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition duration-300 border border-gray-100 h-full flex flex-col">
                    <div class="relative">
                        <img src="{{ $cardImage }}" alt="{{ $item->name }}" class="w-full h-60 object-cover">
                        <div class="absolute top-3 right-3">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold text-white" style="background: rgba(91, 13, 9, 0.88);">
                                {{ ucfirst($item->room_category ?: $roomCategory) }}
                            </span>
                        </div>
                    </div>

                    <div class="p-6 flex-1 flex flex-col">
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">{{ $item->name }}</h3>
                        <p class="text-gray-600 mb-4">
                            {{ \Illuminate\Support\Str::limit($item->description ?: 'Beautifully prepared space with comfort-focused amenities for a relaxing stay.', 155) }}
                        </p>

                        @if($item->room_category === 'conference' && $item->conference_capacity)
                            <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold mb-4" style="background: rgba(91, 13, 9, 0.1); color: #5B0D09;">
                                <i class="fas fa-users mr-2"></i>Capacity: {{ $item->conference_capacity }} guests
                            </div>
                        @endif

                        @if(!empty($amenities))
                            <div class="flex flex-wrap gap-2 mb-5">
                                @foreach(array_slice($amenities, 0, 4) as $amenity)
                                    <span class="px-2 py-1 rounded-full text-xs bg-gray-100 text-gray-700">
                                        {{ ucwords(str_replace('_', ' ', $amenity)) }}
                                    </span>
                                @endforeach
                                @if(count($amenities) > 4)
                                    <span class="px-2 py-1 rounded-full text-xs bg-gray-100 text-gray-700">+{{ count($amenities) - 4 }} more</span>
                                @endif
                            </div>
                        @endif

                        <div class="mt-auto flex items-end justify-between gap-3">
                            <div>
                                <p class="text-xs text-gray-500 uppercase tracking-wide">Starting from</p>
                                <p class="text-2xl font-bold" style="color: var(--primary-color);">
                                    ${{ number_format((float) $item->price, 2) }}
                                    <span class="text-sm text-gray-500 font-medium">/{{ $pricingUnit }}</span>
                                </p>
                            </div>
                            <a href="{{ route('booking.index', ['room_category' => $roomCategory]) }}" class="btn-primary px-4 py-2 rounded-lg text-sm font-semibold">
                                Book Now
                            </a>
                        </div>
                    </div>
                </article>
            @empty
                <div class="col-span-full bg-white rounded-2xl border border-dashed border-gray-300 p-10 text-center">
                    <img src="{{ $heroImage }}" alt="{{ $pageTitle }}" class="w-full max-w-md h-52 object-cover mx-auto rounded-xl mb-6">
                    <h3 class="text-2xl font-bold text-gray-800 mb-3">No {{ strtolower($pageTitle) }} available now</h3>
                    <p class="text-gray-600 mb-6">{{ $emptyMessage }}</p>
                    <a href="{{ url('/contact') }}" class="btn-primary px-6 py-3 rounded-lg font-semibold">
                        Contact G4 Homez
                    </a>
                </div>
            @endforelse
        </div>
    </div>
</section>
@endsection