@php
$uniqid = uniqid();
@endphp

@if ($section->getOption('background'))
    <style>
        #hero-{{ $uniqid }}:after {
            background-image: url({{ asset('uploads/sections/' . $section->getOption('background')) }});
        }

    </style>
@endif

<main id="hero-{{ $uniqid }}" class="index text-white flex flex-col items-center relative">
    <div class="container mx-auto px-8 py-6 md:pt-12 md:pb-6 h-full flex flex-col">
        @if ($section->getOption('show_user_button'))
            <div class="nav-user text-right">
                @include('public.partials.navigation-user')
            </div>
        @endif
        <div class="welcome mx-auto max-w-md text-center mt-6 md:mt-12">
            @if ($section->getOption('logo'))
                <img src="{{ asset('uploads/sections/' . $section->getOption('logo')) }}"
                    alt="Logo Les Gourmandises de Flo" class="logo inline-block w-48 md:w-52" loading="lazy">
            @endif
            <h2 class="grand-hotel text-center text-5xl md:text-6xl leading-none mb-4 mt-16">{{ $section->title }}
            </h2>

            {!! $section->content !!}

            @if ($section->getOption('show_reservation_button') && $isReservationsAllowed)
                <div>
                    <x-public.buttons.primary type="link" label="Réserver un créneau"
                        href="{{ route('booking.index') }}" aria-title="Aller sur la page de réservation d'un créneau"
                        class="index-booking-btn hidden mt-16 md:inline-block" />
                </div>
            @endif
        </div>
        @if ($section->getOption('show_scroll_button'))
            <div class="hidden md:block text-center mt-auto animate-bounce scroll-bottom-btn">
                <a href="#presentation"
                    onclick="document.querySelector('#presentation').scrollIntoView({ behavior: 'smooth' });"
                    aria-title="Défiler vers le bas de la page">@svg('images/icons/defilement.svg','fill-current
                    text-white inline-block')</a>
            </div>
        @endif
    </div>
</main>