@php
$channel = core()->getCurrentChannel();
@endphp
<!-- SEO Meta Content -->
@push ('meta')
<meta name="title" content="{{ $bannerData['meta_title'] ?? '' }}" />
<meta name="description" content="{{ $bannerData['meta_description'] ?? '' }}" />
<meta name="keywords" content="{{ $bannerData['meta_keywords'] ?? '' }}" />
@endPush
<!-- Page Layout -->
<x-shop::layouts>
    <!-- Page Title -->
    <x-slot:title>
        {{ $bannerData['meta_title'] ?? '' }}
        </x-slot>
        <!-- Banner -->
        <div class="relative w-full flex items-center justify-center " style="height: 600px">
            <img class="aspect-[4/1] absolute object-cover w-full h-full "
                src="{{ str_replace('storage', 'cache/original', $bannerData['banner_img']) }}"
                alt="{{ $bannerData['title'] }}" />

            <div
                class="absolute inset-0 bg-opacity-0 bg-[rgb(0,0,0,0.3)] flex items-center justify-center transition-all duration-300">
            </div>

            <div class="relative text-center text-white px-4 max-w-4xl mx-auto mt-6">
                <div class="flex justify-center">
                    <img src="{{ bagisto_asset('images/Heading.svg') }}" class="h-full absolute mx-auto"
                        alt="the chef its you" width="450" />
                </div>
                <h1 class=" tracking-[0.36em] text-[66px] text-white enterprise_banner_title  uppercase font-stritch mt-[100px]">
                    {{ $bannerData['title'] }}

                </h1>
                <p class="text-lg">
                    {{ $bannerData['short_description'] }}
                </p>
            </div>
        </div>
        <!-- Description  -->
        

            <!-- <div class="pt-[100px]  mx-auto bg-[#E6E6E6]">
<div class="max-w-[1300px]  mx-auto flex justify-center  lg:flex-col gap-5">
<div class="flex gap-5 flex-wrap justify-center sm:justify-center md:justify-center lg-justify-between ">

<div class="flex flex-col gap-12 sm:w-[461px] md:w-[636px] lg:w-[636px] p-4">
<h1 class="text-[28px] leading-[36px] font-[500] text-navyBlue font-semibold max-w-[700px]" style="font-family: 'Poppins', sans-serif;">La Fonda: From Moroccan Heritage to Culinary Excellence in the UAE</h1>
<p class="text-[#666666] text-[20px] leading-[34px] font-[400] leading-relaxed" style="font-family: 'Poppins', sans-serif;">Welcome to La Fonda, a Moroccan company founded in 1994, where sophistication meets culinary excellence! Our boutique boasts sleek lines and a modern design, creating an inviting space for those with discerning tastes. Here, you&rsquo;ll discover an exquisite selection of Moroccan culinary specialties alongside global delights, all crafted with the soul and signature of La Fonda.</p>
<img src="https://lafonda-uat.o2usd.net/cache/original/tinymce/jYbOoEgBRPaU5sgzvT0S5JziD2Oe4SkQidHmSa26.png" alt="" class="w-[461px] h-[371px] sm:w-[461px] md:w-[636px] lg:w-[636px]"></div>

<div class="flex flex-col gap-10 sm:w-[461px] md:w-[636px] lg:w-[636px] p-4 mt-0 sm:mt-10 md:mt-0"><img src="https://lafonda-uat.o2usd.net/cache/original/tinymce/75KLmpLalkpkv7BnmMPM0xsqirJ3guDlz7agoR1A.png" alt=""class="w-[461px] h-[371px] sm:w-[461px] md:w-[636px] lg:w-[636px]" ><br>Every product is created by La Fonda, ensuring the highest quality and authenticity. Our Research and Development department is dedicated to crafting products with aromatic profiles from around the world, all featuring that distinctive La Fonda touch. Explore our extensive range of gourmet offerings, designed to bring joy to every occasion. Indulge in our premium halal meats and artisanal creations, where every visit is a journey into luxury and rich flavors. Experience the perfect fusion of style and taste at La Fonda, where tradition meets innovation in every bite! Now established in the United Arab Emirates, La Fonda continues to share the excellence of Moroccan cuisine with the world.</div>
</div>
</div>
<div class="max-w-full  bg-[#EDEDEC]">
<div class="max-w-[1300px] mx-auto py-[100px] flex flex-col gap-4 lg:flex-row justify-between items-center">
<div class=" lg:text-left max-w-[549px] min-h-[258px]  lg:mb-0 p-4">
<div class="relative max-w-4xl mx-auto">
<div><img class="w-[358px]  absolute top-[10px] -left-[20px]" src="https://lafonda-uat.o2usd.net/themes/shop/default/build/assets/store-icon.svg" alt="the chef its you" width="230" height="45"></div>
<h1 class="text-[66px] text-[#7E7071]  leading-[66px] font-[500] tracking-[0.36em]  uppercase font-stritch mb-[100px]">Our Fun Fact</h1>
</div>
<p class="text-[#00000099] text-[18px] leading-[27px] font-[400] mt-6 max-w-lg mx-auto lg:mx-0" style="font-family: 'Poppins', sans-serif;">Discover some key numbers that highlight La Fonda's journey and commitment to excellence.</p>
</div>
<div class="max-w-[569px] min-h-[300px] flex items-center lg:justify-center">
<div class="grid grid-cols-2  lg:gap-10 p-4">
<div class="flex flex-col gap-4 border-b border-gray-200 w-[203px] w-full">
<p class="text-[56px] leading-[67px] font-[600] text-navyBlue font-bold" style="font-family: 'Poppins', sans-serif;">30+</p>
<p class="text-[18px] leading-[27px] font-[400] text-[#00000099]" style="font-family: 'Poppins', sans-serif;">Years<span class="font38">&nbsp;of experience in delivering premium, halal, and preservative-free products</span></p>
</div>
<div class="flex flex-col gap-4 border-b border-gray-200 w-[203px] w-full">
<p class="text-[56px] leading-[67px] font-[600] text-navyBlue font-bold" style="font-family: 'Poppins', sans-serif;">80+</p>
<p class="text-[18px] leading-[27px] font-[400] text-[#00000099]" style="font-family: 'Poppins', sans-serif;">Products<span class="font38">&nbsp;crafted in-house, ranging from charcuterie to gourmet ready meals.</span></p>
</div>
<div class="flex flex-col gap-4 border-b border-gray-200 w-[203px] w-full">
<p class="text-[18px] leading-[27px] font-[400] text-[#00000099]" style="font-family: 'Poppins', sans-serif;">Over 20,000 satisfied customers<span class="font38">&nbsp;enjoying our products globally</span></p>
</div>
<div class="flex flex-col gap-4 border-b border-gray-200 w-[203px] w-full">
<p class="text-[18px] leading-[27px] font-[400] text-[#00000099]" style="font-family: 'Poppins', sans-serif;">2 Continents<span class="font38">&nbsp;and growing &ndash; from Morocco to the UAE, bringing global flavors with a Moroccan soul</span></p>
      
</div>
</div>
</div>
</div>
</div>
</div> -->

        {!!$bannerData['description'] !!}

        <!-- Store -->
        <x-shop::store.store title="Our Store" navigation-link="" />
        <!-- Certificate -->
        <div class="bg-[#E6E6E6] w-full mx-auto min-h-[588px] h-full">
            <div class="relative w-full flex items-center bg-[#E6E6E6] justify-center pt-[100px] reduce_height" style="height: 250px">

                <div class="flex relative h-[158px] bg-[#E6E6E6] mx-auto w-full justify-center items-center">
                    <h1 class="text-[#7E7071] our-certification-title text-[66px] font-stritch text-center font-['Acumin-Variable-Concept-2'] font-[500] leading-[66px] tracking-[0.36em]">
                        @lang('shop::app.home.enterprise.our-certifications')
                    </h1>
                    <img
                        src="{{ bagisto_asset('images/store-icon.svg') }}"
                        class="absolute h-[165px] w-[400px] top-3 transform -translate-y-1/2 mx-auto increase_top_padding_of_image"
                        alt="Missing image" />
                </div>
            </div>

            <v-certificates></v-certificates>
        </div>



        <!-- Teams -->

        <v-teams-carousel>

        </v-teams-carousel>





        @pushOnce('scripts')
        <script type="text/x-template" id="v-teams-carousel">
            <div class="w-full  pl-[150px] py-[100px] flex related_teams_Grid flex-col bg-[#031627] recipes_reduce_bottom_padding  recipes_reduce_top_padding">

            <div class="related_products_title_section flex justify-between">
                <div class="related_products_title relative flex justify-start items-start flex-col gap-2">
                    <span
                        class="related_products_title font-stritch tracking-[0.36em] text-[#FFFFFF] font-[500] text-[66px] leading-[66px] font-[500]  ">MANAGEMENT DETAILS</span>
                    <span class="text-white font-[400] text-[16px] leading-[24px] font-['Acumin-Variable-Concept-2'] tracking-[0px]">
                    {{core()->getConfigData('general.content.teams_description.title')}}
                    </span>
                    <img src="{{ bagisto_asset('images/Heading.svg') }}"
                        class="absolute top-[-58px] related_sign_image left-[10px]" alt="Missing image" />
                </div>
                <div class="related_products_view_all pr-[150px]">
                <!-- <a href="/shop"
                        class="bg-none border text-[#ffffff] font-[400] text-[16px] flex justify-center items-center border-[#FFFFFF66] rounded-[40px] w-[138px] h-[48px]">
                        View All
                </a> -->
                </div>
            </div>
            <div ref="swiperContainer"
                class="flex related_products gap-8 pb-2.5 [&>*]:flex-[0] mt-10 overflow-auto scroll-smooth scrollbar-hide max-md:gap-7 max-md:mt-5 max-sm:gap-4 max-md:pb-0 max-md:whitespace-nowrap">

                <div class=" text-white transform transition-transform duration-300 hover:scale-95" v-for="(team,index) in teams" >
                    <div v-if="index%2===0">
                    <h1 class="text-white">@{{ team.title}} </h1>
                    <p class="text-white" v-html="team.description"></p>
                    <div class="bg-white h-[336px] w-[278px]">
                        <img :src="team.image.replace('storage','cache/original')" alt="" class="w-full h-full">
                    </div>
                    </div>
                    <div v-else>
                    <div class="bg-white h-[336px] w-[278px]">
                        <img :src="team.image.replace('storage','cache/original')" alt="" class="w-full h-full">
                    </div>
                    <h1 class="text-white">@{{ team.title}} </h1>
                    <p class="text-white" v-html="team.description"></p>
                    </div>
                </div>

            </div>
            <div v-if="teams.length > 3 || items_screen" class="flex items-center justify-center gap-8 mt-5  px-4">
                <!-- Previous Button -->
                <span @click="swipeLeft"
                    class="flex cursor-pointer group justify-center border-[1px] border-[#FFFF] rounded-[40px] text-[#FFFF] items-center w-[72px] h-[48px] hover:bg-gray-400 hover:border-none">
                    <svg class="group-hover:stroke-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M10.5303 5.46967C10.8232 5.76256 10.8232 6.23744 10.5303 6.53033L5.81066 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.81066L10.5303 17.4697C10.8232 17.7626 10.8232 18.2374 10.5303 18.5303C10.2374 18.8232 9.76256 18.8232 9.46967 18.5303L3.46967 12.5303C3.17678 12.2374 3.17678 11.7626 3.46967 11.4697L9.46967 5.46967C9.76256 5.17678 10.2374 5.17678 10.5303 5.46967Z"
                            fill="#ffffff" />
                    </svg>
                </span>
                <!-- Next Button -->
                <span @click="swipeRight"
                    class="flex cursor-pointer justify-center border-[1px] border-[#FFFF] rounded-[40px] text-[#FFFF] items-center w-[72px] h-[48px] hover:bg-gray-400 hover:border-none">
                    <svg class="group-hover:stroke-white" width="24" height="24" version="1.1" id="lni_lni-arrow-right"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 64 64" xml:space="preserve" fill="#ffffff">
                        <path
                            d="M57.6,30.4l-20.7-21c-0.9-0.9-2.3-0.9-3.2,0c-0.9,0.9-0.9,2.3,0,3.2l16.8,17.1H8c-1.2,0-2.2,1-2.2,2.2s1,2.3,2.2,2.3h42.7l-17,17.3c-0.9,0.9-0.9,2.3,0,3.2c0.4,0.4,1,0.6,1.6,0.6c0.6,0,1.2-0.2,1.6-0.7l20.7-21C58.5,32.7,58.5,31.3,57.6,30.4z"
                            fill="#ffffff" />
                    </svg>
                </span>
            </div>

            </div>
                                    </script>
        <script type="module">
            app.component('v-teams-carousel', {
                template: '#v-teams-carousel',
                data() {
                    return {
                        isLoading: true,
                        teams: @json($team),
                        offset: 310, // Horizontal scroll offset
                        items_screen: false, // Tracks if the screen is smaller than 1024px
                        windowWidth: window.innerWidth // Track the window width
                    };
                },
                mounted() {

                    this.items_screen = this.windowWidth < 1024;

// Add event listener for resize to update windowWidth
window.addEventListener('resize', this.updateWindowWidth);
                    window.addEventListener('scroll', () => {
                        const overlay = document.getElementById('header_overlay');

                        if (overlay) {
                            window.addEventListener('scroll', function() {
                                const scrollPosition = window.scrollY || document.documentElement
                                    .scrollTop;

                                if (scrollPosition >= 5) {
                                    overlay.classList.add('header-onscroll');
                                } else {
                                    overlay.classList.remove('header-onscroll');
                                }
                            });
                        } else {}
                    });

                    if(window.innerWidth < 1024){
                        this.items_screen = true
                    }
                },
                watch: {
    windowWidth(newWidth) {
        // React to window width changes
        this.items_screen = newWidth < 1024;
    }
},
beforeDestroy() {
    // Clean up the resize event listener
    window.removeEventListener('resize', this.updateWindowWidth);
},
                methods: {
                    swipeLeft() {
                        const container = this.$refs.swiperContainer;
                        container.scrollLeft -= this.offset;
                    },
                    swipeRight() {
                        const container = this.$refs.swiperContainer;

                        if (container.scrollLeft + container.clientWidth >= container.scrollWidth) {
                            container.scrollLeft = 0;
                        } else {
                            container.scrollLeft += this.offset;
                        }
                    },
                    updateWindowWidth() {
        this.windowWidth = window.innerWidth; // Update windowWidth on resize
    }
                },
            });
        </script>
        @endPushOnce

</x-shop::layouts>