@extends('layouts.master')

@section('title', "Accueil boutique s'Architecturer")

@section('meta_description', "Découvrez Luminestone : notre lampe de chevet design, fabriquées à la main en Suisse par notre bureau d'architecture.")


@section('content')

    <!-- section start -->
    <section class="sliderMain -type-1 bg-black js-sliderMain-type-1">
        <!-- swiper-wrapper start -->
        <div class="swiper-wrapper">

            <!-- swiper-slide start -->
            <div class="swiper-slide overflow-hidden swiper-slide-active">
                <div class="sliderMain__wrap">
                    <div class="sliderMain__img -cover-dark z-1 js-image">

                        <video loop autoplay muted disablePictureInPicture playsinline id="videoLuminestone"
                            class="masthead__bg__item bg-video js-lazy" data-src="{{ asset($luminestoneVideo) }}">
                            <source src="{{ asset($luminestoneVideo) }}" type="video/mp4"
                                data-src="{{ asset($luminestoneVideo) }}" />
                        </video>

                    </div>

                    <div class="sliderMain__bgTitle fw-800 pb-48 md:d-none z-2 js-bgTitle" data-swiper-parallax="550">
                        {{ $product->product_name }}
                    </div>

                    <div class="container-fluid">
                        <div class="row justify-content-center text-center">
                            <div class="col-sm-10">
                                <div class="sliderMain__content pt-24 z-3">
                                    <div class="js-subtitle">
                                        <p
                                            class="sliderMain__subtitle leading-xs text-xs tracking-md uppercase fw-500 text-white mb-32">
                                            Illumine ton intérieur
                                        </p>
                                    </div>
                                    <div class="js-title">
                                        <h1 class="sliderMain__title fw-800 text-white">
                                            {{ $product->product_name }}
                                        </h1>
                                    </div>
                                    <div class="sliderMain__button js-button">
                                        <form action="{{ route('add-to-cart') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $product->id_product }}">
                                            <button type="submit" class="button -md -outline-white text-white mt-32">
                                                Ajouter au panier
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- swiper-slide end -->

            <!-- ui-element start -->
            <div class="ui-element -bottom-left js-ui">
                <div class="ui-element__social text-white js-bottom-left-links">
                    <p>{{ $product->product_price }} CHF</p>
                </div>
            </div>
            <!-- ui-element end -->


            <!-- ui-element start -->
            <div class="ui-element -bottom sm:d-none js-ui">
                <button type="button" class="ui-element__scroll text-white js-ui-scroll-button">
                    Découvrir
                    <i class="icon" data-feather="arrow-down"></i>
                </button>
            </div>
            <!-- ui-element end -->

            <!-- ui-element start -->
            <div class="ui-element -bottom-right sm:d-none js-ui js-slider-nav">
                <div class="navButton js-slider-main-nav">

                </div>
            </div>
            <!-- ui-element end -->
    </section>
    <!-- section end -->

    <!-- section start -->
    <section class="layout-pt-xl layout-pb-xl bg-dark-1">
        <!-- container start -->
        <div class="container">

            <!-- row start -->
            <div class="row">
                <div class="col-xl-5 col-lg-8 col-md-10">
                    <div class="sectionHeading -lg">
                        <p class="sectionHeading__subtitle text-white">
                            Imaginer
                        </p>
                        <h2 class="sectionHeading__title text-white">
                            Simplement
                        </h2>
                    </div>
                </div>
            </div>
            <!-- row end -->


            <!-- row start -->
            <div class="row x-gap-60 y-gap-48 layout-pt-xs">
                <div class="col-lg-4 col-md-6">
                    <div class="">
                        <h4 class="text-xl fw-600 text-white">
                            Minimiser
                        </h4>
                        <p class="mt-16 text-white">
                            Chaque Luminestone est le fruit d'une conception visant à capturer l'essence d'une esthétique
                            minimaliste. Soigneusement élaborée pour s'adapter dans une diversité de styles d'intérieurs.
                        </p>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="">
                        <h4 class="text-xl fw-600 text-white">
                            Fabriquer
                        </h4>
                        <p class="mt-16 text-white">
                            Façonné à la main dans notre atelier avec le béton suisse doté du taux de recyclage le plus
                            élevé, chaque Luminestone reflète notre engagement envers la durabilité et l'artisanale.
                        </p>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="">
                        <h4 class="text-xl fw-600 text-white">
                            Illuminer
                        </h4>
                        <p class="mt-16 text-white">
                            Chaque Luminestone apporte une ambiance chaleureuse dans l'espace de vie. Elle met en lumière le
                            potentiel du béton recyclé tout en restant intemporelle, que ce soit par son style ou sa
                            durabilité.
                        </p>
                    </div>
                </div>
            </div>
            <!-- row end -->

        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- section start -->
    <section class="layout-pt-md layout-pb-md bg-dark-1">
        <!-- row start -->
        <div class="fancy-grid -col-3 -container">

            @foreach ($galleryImages as $image)
                <div class="fancy-grid__item">
                    <div class="portfolioCard -type-1 -hover">
                        <div class="portfolioCard__img">
                            <div class="portfolioCard__img__inner">
                                <div class="ratio ratio-3:4 bg-image js-lazy" data-bg="{{ asset($image) }}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <!-- row end -->
    </section>
    <!-- section end -->

    <!-- section start -->
    <section class="layout-pt-lg layout-pb-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row justify-content-between">

                <div class="col-lg-4 col-md-6 col-sm-8">
                    <div class="sectionHeading -md">
                        <p class="sectionHeading__subtitle">
                            Commande & Livraison
                        </p>
                        <h2 class="sectionHeading__title">
                            Commander facilement
                        </h2>
                    </div>
                </div>


                <div class="col-lg-7">
                    <!-- row start -->
                    <div class="row x-gap-72 y-gap-72 md:mt-48">

                        <div class="col-md-6">
                            <div class="ml-minus-4">
                                <div class="d-flex align-items-center">
                                    <div class="px-20 py-20 bg-white shadow-light rounded-full">
                                        <i class="size-sm str-width-md text-accent" data-feather="lock"></i>
                                    </div>
                                </div>
                            </div>
                            <h3 class="text-2xl fw-500 mt-32">
                                Paiement sécurisée
                            </h3>
                              <p class="mt-12">
                                  Les paiements se font par carte bancaire à travers le service <a href="https://stripe.com" target="_blank"><span style="text-decoration: underline;">Stripe</span></a>.<br>Tous les paiements sont 100% sécurisés. 🔐
                              </p>
                        </div>

                        <div class="col-md-6">
                            <div class="ml-minus-4">
                                <div class="d-flex align-items-center">
                                    <div class="px-20 py-20 bg-white shadow-light rounded-full">
                                        <i class="size-sm str-width-md text-accent" data-feather="package"></i>
                                    </div>
                                </div>
                            </div>
                            <h3 class="text-2xl fw-500 mt-32">
                                Livraison rapide
                            </h3>
                            <p class="mt-12">
                                Si des stocks sont disponibles, Luminestone arrive demain chez toi.<br>Livraison
                                <strong>gratuite</strong> pour chaque Luminestone.
                            </p>
                        </div>

                        <div class="col-md-6">
                            <div class="ml-minus-4">
                                <div class="d-flex align-items-center">
                                    <div class="px-20 py-20 bg-white shadow-light rounded-full">
                                        <i class="size-sm str-width-md text-accent" data-feather="refresh-cw"></i>
                                    </div>
                                </div>
                            </div>
                            <h3 class="text-2xl fw-500 mt-32">
                                Recycler
                            </h3>
                            <p class="mt-12">
                                <strong>Du béton 100% suisse</strong> 🇨🇭 avec plus de 60% de matières recyclées. Le taux
                                maximal de matières recyclé pour ce type de béton.
                            </p>
                        </div>

                        <div class="col-md-6">
                            <div class="ml-minus-4">
                                <div class="d-flex align-items-center">
                                    <div class="px-20 py-20 bg-white shadow-light rounded-full">
                                        <i class="size-sm str-width-md text-accent" data-feather="message-square"></i>
                                    </div>
                                </div>
                            </div>
                            <h3 class="text-2xl fw-500 mt-32">
                                Contacter
                            </h3>
                            <p class="mt-12">
                                Une question ? Besoin de plus d'informations ? Contactez-nous par <a href="{{ route('mail-contact') }}">e-mail</a>.
                            </p>
                        </div>

                    </div>
                    <!-- row end -->
                </div>

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- section start -->
    <section class="layout-pt-xs layout-pb-xs">
        <!-- container start -->
        <div class="container z-5">
            <!-- row start -->
            <div class="row justify-content-center text-center">
                <div class="col-12">
                    <h2 class="text-5xl sm:text-5xl xs:text-4xl leading-sm fw-700">
                        Votre Luminestone,
                    </h2>

                    <form class="layout-pt-xs" action="{{ route('add-to-cart') }}" method="post">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id_product }}">
                        <button type="submit" class="button -md -black text-white mt-3">
                            Ajouter au panier
                        </button>
                    </form>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- fenêtre modale exemple QR-Facture -->
    <div id="modal3" class="modal">
        <div class="modal_content" id="modalContentContainer3">
            <!-- Le contenu de la deuxième fenêtre modale sera chargé ici -->
        </div>
        <a href="#" class="modal_close" id="closeModal3">&times;</a>
    </div>

@endsection