@extends('layouts.app')

@section('title')
    {{ $hotel->getTranslation('seo_title') }}
@endsection

@section('meta_description')
    {{ $hotel->getTranslation('seo_description') }}
@endsection

@section('content')
    <!-- 1. Big Luxury Hero Section -->
    <div class="relative min-h-[90vh] flex items-center justify-center bg-cover bg-center overflow-hidden" style="background-image: linear-gradient(rgba(10, 12, 17, 0.4), rgba(10, 12, 17, 0.85)), url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=1920&q=80');">
        <!-- Parallax/Floating elements -->
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-500/5 via-transparent to-transparent pointer-events-none"></div>

        <div class="relative text-center px-4 max-w-4xl space-y-6 pt-16">
            <span class="inline-block text-xs font-bold uppercase tracking-[0.3em] text-amber-400">
                @if(App::getLocale() === 'tr') EŞSİZ BİR EGE RÜYASI @elseif(App::getLocale() === 'en') AN UNFORGETTABLE AEGEAN DREAM @elseif(App::getLocale() === 'de') EIN UNVERGESSLICHER ÄGÄIS-TRAUM @elseif(App::getLocale() === 'ru') НЕЗАБЫВАЕМАЯ ЭГЕЙСКАЯ МЕЧТА @else حلم بحر إيجة الذي لا يُنسى @endif
            </span>
            <h1 class="text-4xl md:text-7xl font-bold leading-tight text-white font-luxury drop-shadow-2xl">
                @if(App::getLocale() === 'tr') Ruhunuzu Dinlendiren Lüks @elseif(App::getLocale() === 'en') Luxury that Restores Your Soul @elseif(App::getLocale() === 'de') Luxus, der Ihre Seele baumeln lässt @elseif(App::getLocale() === 'ru') Роскошь, которая успокаивает душу @else الفخامة التي تريح روحك @endif
            </h1>
            <p class="text-sm md:text-lg text-gray-300 max-w-2xl mx-auto font-light drop-shadow-md leading-relaxed">
                {{ $hotel->getTranslation('description') }}
            </p>
            <div class="pt-6">
                <a href="#rooms" class="btn-gold">
                    @if(App::getLocale() === 'tr') ODALARI KEŞFET @elseif(App::getLocale() === 'en') DISCOVER ROOMS @elseif(App::getLocale() === 'de') ZIMMER ENTDECKEN @elseif(App::getLocale() === 'ru') ОТКРОЙТЕ НОМЕРА @else اكتشف الغرف @endif
                </a>
            </div>
        </div>
    </div>

    <!-- 2. Slick Search Booking Bar -->
    <div class="relative px-[8%] -mt-16 z-20">
        <form action="/{{ App::getLocale() }}/booking" method="GET" class="glass-panel p-8 bg-gray-950/80 rounded-2xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 items-end">
            <div>
                <label class="block text-xs font-bold uppercase text-amber-500 tracking-wider mb-2">
                    @if(App::getLocale() === 'tr') GİRİŞ TARİHİ @elseif(App::getLocale() === 'en') CHECK-IN DATE @else تاريخ الوصول @endif
                </label>
                <input 
                    type="date" 
                    name="check_in" 
                    value="2026-06-15"
                    required
                    class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 text-white text-xs font-semibold focus:ring-1 focus:ring-amber-500 focus:border-amber-500"
                />
            </div>
            <div>
                <label class="block text-xs font-bold uppercase text-amber-500 tracking-wider mb-2">
                    @if(App::getLocale() === 'tr') ÇIKIŞ TARİHİ @elseif(App::getLocale() === 'en') CHECK-OUT DATE @else تاريخ المغادرة @endif
                </label>
                <input 
                    type="date" 
                    name="check_out" 
                    value="2026-06-22"
                    required
                    class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 text-white text-xs font-semibold focus:ring-1 focus:ring-amber-500 focus:border-amber-500"
                />
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold uppercase text-amber-500 tracking-wider mb-2">
                        @if(App::getLocale() === 'tr') YETİŞKİN @elseif(App::getLocale() === 'en') ADULTS @else الكبار @endif
                    </label>
                    <select name="adults" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-3 py-3 text-white text-xs font-bold focus:ring-1 focus:ring-amber-500">
                        <option value="1">1</option>
                        <option value="2" selected>2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-bold uppercase text-amber-500 tracking-wider mb-2">
                        @if(App::getLocale() === 'tr') ÇOCUK @elseif(App::getLocale() === 'en') CHILDREN @else الأطفال @endif
                    </label>
                    <select name="children" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-3 py-3 text-white text-xs font-bold focus:ring-1 focus:ring-amber-500">
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-xs font-bold uppercase text-amber-500 tracking-wider mb-2">
                    @if(App::getLocale() === 'tr') ODA SAYISI @elseif(App::getLocale() === 'en') ROOMS COUNT @else عدد الغرف @endif
                </label>
                <select name="rooms_count" class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 text-white text-xs font-bold focus:ring-1 focus:ring-amber-500">
                    <option value="1" selected>1 Oda</option>
                    <option value="2">2 Oda</option>
                    <option value="3">3 Oda</option>
                </select>
            </div>
            <div>
                <button type="submit" class="btn-gold w-full py-3.5 text-xs font-bold rounded-lg tracking-widest uppercase">
                    @if(App::getLocale() === 'tr') EN İYİ FİYATI BUL @elseif(App::getLocale() === 'en') FIND BEST PRICE @elseif(App::getLocale() === 'de') PREIS FINDEN @elseif(App::getLocale() === 'ru') НАЙТИ ЦЕНУ @else ابحث عن السعر @endif
                </button>
            </div>
        </form>
    </div>

    <!-- 3. Featured Rooms Section -->
    <section id="rooms" class="py-24 px-[8%] space-y-16">
        <div class="text-center space-y-3">
            <span class="inline-block text-xs font-bold uppercase tracking-[0.2em] text-amber-500">
                @if(App::getLocale() === 'tr') SEÇKİN KONAKLAMA @else LUXURIOUS ACCOMMODATION @endif
            </span>
            <h2 class="text-3xl md:text-5xl font-bold font-luxury">
                @if(App::getLocale() === 'tr') Oda ve Süitlerimiz @else Our Rooms & Suites @endif
            </h2>
            <p class="text-xs md:text-sm text-gray-500 max-w-lg mx-auto">
                @if(App::getLocale() === 'tr') Ege\'nin göz kamaştıran manzaraları eşliğinde eşsiz bir dinlenme deneyimi sizi bekliyor. @else A relaxing and luxurious experience overlooking the dazzling views of the Aegean. @endif
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($roomTypes as $roomType)
                <div class="glass-panel overflow-hidden flex flex-col h-full bg-gray-950/40 rounded-2xl reveal-on-scroll">
                    <!-- Image -->
                    <div class="h-64 relative bg-gray-900 overflow-hidden">
                        <img 
                            src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=800&q=80" 
                            alt="{{ $roomType->getTranslation('name') }}" 
                            class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
                        />
                        <div class="absolute top-4 right-4 bg-gray-950/80 backdrop-blur-md px-3 py-1.5 rounded-lg border border-amber-500/20 text-xs font-bold text-amber-400">
                            €{{ $roomType->base_price }} / @if(App::getLocale() === 'tr') Gece @else Night @endif
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="p-6 flex-grow flex flex-col justify-between space-y-6">
                        <div class="space-y-4">
                            <h3 class="text-xl font-bold font-luxury text-white">
                                {{ $roomType->getTranslation('name') }}
                            </h3>
                            <p class="text-xs text-gray-400 leading-relaxed font-light line-clamp-3">
                                {{ $roomType->getTranslation('description') }}
                            </p>
                            
                            <!-- Capacity details -->
                            <div class="flex items-center space-x-4 text-xs text-gray-500 pt-2 border-t border-gray-900">
                                <span><i class="fa-solid fa-user text-amber-500 mr-1"></i> {{ $roomType->max_adults }} @if(App::getLocale() === 'tr') Yetişkin @else Adults @endif</span>
                                <span><i class="fa-solid fa-child text-amber-500 mr-1"></i> {{ $roomType->max_children }} @if(App::getLocale() === 'tr') Çocuk @else Children @endif</span>
                            </div>

                            <!-- Amenities -->
                            <div class="flex flex-wrap gap-2 pt-2">
                                @foreach(array_slice($roomType->getTranslation('amenities') ?? [], 0, 4) as $amenity)
                                    <span class="inline-flex items-center text-[10px] bg-gray-900 border border-gray-800 text-gray-300 px-2 py-1 rounded-md">
                                        <i class="fa-solid fa-check text-[8px] text-amber-500 mr-1"></i>
                                        {{ $amenity }}
                                    </span>
                                @endforeach
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="grid grid-cols-2 gap-4 pt-4 border-t border-gray-900">
                            <a href="/{{ App::getLocale() }}/rooms/{{ $roomType->slug }}" class="text-xs font-semibold text-center text-gray-400 hover:text-white py-3 border border-gray-800 rounded-xl hover:bg-gray-900 transition-colors">
                                @if(App::getLocale() === 'tr') DETAYLAR @else DETAILS @endif
                            </a>
                            <a href="/{{ App::getLocale() }}/booking?room_type_id={{ $roomType->id }}" class="text-xs font-bold text-center bg-amber-500 text-gray-950 py-3 rounded-xl hover:bg-amber-400 transition-colors">
                                @if(App::getLocale() === 'tr') REZERVASYON @else BOOK NOW @endif
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <!-- 4. Restoran / Spa / Havuz Section -->
    <section class="py-24 bg-gray-900/40 border-y border-gray-900 px-[8%] grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        <div class="space-y-6 reveal-on-scroll">
            <span class="inline-block text-xs font-bold uppercase tracking-[0.2em] text-amber-500">
                @if(App::getLocale() === 'tr') ARINMA VE LEZZET @else PURIFICATION & TASTE @endif
            </span>
            <h2 class="text-3xl md:text-5xl font-bold font-luxury">
                @if(App::getLocale() === 'tr') Aura Alakart Şef Restoranı & Termal Spa @else Aura Culinary & Thermal Spa Sanctuary @endif
            </h2>
            <p class="text-xs md:text-sm text-gray-400 leading-relaxed font-light">
                @if(App::getLocale() === 'tr')
                    Ödüllü Akdeniz ve Ege füzyon mutfak şeflerimizle hazırlanan seçkin lezzetler, gün batımı eşliğinde masanızı taçlandırıyor. Ardından, tamamen doğal mineralli termal kaynak havuzumuz, sauna ve profesyonel masaj terapistlerimizle vücudunuzu ve ruhunuzu şımartın.
                @else
                    Exquisite flavors prepared by our award-winning Mediterranean and Aegean fusion culinary chefs crown your table at sunset. Then, pamper your body and soul with our completely natural mineral thermal spring pool, sauna, and professional massage therapists.
                @endif
            </p>
            <div class="grid grid-cols-2 gap-6 pt-4 text-xs font-semibold">
                <div class="flex items-center space-x-2">
                    <span class="p-2 bg-amber-500/10 text-amber-400 rounded-lg"><i class="fa-solid fa-utensils"></i></span>
                    <span>2 Michelin @if(App::getLocale() === 'tr') Yıldızlı Şef @else Star Chef @endif</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="p-2 bg-amber-500/10 text-amber-400 rounded-lg"><i class="fa-solid fa-spa"></i></span>
                    <span>1200 m² @if(App::getLocale() === 'tr') Termal Spa Alanı @else Thermal Spa Area @endif</span>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-4 reveal-on-scroll">
            <div class="space-y-4">
                <div class="h-64 rounded-2xl overflow-hidden bg-gray-900 border border-gray-800">
                    <img src="https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=500&q=80" alt="Restaurant" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"/>
                </div>
                <div class="h-44 rounded-2xl overflow-hidden bg-gray-900 border border-gray-800">
                    <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=500&q=80" alt="Spa" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"/>
                </div>
            </div>
            <div class="space-y-4 pt-8">
                <div class="h-44 rounded-2xl overflow-hidden bg-gray-900 border border-gray-800">
                    <img src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=500&q=80" alt="Wine" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"/>
                </div>
                <div class="h-64 rounded-2xl overflow-hidden bg-gray-900 border border-gray-800">
                    <img src="https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?auto=format&fit=crop&w=500&q=80" alt="Pool" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"/>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. Guest Testimonials Section -->
    <section class="py-24 px-[8%] space-y-16">
        <div class="text-center space-y-3">
            <span class="inline-block text-xs font-bold uppercase tracking-[0.2em] text-amber-500">
                @if(App::getLocale() === 'tr') MİSAFİR YORUMLARI @else GUEST EXPERIENCES @endif
            </span>
            <h2 class="text-3xl md:text-5xl font-bold font-luxury">
                @if(App::getLocale() === 'tr') LuvaOtel Deneyimleri @else Customer Testimonials @endif
            </h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($reviews as $review)
                <div class="glass-panel p-8 bg-gray-950/40 rounded-2xl space-y-4 flex flex-col justify-between h-full reveal-on-scroll">
                    <div class="space-y-4">
                        <!-- Rating stars -->
                        <div class="flex text-amber-500 text-xs">
                            @for($i = 0; $i < $review->rating; $i++)
                                <i class="fa-solid fa-star"></i>
                            @endfor
                        </div>
                        <p class="text-xs text-gray-400 italic leading-relaxed">
                            "{{ $review->comment }}"
                        </p>
                    </div>
                    <div class="flex items-center space-x-3 pt-4 border-t border-gray-900">
                        <div class="w-10 h-10 rounded-full bg-amber-500/10 border border-amber-500/20 flex items-center justify-center font-bold text-amber-400 text-xs">
                            {{ substr($review->guest_name, 0, 1) }}
                        </div>
                        <div>
                            <div class="text-xs font-bold text-white">{{ $review->guest_name }}</div>
                            <div class="text-[10px] text-gray-500">{{ $review->stay_date ? $review->stay_date->translatedFormat('F Y') : '' }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection