@extends('layouts.public.blank', [
    'fullWidth' => true,
])

@section('page.title', 'Notre centre de Villefranche-Sur-Saône')
@section('page.description',
    "Vous êtes à la recherche d’une solution de stockage de qualité au meilleur prix ? Vous
    êtes en manque d'espace ?")

@section('page.content')
    <div class="w-full grid lg:grid-cols-2 py-4 lg:pt-20 lg:pb-10 gap-8 lg:gap-32 max-w-7xl mx-auto px-4 md:px-8">
        <div class="flex flex-col gap-4 md:gap-8 justify-center">
            <a href="{{ route('homepage') }}" class="transition-all hover:scale-110 hover:opacity-80 mx-auto cursor-pointer">
                <img src="{{ asset('images/logos/lockit.webp') }}" alt="Logo de Lockit" title="Retour à l'accueil"
                    id="logo-black" @class([
                        'h-14 object-contain' => true,
                    ])>
            </a>

            <h1 class="text-2xl md:text-3xl uppercase">
                Louer un espace de stockage 100% sécurisé<br>
                <span class="text-lockit-orange">à Villefranche Sur Saône</span>
            </h1>

            <p>
                Vous êtes à la recherche d’une solution de stockage de qualité au meilleur prix ? Vous êtes en manque
                d'espace ?<br>
                Notre garde-meuble en self-stockage vous propose des boxes à louer de qualité et sécurisés avec un accès
                24h/7j à Villefranche et à Anse pour stocker toutes vos affaires personnelles ou professionnelles.<br>
                <br>
                Réservez dès maintenant votre box en ligne ou contactez-nous plus d’informations.
            </p>

            <div class="flex justify-between flex-wrap gap-8 xl:gap-20 items-center">
                <a href="tel:+33474028175" gtag_send_to="AW-11379831717/_i8CCN69zO8YEKXnqbIq"
                    class="px-6 py-1 rounded-lg bg-lockit-orange text-white border border-lockit-orange font-bold xl:text-lg
                    transition-all hover:scale-110 hover:opacity-80 text-center gtag-tracking">
                    Réserver votre box <br> 04 74 02 81 75
                </a>

                <a href="{{ route('calculateur') }}"
                    class="px-6 py-4 rounded-lg border-2 border-black text-black font-bold xl:text-lg
                    transition-all hover:scale-110 hover:bg-black hover:text-white">
                    Définir votre box idéal
                </a>
            </div>
        </div>

        <div class="flex flex-col gap-8 md:gap-14 justify-center">
            <img src="{{ asset('images/photos/villefranche.webp') }}"
                class="aspect-square rounded-3xl bg-black w-full object-cover" alt="Lockit Villefranche-Sur-Saône">
        </div>
    </div>

    @include('components.public.sections.google-reviews')

    @include('components.public.sections.how-it-works-steps')

    @include('components.public.sections.why-lockit-2', [
        "buttonType" => 'phone-tracking'
    ])

    {{-- Map --}}
    <div class="grid lg:grid-cols-3 gap-8 lg:gap-14 py-10 md:py-20 max-w-7xl mx-auto px-4 md:px-8">
        <div class="flex flex-col gap-4 lg:gap-10 lg:col-span-2 p-4 lg:p-8 border rounded-lg shadow-lg">
            <h2 class="text-xl md:text-2xl uppercase">
                Votre centre de <span class="text-lockit-orange">Villefranche-Sur-Saône</span>
            </h2>

            <div class="grid md:grid-cols-2 gap-4 md:gap-8">
                <div class="flex flex-col gap-4">
                    <h3 class="text-lg md:text-xl">Adresse</h3>
                    <p>
                        355 F Rue Gabriel Voisin,<br>
                        69400 VILLEFRANCHE-SUR-SAÔNE
                    </p>
                    <a href="https://www.google.com/maps/place/Lockit+Villefranche+sur+Saône/@45.979695,4.7397615,17z/data=!3m1!4b1!4m6!3m5!1s0x47f49bcb474b9a85:0x62862d73c746848f!8m2!3d45.979695!4d4.7419502!16s%2Fg%2F11t_j3hzp5?entry=ttu"
                        class="font-semibold underline underline-offset-4 decoration-lockit-orange">Itinéraire
                        vers le centre</a>
                </div>
                <div class="flex flex-col gap-4">
                    <h3 class="text-lg md:text-xl">Vous cherchez un box à louer ?</h3>
                    <button class="font-semibold text-lockit-orange text-lg gtag-tracking" href="tel:+33474028175" gtag_send_to="AW-11379831717/_i8CCN69zO8YEKXnqbIq">04 74 02 81 75</button>
                </div>

                <div class="flex justify-between flex-wrap gap-4 text-center md:col-span-2">
                    <div class="flex flex-col gap-2">
                        <p class="font-semibold">24/7 sans RDV</p>
                        <p class="text-sm">Accès aux boxes</p>
                    </div>
                    <div class="flex flex-col gap-2">
                        <p class="font-semibold">24/7 sans RDV</p>
                        <p class="text-sm">Location en ligne</p>
                    </div>
                    <div class="flex flex-col gap-2">
                        <p class="font-semibold">17</p>
                        <p class="text-sm">Tailles de boxes</p>
                    </div>
                    <div class="flex flex-col gap-2">
                        <p class="font-semibold">De 1m² à 30m²</p>
                        <p class="text-sm">Surfaces disponibles</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="h-full w-full flex flex-col min-h-[25rem]">
            <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                class="w-full h-full bg-gray-200 text-white rounded-lg"
                src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=355%20rue%20Gabriel%20Voisin%2069400%20Villefranche-Sur-Saone+(Lockit%20-%20Villefranche-Sur-Saone)&amp;t=&amp;z=11&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-8 lg:gap-14 py-10 md:py-20 max-w-7xl mx-auto px-4 md:px-8">
        <div class="h-full w-full flex flex-col justify-center items-center text-center">
            <p class="font-bold text-lg md:text-xl -rotate-6 bg-lockit-orange text-white leading-5 px-3 py-1 mb-6 lg:mb-0">
                Votre box est accessible 24/7
            </p>
        </div>

        <div class="flex flex-col lg:col-span-2 border rounded-lg shadow-lg">
            <h2 class="text-xl md:text-2xl uppercase p-4 lg:p-8">
                Votre centre en images
            </h2>

            @include('components.public.utils.villefranche-images')
        </div>
    </div>
@endsection