@extends('layouts.site')
@section('title', 'Luxury Hotel, Dining & Hospitality')

@section('content')
    {{-- Hero --}}
    <section class="relative overflow-hidden bg-slate-950 text-white">
        <div class="absolute inset-0 opacity-30" style="background-image: radial-gradient(circle at 20% 20%, #c9a22740 0, transparent 45%), radial-gradient(circle at 80% 60%, #4f46e540 0, transparent 45%)"></div>
        <div class="relative mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:py-32">
            <p class="mb-4 text-xs font-bold uppercase tracking-[0.35em] text-gold-400">Welcome to Epelcon Hospitality</p>
            <h1 class="mx-auto max-w-3xl font-serif text-4xl font-bold leading-tight sm:text-5xl lg:text-6xl">Where every stay feels like a <span class="text-gold-400">celebration</span></h1>
            <p class="mx-auto mt-5 max-w-xl text-slate-300">Elegant rooms, award-winning cuisine, curated wellness plans and a rewards programme that treats you like family.</p>
            <div class="mt-8 flex flex-wrap justify-center gap-3">
                <a href="{{ route('site.book') }}" class="rounded-xl bg-gradient-to-r from-gold-400 to-gold-600 px-7 py-3.5 text-sm font-extrabold text-slate-950 shadow-xl shadow-gold-500/20 hover:brightness-110">Book your stay</a>
                <a href="{{ route('site.order') }}" class="rounded-xl bg-white/10 px-7 py-3.5 text-sm font-bold text-white ring-1 ring-white/20 hover:bg-white/20">Order food & drinks</a>
            </div>
        </div>
    </section>

    {{-- Quick actions (app-like) --}}
    <section class="mx-auto -mt-8 max-w-5xl px-4 sm:px-6">
        <div class="grid grid-cols-2 gap-3 rounded-3xl bg-white p-4 shadow-xl ring-1 ring-slate-200 sm:grid-cols-4">
            @foreach ([['site.book', '🛏', 'Book a room'], ['site.order', '🍽', 'Order food'], ['site.membership', '💳', 'Join membership'], ['site.dietary_plans', '🥗', 'Dietary plans']] as [$routeName, $icon, $label])
                <a href="{{ route($routeName) }}" class="flex flex-col items-center gap-2 rounded-2xl p-4 text-center transition hover:bg-stone-100">
                    <span class="text-3xl">{{ $icon }}</span>
                    <span class="text-xs font-bold text-slate-700">{{ $label }}</span>
                </a>
            @endforeach
        </div>
    </section>

    {{-- Rooms --}}
    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6">
        <div class="mb-8 flex items-end justify-between">
            <div>
                <p class="text-xs font-bold uppercase tracking-widest text-gold-600">Stay with us</p>
                <h2 class="font-serif text-3xl font-bold text-slate-900">Rooms & suites</h2>
            </div>
            <a href="{{ route('site.rooms') }}" class="text-sm font-bold text-gold-600 hover:underline">View all →</a>
        </div>
        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($roomTypes as $type)
                <a href="{{ route('site.room_type', $type) }}" class="group overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-1 hover:shadow-xl">
                    @if ($type->image)
                        <img src="{{ asset($type->image) }}" alt="{{ $type->name }}" class="h-40 w-full object-cover transition group-hover:scale-105">
                    @else
                        <div class="flex h-40 items-center justify-center bg-gradient-to-br from-slate-800 to-slate-950 text-5xl">🛏</div>
                    @endif
                    <div class="p-5">
                        <h3 class="font-serif text-lg font-bold text-slate-900">{{ $type->name }}</h3>
                        <p class="mt-1 text-xs text-slate-500">{{ $type->capacity_adults }} adults · {{ $type->size_sqm }}m²</p>
                        <p class="mt-3 text-lg font-extrabold text-gold-600">@money($type->base_price)<span class="text-xs font-medium text-slate-400">/night</span></p>
                    </div>
                </a>
            @endforeach
        </div>
    </section>

    {{-- Featured dishes --}}
    <section class="bg-slate-950 py-16 text-white">
        <div class="mx-auto max-w-7xl px-4 sm:px-6">
            <div class="mb-8 flex items-end justify-between">
                <div>
                    <p class="text-xs font-bold uppercase tracking-widest text-gold-400">From our kitchen & bar</p>
                    <h2 class="font-serif text-3xl font-bold">Signature dishes & drinks</h2>
                </div>
                <a href="{{ route('site.dining') }}" class="text-sm font-bold text-gold-400 hover:underline">Full menu →</a>
            </div>
            <div class="no-scrollbar flex gap-4 overflow-x-auto pb-2">
                @foreach ($featuredDishes as $dish)
                    <div class="w-64 shrink-0 overflow-hidden rounded-3xl bg-white/5 ring-1 ring-white/10">
                        @if ($dish->image)
                            <img src="{{ asset($dish->image) }}" alt="{{ $dish->name }}" class="h-32 w-full object-cover">
                        @endif
                        <div class="p-5 {{ $dish->image ? 'pt-4' : '' }}">
                        @unless ($dish->image)<span class="text-4xl">{{ $dish->type === 'drink' ? '🍹' : '🍽' }}</span>@endunless
                        <h3 class="mt-3 font-bold">{{ $dish->name }}</h3>
                        <p class="mt-1 text-xs text-slate-400">{{ $dish->cuisine->name ?? '' }}{{ $dish->chef ? ' · by ' . $dish->chef->name : '' }}</p>
                        <div class="mt-3 flex items-center justify-between">
                            <span class="font-extrabold text-gold-400">@money($dish->price)</span>
                            <a href="{{ route('site.order') }}" class="rounded-lg bg-gold-500/20 px-3 py-1.5 text-xs font-bold text-gold-400 hover:bg-gold-500/30">Order</a>
                        </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Chefs --}}
    @if ($chefs->isNotEmpty())
        <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6">
            <div class="mb-8 text-center">
                <p class="text-xs font-bold uppercase tracking-widest text-gold-600">Culinary masters</p>
                <h2 class="font-serif text-3xl font-bold text-slate-900">Meet our chefs</h2>
            </div>
            <div class="grid gap-5 sm:grid-cols-3">
                @foreach ($chefs as $chef)
                    <div class="rounded-3xl bg-white p-6 text-center shadow-sm ring-1 ring-slate-200">
                        @if ($chef->photo)
                            <img src="{{ asset($chef->photo) }}" alt="{{ $chef->name }}" class="mx-auto h-20 w-20 rounded-full object-cover">
                        @else
                            <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-orange-400 to-rose-500 text-3xl">👨‍🍳</div>
                        @endif
                        <h3 class="mt-4 font-serif text-lg font-bold text-slate-900">{{ $chef->name }}</h3>
                        <p class="text-xs font-bold uppercase tracking-wide text-orange-600">{{ $chef->title }}</p>
                        <p class="mt-2 text-sm text-slate-500">{{ Str::limit($chef->bio, 110) }}</p>
                        <p class="mt-3 text-xs font-bold text-slate-400">★ {{ $chef->rating }} · {{ $chef->years_experience }} years</p>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Guest reviews --}}
    @if (($reviews ?? collect())->isNotEmpty())
        <section class="bg-slate-950 py-16 text-white">
            <div class="mx-auto max-w-7xl px-4 sm:px-6">
                <div class="mb-8 text-center">
                    <p class="text-xs font-bold uppercase tracking-widest text-gold-400">Real stays, real words</p>
                    <h2 class="font-serif text-3xl font-bold">What our guests say</h2>
                </div>
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($reviews as $review)
                        <div class="flex flex-col rounded-3xl bg-white/5 p-6 ring-1 ring-white/10">
                            <div class="text-lg tracking-widest">
                                @for ($i = 1; $i <= 5; $i++)<span class="{{ $i <= $review->rating ? 'text-gold-400' : 'text-slate-700' }}">★</span>@endfor
                            </div>
                            @if ($review->title)<p class="mt-3 font-bold">“{{ $review->title }}”</p>@endif
                            @if ($review->comment)<p class="mt-2 flex-1 text-sm leading-relaxed text-slate-300">{{ Str::limit($review->comment, 160) }}</p>@endif
                            <p class="mt-4 text-xs font-bold uppercase tracking-widest text-gold-400">— {{ Str::of($review->customer_name)->before(' ') }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Membership CTA --}}
    <section class="mx-auto max-w-7xl px-4 pb-4 sm:px-6">
        <div class="overflow-hidden rounded-3xl bg-gradient-to-r from-indigo-700 via-violet-700 to-purple-800 px-6 py-12 text-center text-white sm:px-12">
            <h2 class="font-serif text-3xl font-bold">Join the Epelcon Circle</h2>
            <p class="mx-auto mt-3 max-w-xl text-indigo-200">Exclusive discounts, late checkouts, reward points on every naira spent — and bonus points every time you refer a friend.</p>
            <div class="mt-6 flex flex-wrap justify-center gap-6">
                @foreach ($plans as $plan)
                    <div class="rounded-2xl bg-white/10 px-6 py-4 ring-1 ring-white/20">
                        <p class="font-extrabold" style="color: {{ $plan->color }}">{{ $plan->name }}</p>
                        <p class="text-sm font-bold">@money($plan->price)<span class="text-xs font-normal text-indigo-200">/yr</span></p>
                    </div>
                @endforeach
            </div>
            <a href="{{ route('site.membership') }}" class="mt-7 inline-block rounded-xl bg-white px-7 py-3.5 text-sm font-extrabold text-indigo-700 hover:bg-indigo-50">Explore membership →</a>
        </div>
    </section>
@endsection
