@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@section('title', 'Portails sur mesure')
@section('meta_content_description',
    'Découvrez nos portails en acier sur mesure : robustes, élégants et adaptés à tous
    types d’entrées, pour particuliers et professionnels.')
@section('meta_robots', 'index, follow')

@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => 'Portails',
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            [
                'name' => 'Nos réalisations',
                'disabled' => true,
            ],
            ['name' => 'Portails', 'url' => '/realisation/portails', 'disabled' => false],
        ],
    ])
    <section>
        <article class="flex flex-col-reverse md:flex-row 4xl:py-10 5xl:py-24" 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="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-2xl 5xl:max-w-6xl">
                    <!-- Desktop -->
                    <source srcset="{{ asset('images/realisations/portails/portail-2_1200x848.webp') }}"
                        media="(min-width: 640px)">
                    <!-- Mobile (par défaut) -->
                    <img data-mobile="{{ asset('images/realisations/portails/portail-2_800x565.webp') }}"
                        data-desktop="{{ asset('images/realisations/portails/portail-2_1200x848.webp') }}"
                        class="aspect-auto hover:rounded-2xl transition-all duration-500 ease-in-out hover:scale-130 w-full"
                        src="{{ asset('images/realisations/portails/portail-2_800x565.webp') }}" alt="Portails">
                </picture>
            </div>
            <div class="w-full md:w-1/2">
                @include('partial.pageSubTitle', [
                    'textFirstPart' => 'Réalisation de',
                    'textSecondPart' => 'portails sur mesure',
                ])

                <p class="mx-auto 4xl:text-xl 5xl:text-3xl 5xl:py-15">
                    Premier regard sur votre propriété, le portail doit conjuguer esthétique et fonctionnalité.
                    Ses dimensions, son système d’ouverture et son design sont pensés selon vos besoins.
                    Après étude et relevé précis, la fabrication assure rigidité et qualité de finition.
                    La pose et les réglages garantissent un fonctionnement fluide et durable.
                    Une approche sur mesure grâce à notre modélisation 3D pour permettre au client de ce projeter plus facilement.
                </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/portails/portail-1-1200x890.webp') }}"
                                        media="(min-width: 640px)">
                                    <!-- Mobile (par défaut) -->
                                    <img data-mobile="{{ asset('images/realisations/portails/portail-1_800x593.webp') }}"
                                        data-desktop="{{ asset('images/realisations/portails/portail-1-1200x890.webp') }}"
                                        class="aspect-auto h-auto rounded w-full"
                                        src="{{ asset('images/realisations/portails/portail-1_800x593.webp') }}"
                                        alt="Modélisation portail">
                                </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/portails/portal-0_1200x800.webp') }}"
                                        media="(min-width: 640px)">
                                    <!-- Mobile (par défaut) -->
                                    <img data-mobile="{{ asset('images/realisations/portails/portal-0_800x533.webp') }}"
                                        data-desktop="{{ asset('images/realisations/portails/portal-0_1200x800.webp') }}"
                                        class="aspect-auto h-auto rounded w-full"
                                        src="{{ asset('images/realisations/portails/portal-0_800x533.webp') }}"
                                        alt=" Modélisation portail">
                                </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