@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@section('title', 'Autres réalisations sur mesure')
@section('meta_content_description',
    'Découvrez nos réalisations diverses en acier sur mesure : créations uniques,
    robustes et élégantes, adaptées à tous types d’espaces pour particuliers et professionnels.')
@section('meta_robots', 'index, follow')

@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => 'Autres',
        'secondPartTitle' => 'réalisations',
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            [
                'name' => 'Nos réalisations',
                'disabled' => true,
            ],
            ['name' => 'Divers', 'url' => '/realisation/autres-realisations', 'disabled' => false],
        ],
    ])
    <section>
        <article class="flex flex-col-reverse md:flex-row 5xl:py-15" 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="Réalisation divers" 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/autres_realisation/autre-rea-1_904x800.webp') }}"
                        media="(min-width: 640px)">
                    <!-- Mobile (par défaut) -->
                    <img data-mobile="{{ asset('images/realisations/autres_realisation/autre-rea-1_678x600.webp') }}"
                        data-desktop="{{ asset('images/realisations/autres_realisation/autre-rea-1_904x800.webp') }}"
                        class="aspect-auto w-full h-auto hover:rounded-2xl transition-all duration-500 ease-in-out hover:scale-130"
                        src="{{ asset('images/realisations/autres_realisation/autre-rea-1_678x600.webp') }}"
                        alt="Lion head">
                </picture>
            </div>
            <div class="w-full md:w-1/2">
                @include('partial.pageSubTitle', [
                    'textFirstPart' => "Réalisation d'",
                    'textSecondPart' => 'objet divers sur mesure',
                ])

                <p class="mx-auto 4xl:text-xl 5xl:text-3xl 5xl:py-15">
                    Parce que chaque projet ne rentre pas toujours dans une case, Atelier Steel Art réalise également des
                    ouvrages métalliques spécifiques et atypiques.
                    Structures décoratives, aménagements techniques, habillages, supports sur mesure, luminaire ou créations
                    particulières.
                </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 object-cover md:w-1/2 5xl:w-md select-none max-w-full h-auto bg-transparent cursor-pointer rounded-2xl
                                    shadow-2xl">
                                    <!-- Desktop -->
                                    <source
                                        srcset="{{ asset('images/realisations/autres_realisation/autre-rea-5_1200x1600.webp') }}"
                                        media="(min-width: 640px)">
                                    <!-- Mobile (par défaut) -->
                                    <img data-mobile="{{ asset('images/realisations/autres_realisation/autre-rea-5_450x600.webp') }}"
                                        data-desktop="{{ asset('images/realisations/autres_realisation/autre-rea-5_1200x1600.webp') }}"
                                        class="aspect-auto h-auto w-full"
                                        src="{{ asset('images/realisations/autres_realisation/autre-rea-5_450x600.webp') }}"
                                        alt="Lampe">
                                </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/autres_realisation/autre-rea-3_1200x900.webp') }}"
                                        media="(min-width: 640px)">
                                    <!-- Mobile (par défaut) -->
                                    <img data-mobile="{{ asset('images/realisations/autres_realisation/autre-rea-3_800x600.webp') }}"
                                        data-desktop="{{ asset('images/realisations/autres_realisation/autre-rea-3_1200x900.webp') }}"
                                        class="aspect-auto h-auto w-full rounded"
                                        src="{{ asset('images/realisations/autres_realisation/autre-rea-3_800x600.webp') }}"
                                        alt="Lampe">
                                </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