@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@section('title', 'Escaliers sur mesure')
@section('meta_content_description',
    'Découvrez nos escaliers en acier sur mesure : designs élégants, robustes et
    adaptés à tous les intérieurs, pour particuliers et professionnels.')
@section('meta_robots', 'index, follow')

@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => 'Escaliers',
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            [
                'name' => 'Nos réalisations',
                'disabled' => true,
            ],
            ['name' => 'Escaliers', 'url' => '/realisation/escaliers', 'disabled' => false],
        ],
    ])
    <section>
        <article class="flex flex-col-reverse md:flex-row md:py-6 4xl:py-11 5xl:py-48" x-data="openPics()" x-init="init()" x-ref="gallery"
            @image-gallery-next.window="next()" @image-gallery-prev.window="prev()" @keyup.right.window="next();"
            @keyup.left.window="prev();">
            <div id="gallery" class="w-full md:w-1/2 flex items-center justify-center">
                <picture alt="Mobilier acier" x-on:click="openFromDom($event)"
                    class="object-cover shadow-2xl cursor-pointer w-full max-w-sm md:max-w-md 4xl:max-w-xl 5xl:max-w-4xl">
                    <!-- Desktop -->
                    <source srcset="{{ asset('images/realisations/escaliers/escalier_orig.webp') }}"
                        media="(min-width: 640px)">
                    <!-- Mobile (par défaut) -->
                    <img data-mobile="{{ asset('images/realisations/escaliers/escalier_600x600.webp') }}"
                        data-desktop="{{ asset('images/realisations/escaliers/escalier_orig.webp') }}"
                        class="aspect-auto h-auto hover:rounded-2xl transition-all duration-500 ease-in-out hover:scale-130 w-full"
                        src="{{ asset('images/realisations/escaliers/escalier_600x600.webp') }}" alt="Escalier acier">
                </picture>
            </div>
            <div class="w-full md:w-1/2">
                @include('partial.pageSubTitle', [
                    'textFirstPart' => "Réalisation d'",
                    'textSecondPart' => 'escaliers sur mesure',
                ])

                <p class="mx-auto 4xl:text-xl 5xl:text-3xl 5xl:py-15">
                    Un escalier est bien plus qu’un accès : c’est une pièce maîtresse.
                    Nous commençons par comprendre votre usage, vos envies esthétiques et les contraintes techniques du
                    lieu.
                    Après validation du devis et relevé précis des côtes, l’escalier est conçu dans ses moindres détails :
                    proportions, limon, fixations, finitions.
                    Fabriqué avec soin en atelier, puis posé avec rigueur, il allie confort, sécurité et caractère — en
                    parfaite cohérence avec votre projet.
                </p>
                <div class="py-5 4xl:py-10 5xl:py-15 flex justify-around">
                    <a href="{{ route('contact') }}"
                        class="text-center bg-dark text-ultraLight border border-ultraLight py-2 px-6 gap-2 rounded transition-colors duration-1000
                        hover:bg-ultraLight hover:text-dark hover:border-primary 4xl:text-2xl 5xl:text-4xl 5xl:p-6">
                        <span class="uppercase">
                            demander un devis
                        </span>
                        <i class="fa-solid fa-file-invoice"></i>
                    </a>
                </div>
            </div>
            <template x-teleport="body">
                <div x-show="imageGalleryOpened" x-transition:enter="transition ease-in-out duration-300"
                    x-transition:enter-start="opacity-0" x-transition:leave="transition ease-in-in duration-300"
                    x-transition:leave-end="opacity-0" @click="imageGalleryClose" @keydown.window.escape="imageGalleryClose"
                    x-trap.inert.noscroll="imageGalleryOpened"
                    class="fixed inset-0 z-99 flex items-center justify-center bg-black bg-opacity-50 select-none cursor-pointer"
                    x-cloak>
                    <div class="relative flex flex-col items-center justify-center w-11/12 xl:w-4/5 h-11/12">
                        <div @click="$event.stopPropagation(); $dispatch('image-gallery-prev')"
                            class="z-100 absolute left-0 flex items-center justify-center text-white translate-x-10 rounded-full cursor-pointer xl:-translate-x-24 2xl:-translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20">
                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                            </svg>
                        </div>
                        <img x-show="imageGalleryOpened" x-transition:enter="transition ease-in-out duration-300"
                            x-transition:enter-start="opacity-0 transform scale-50"
                            x-transition:leave="transition ease-in-in duration-300"
                            x-transition:leave-end="opacity-0 transform scale-50"
                            class="aspect-auto object-contain object-center w-full h-full select-none cursor-pointer"
                            :src="activeImage" alt="" style="display: none;">
                        <div @click="$event.stopPropagation(); $dispatch('image-gallery-next')"
                            class="absolute right-0 flex items-center justify-center text-white -translate-x-10 rounded-full cursor-pointer xl:translate-x-24 2xl:translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20">
                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                            </svg>
                        </div>
                    </div>
                </div>
            </template>
        </article>
    </section>
@endsection