{{-- Hero Section --}}
@props([
    'image' => '/images/hero/juicy-lucy.jpg',
    'title' => 'Umami Beer',
    'subtitle' => 'Hamburger Gourmet • Fusion Food • Birra Artigianale',
])

<section class="relative min-h-[90vh] flex items-end">
    {{-- Background Image --}}
    <div class="absolute inset-0">
        <img
            src="{{ $image }}"
            alt="Hamburger Gourmet Umami Beer"
            class="w-full h-full object-cover"
            loading="eager"
            fetchpriority="high"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/20"></div>
    </div>

    {{-- Content --}}
    <div class="relative z-10 container mx-auto px-4 pb-12 md:pb-20">
        {{-- Title --}}
        <h1 class="text-4xl md:text-6xl lg:text-7xl font-display font-bold text-white mb-2 animate-fade-in">
            {{ $title }}
        </h1>
        <p class="text-lg md:text-xl lg:text-2xl text-umami-border mb-6 animate-slide-up">
            {{ $subtitle }}
        </p>

        {{-- Rating Badges --}}
        <div class="flex flex-wrap gap-3 mb-8 animate-slide-up" style="animation-delay: 100ms;">
            <x-ui.rating-badge
                platform="TheFork"
                :score="config('umami.ratings.thefork', '9.5')"
                max="10"
                :reviews="config('umami.ratings.count', '548')"
            />
            <x-ui.rating-badge
                platform="Google"
                :score="config('umami.ratings.google', '5')"
                max="5"
            />
            <x-ui.rating-badge
                platform="TripAdvisor"
                :score="config('umami.ratings.tripadvisor', '5')"
                max="5"
            />
        </div>

        {{-- Location Info --}}
        <div class="mt-8 flex flex-wrap items-center gap-4 text-white/80 text-sm animate-slide-up" style="animation-delay: 300ms;">
            <span class="flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                </svg>
                Santa Maria degli Angeli (Assisi)
            </span>
            <span class="hidden sm:inline text-white/50">•</span>
            <a href="tel:{{ str_replace(' ', '', config('umami.phone')) }}" class="flex items-center gap-1 hover:text-white transition-colors">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                {{ config('umami.phone', '392 204 3500') }}
            </a>
        </div>
    </div>

    {{-- Scroll Indicator --}}
    <div class="absolute bottom-6 left-1/2 -translate-x-1/2 animate-bounce-soft hidden md:block">
        <svg class="w-6 h-6 text-white/60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
        </svg>
    </div>
</section>