{{-- Contact "Nous rencontrer" section with map --}}
<x-atoms.section-wrapper>
    <div class="w-full lg:flex">
        {{-- Left: Info text --}}
        <div class="text-left mb-12 lg:w-1/2">
            <h2 class="text-4xl font-medium text-foreground mb-4">
                {{ __('contact.sections.visit.title') }}
            </h2>
            <p class="text-muted-foreground max-w-xl">
                {{ __('contact.sections.visit.description_1') }}
            </p>
            <p class="text-muted-foreground max-w-xl mt-4">
                {{ __('contact.sections.visit.description_2') }}
            </p>
            <div class="mt-8 mb-4 text-foreground flex flex-col gap-1">
                <span class="font-medium">{{ __('contact.sections.visit.location_name') }}</span>
                <span class="text-muted-foreground">{{ __('contact.sections.visit.address') }}</span>
                <span class="text-muted-foreground">{{ __('contact.sections.visit.postal_code') }} {{ __('contact.sections.visit.city') }}</span>
            </div>
            <x-atoms.button-link href="https://www.google.com/maps/place/72+Rue+Jean+Jaur%C3%A8s,+71200+Le+Creusot" target="_blank" rel="noopener noreferrer">
                {{ __('contact.sections.visit.cta') }}
            </x-atoms.button-link>
        </div>

        {{-- Right: Leaflet Map --}}
        <div class="mx-auto w-full lg:w-1/2">
            <div id="location-map"
                class="w-full h-[280px] md:h-[380px] lg:h-full lg:min-h-[400px] rounded-lg overflow-hidden z-0"
                data-lat="46.8053305"
                data-lng="4.4142138"
                data-zoom="5"
                data-popup="{{ __('contact.sections.visit.address') }}<br>{{ __('contact.sections.visit.postal_code') }} {{ __('contact.sections.visit.city') }}"></div>
        </div>

        @push('scripts')
        @vite('resources/js/utils/leaflet-map.js')
        @endpush
    </div>
</x-atoms.section-wrapper>