@extends("layouts.public.base", [
    "fullWidth" => true,
    "moreInfosHeader" => true,
])

@section("page.content")
    {{-- Presentation --}}
    @include("components.public.sections.presentation")


    <section class="max-w-7xl mx-auto px-8 py-10 md:py-14">
        <div class="flex flex-col gap-4">
            <h2 class="text-2xl md:text-3xl uppercase">
                Nos boxes de stockage
            </h2>

            <div class="grid md:grid-cols-2 gap-6 md:gap-10">
                <div
                    class="flex flex-col md:flex-row gap-4 md:gap-6 items-center w-full p-4 bg-white rounded-lg shadow-lockit order-2 md:order-1">
                    <img src="{{ Vite::icons("box-icon.webp") }}" alt="Une image d'exemple Lockit"
                        class="h-32 aspect-square rounded object-contain">
                    <div class="flex flex-col gap-1 items-start">
                        <p><b>Box de stockage</b> 1m² à 5m²</p>
                        <p class="text-gray-500">Équivalent au stockage d'un espace de la taille d'une cave</p>
                        <p class="text-sm text-gray-500">À partir de 25.00 € TTC / mois*</p>

                        @include('components.public.buttons.get-a-quote-btn', (["fullWidth" => true]))
                    </div>
                </div>

                <div
                    class="flex flex-col justify-center gap-3 items-center w-full p-3 md:p-4 bg-lockit-blue/10 rounded-lg order-1 md:order-2">
                    <div class="flex flex-col gap-1 text-center items-center">
                        <p class="text-xl font-semibold">Offre spéciale !</p>
                        <p>Profitez de -50% sur votre contrat !*</p>
                        <p class="text-neutral-500 italic">(Stock limité)</p>
                    </div>

                    <a href="{{ route('contact') }}"
                        class="px-4 py-1 rounded bg-lockit-blue text-white font-semibold transition hover:shadow hover:opacity-70">
                        Contactez-nous
                    </a>
                </div>

                <div class="flex flex-col md:flex-row gap-4 md:gap-6 items-center w-full p-3 md:p-4 bg-white rounded-lg shadow-lockit order-3">
                    <img src="{{ Vite::icons("box-icon.webp") }}" alt="Une image d'exemple Lockit"
                        class="h-32 aspect-square rounded object-contain">
                    <div class="flex flex-col gap-1 items-start">
                        <p><b>Box de stockage</b> 5.5m² à 10m²</p>
                        <p class="text-gray-500">Équivalent au stockage d'un studio/garage/cave</p>
                        <p class="text-sm text-gray-500">À partir de 52.50 € TTC / mois*</p>

                        @include('components.public.buttons.get-a-quote-btn', (["fullWidth" => true]))
                    </div>
                </div>

                <div class="flex flex-col md:flex-row gap-4 md:gap-6 items-center w-full p-3 md:p-4 bg-white rounded-lg shadow-lockit order-4">
                    <img src="{{ Vite::icons("box-icon.webp") }}" alt="Une image d'exemple Lockit"
                        class="h-32 aspect-square rounded object-contain">
                    <div class="flex flex-col gap-1 items-start">
                        <p><b>Box de stockage</b> 11m² à 30m²</p>
                        <p class="text-gray-500">Équivalent au stockage d'un appartement T2</p>
                        <p class="text-sm text-gray-500">À partir de 110.00 € TTC / mois*</p>

                        @include('components.public.buttons.get-a-quote-btn', (["fullWidth" => true]))
                    </div>
                </div>

                <div
                    class="md:col-span-2 grid md:grid-cols-2 items-center gap-6 md:gap-8 w-full p-3 md:p-4 bg-lockit-blue/10 rounded-lg order-5">
                    <div class="flex flex-col gap-1 md:gap-3">
                        <p class="font-semibold text-xl md:text-3xl md:px-10 text-center">
                            <b class="text-lockit-blue font-semibold">Estimez le volume de stockage</b> à l’aide de notre
                            simulateur
                        </p>
                        <a href="{{ route("calculateur") }}"
                            class="px-4 py-1 rounded bg-lockit-blue text-white font-semibold transition hover:shadow hover:opacity-70 text-center md:mx-auto">
                            Calculer la taille de votre box
                        </a>
                    </div>

                    <div class="hidden md:flex justify-center">
                        <img src="{{ Vite::icons("box-icon.webp") }}" alt="Une image d'exemple Lockit"
                            class="h-40 aspect-square rounded object-contain">
                    </div>
                </div>
            </div>

            <div class="flex items-center p-4 text-neutral-500">
                <p>* Promotion en cours de -50% sur vos 2 premiers mois de location.</p>
            </div>
        </div>
    </section>


    {{-- How it works steps --}}
    @include("components.public.sections.how-it-works-steps")

    {{-- Why choose Lockit ? --}}
    @include("components.public.sections.why-lockit")

    {{-- Why choose Lockit ? --}}
    @include("components.public.sections.why-lockit-2", [
        "buttonType" => "easyspace-tracking",
    ])

    {{-- Move out offers --}}
    @includeWhen(\App\Models\Product::count() > 0, "components.public.sections.move-out-offers")

    {{-- Clients reviews --}}
    @include("components.public.sections.clients-reviews")

    {{-- FAQ --}}
    @includeWhen(\App\Models\FaqQuestion::exists(), "components.public.sections.faq")

    {{-- Contact --}}
    @include("components.public.sections.contact")
@endsection