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

@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => 'Pergolas',
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            [
                'name' => 'Nos réalisations',
                'disabled' => true,
            ],
            ['name' => 'Pergolas', 'url' => '/', 'disabled' => false],
        ],
    ])
    <section>
        <article class="flex flex-col-reverse md:flex-row 4xl:py-10 5xl:py-28" x-data="openPics()" x-init="init()" x-ref="gallery"
            id="gallery" @image-gallery-next.window="next()" @image-gallery-prev.window="prev()" @keyup.right.window="next();"
            @keyup.left.window="prev();">
            <div class="w-full md:w-1/2 flex items-center justify-center">
                <picture alt="Pergolas" 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-6xl">
                    <!-- Desktop -->
                    <source srcset="{{ asset('images/realisations/pergolas/pergolas-1_1067x800.webp') }}"
                        media="(min-width: 640px)">
                    <!-- Mobile (par défaut) -->
                    <img data-mobile="{{ asset('images/realisations/pergolas/pergolas-1_800x600.webp') }}"
                        data-desktop="{{ asset('images/realisations/pergolas/pergolas-1_1067x800.webp') }}"
                        class="aspect-auto hover:rounded-2xl transition-all duration-500 ease-in-out hover:scale-130 w-full"
                        src="{{ asset('images/realisations/pergolas/pergolas-1_800x600.webp') }}" alt="Pergolas">
                </picture>
            </div>
            <div class="w-full md:w-1/2">
                @include('partial.pageSubTitle', [
                    'textFirstPart' => 'Réalisation de',
                    'textSecondPart' => 'pergolas sur mesure',
                ])

                <p class="mx-auto 4xl:text-xl 5xl:text-3xl 5xl:py-15">
                    La pergola crée un véritable espace de vie extérieur.
                    Nous étudions votre environnement, l’exposition et vos attentes en matière de protection et de design.
                    Les sections, les ancrages et les finitions sont définis en fonction de ces éléments, afin d’assurer
                    stabilité et durabilité.
                    La fabrication et la pose garantissent une structure fiable et élégante.
                </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 class="w-full px-5 py-5">
                    <div class="mx-auto duration-1000 delay-300 opacity-0 select-none ease animate-fade-in-view"
                        style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
                        <ul class="grid gap-5 grid-cols-3 h-full items-center">
                            <li class="h-auto w-full group flex justify-center">
                                <picture x-on:click="openFromDom($event)"
                                    class="w-full md:w-1/2 5xl:w-md object-contain select-none max-w-full h-auto bg-transparent cursor-pointer rounded-2xl shadow-2xl">
                                    <!-- Desktop -->
                                    <source
                                        srcset="{{ asset('images/realisations/garde-corp/pergolas_garde-corp-1_1200x900.webp') }}"
                                        media="(min-width: 640px)">
                                    <!-- Mobile (par défaut) -->
                                    <img data-mobile="{{ asset('images/realisations/garde-corp/pergolas_garde-corp-1_800x600') }}"
                                        data-desktop="{{ asset('images/realisations/garde-corp/pergolas_garde-corp-1_1200x900.webp') }}"
                                        class="aspect-auto h-auto rounded w-full"
                                        src="{{ asset('images/realisations/garde-corp/pergolas_garde-corp-1_800x600.webp') }}"
                                        alt="Pergolas garde-corp">
                                </picture>
                            </li>
                            <li class="h-auto w-full group flex justify-center">
                                <picture x-on:click="openFromDom($event)"
                                    class="w-full md:w-1/2 5xl:w-md object-contain select-none max-w-full h-auto bg-transparent cursor-pointer rounded-2xl shadow-2xl">
                                    <!-- Desktop -->
                                    <source srcset="{{ asset('images/realisations/pergolas/pergolas-2_1200x900.webp') }}"
                                        media="(min-width: 640px)">
                                    <!-- Mobile (par défaut) -->
                                    <img data-mobile="{{ asset('images/realisations/pergolas/pergolas-2_800x600.webp') }}"
                                        data-desktop="{{ asset('images/realisations/pergolas/pergolas-2_1200x900.webp') }}"
                                        class="aspect-auto h-auto rounded w-full"
                                        src="{{ asset('images/realisations/pergolas/pergolas-2_800x600.webp') }}"
                                        alt="Pergolas garde-corp">
                                </picture>
                            </li>
                            <li class="h-auto w-full group flex justify-center">
                                <picture x-on:click="openFromDom($event)"
                                    class="w-full md:w-1/2 5xl:w-md object-contain select-none max-w-full h-auto bg-transparent cursor-pointer rounded-2xl shadow-2xl">
                                    <!-- Desktop -->
                                    <source srcset="{{ asset('images/realisations/pergolas/pergolas-3_1200x900.webp') }}"
                                        media="(min-width: 640px)">
                                    <!-- Mobile (par défaut) -->
                                    <img data-mobile="{{ asset('images/realisations/pergolas/pergolas-3_800x600.webp') }}"
                                        data-desktop="{{ asset('images/realisations/pergolas/pergolas-3_1200x900.webp') }}"
                                        class="aspect-auto h-auto rounded w-full"
                                        src="{{ asset('images/realisations/pergolas/pergolas-3_800x600.webp') }}"
                                        alt="Pergolas garde-corp">
                                </picture>
                            </li>
                        </ul>
                    </div>
                </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