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

@section('page.title', 'Nos centres')

@section('page.content')
    {{-- Full size dual presentation --}}
    <div class="w-full h-screen grid lg:grid-cols-2">
        <div class="h-full md:h-full w-full overflow-hidden relative">
            <img src="{{ asset('images/visuals/lockit-anse.webp') }}" alt="Lockit Anse" class="w-full h-full object-cover object-top z-0 absolute top-0 left-0">
            <div class="z-10 absolute top-0 left-0 bg-gradient-to-b from-black/10 to-black/80 h-full w-full flex flex-col justify-center items-center text-center uppercase text-white">
                <h1 class="text-2xl md:text-4xl mb-2">Lockit, Anse</h1>
                <p class="italic mb-4">Auvergne Rhônes Alpes.</p>
                <a href="{{ route('about') }}" class="font-serif bg-lockit-orange rounded-full px-6 pt-2 pb-1 text-xs">Visiter</a>
            </div>
        </div>
        <div class="h-full md:h-full w-full overflow-hidden relative">
            <img src="{{ asset('images/visuals/lockit-villefranche.webp') }}" alt="Lockit Villefranche-sur-Saône" class="w-full h-full object-cover object-top z-0 absolute top-0 left-0">
            <div class="z-10 absolute top-0 left-0 bg-gradient-to-b from-black/10 to-black/80 h-full w-full flex flex-col justify-center items-center text-center uppercase text-white">
                <h1 class="text-2xl md:text-4xl mb-2 px-8 md:px-12">Lockit, Villefranche-sur-Saône</h1>
                <p class="italic mb-4">Auvergne Rhônes Alpes.</p>
                <button onclick="toggleModal('informations-modal')" class="font-serif bg-transparent border-2 border-lockit-orange text-lockit-orange rounded-full px-6 pt-2 pb-1 text-xs">À venir</button>
            </div>
        </div>
    </div>

    {{-- Anse presentation --}}
    <section class="w-full max-w-5xl mx-auto px-8 md:px-8 grid grid-cols-1 md:grid-cols-3 gap-8 py-10 updateHeader">
        <div class="flex flex-col w-full h-full">
            <img src="{{ asset('images/visuals/lockit-anse.webp') }}" alt="Lockit Anse" class="w-full aspect-square min-h-[5rem] rounded-2xl">
        </div>

        <div class="md:col-span-2 flex flex-col justify-center h-full w-full">
            <h2 class="text-2xl md:text-5xl uppercase">Lockit, Anse</h2>
            <p class="italic text-lg uppercase mb-4">Auvergne Rhônes Alpes.</p>

            <p class="text-justify">Venez profiter d’un espace de {{ \App\Models\Setting::where('key', 'anse_tonnage_of_storage')->first()->toPrettyNumber() }}m² carré louables à Anse avec {{ \App\Models\Setting::where('key', 'anse_number_of_available_boxes')->first()->toPrettyNumber() }} boxes spécialement conçus pour les professionnels et les particuliers. Depuis plus de 6 ans, Lockit vous offre les meilleurs services aussi bien en terme de confort, que de sécurité. Une boutique de déménagement spécialisée est également mis à votre disposition sur place. Facile d’accès directement en sortie d’autoroute, vous pouvez venir visiter le centre dès maintenant pour plus d’informations.</p>
        </div>
    </section>

    {{-- Villefranche-sur-Saône presentation --}}
    <section class="w-full max-w-5xl mx-auto px-8 md:px-8 grid grid-cols-1 md:grid-cols-3 gap-8 py-10">
        <div class="md:col-span-2 flex flex-col justify-center h-full w-full order-2 lg:order-1">
            <h2 class="text-2xl md:text-5xl uppercase">Lockit, Villefranche-sur-Saône</h2>
            <p class="italic text-lg uppercase mb-4">Auvergne Rhônes Alpes.</p>

            <p class="text-justify">Avec ses {{ \App\Models\Setting::where('key', 'villefranche_number_of_available_boxes')->first()->toPrettyNumber() }}m² et ses {{ \App\Models\Setting::where('key', 'villefranche_tonnage_of_storage')->first()->toPrettyNumber() }} boxes louables, Lockit Villefranche-sur-Soane se dévoilera au grand jour en 2023. Un centre à la pointe de la technologie grâce à des poignées connectées dernier cri à venir découvrir dès à présent. Encore plus grand, encore plus  pratique avec ses deux zones de déchargement et ses 2 monte charge, vous allez adorer stocker vos effets, que vous soyez professionnels, ou particuliers !</p>
        </div>

        <div class="flex flex-col w-full h-full order-1 lg:order-2">
            <img src="{{ asset('images/visuals/lockit-villefranche.webp') }}" alt="Lockit Villefranche-sur-Saône" class="w-full aspect-square min-h-[5rem] rounded-2xl">
        </div>
    </section>
@endsection

@push('page.modals')
    @include('components.public.modals.informations', [
        'text' => "Votre nouveau centre de Ville-Franche sera disponible début 2023 !"
    ])
@endpush