@extends('layout.front.master')

@section('title', config('site.tagline', config('site.name')))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

@section('og_title', config('site.og.title'))
@section('og_description', config('site.og.description'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description'))
@section('twitter_image', brand_twitter_image())

@section('content')

{{-- Hero Section - Dynamic from WelcomeCarousel --}}
@if(isset($carouselImages) && $carouselImages->count() > 0)
    @if($carouselImages->count() === 1)
        {{-- Single Slide with Parallax --}}
        @php $slide = $carouselImages->first(); @endphp
        @php
            $imageUrl = filter_var($slide->image_path, FILTER_VALIDATE_URL)
                ? $slide->image_path
                : asset($slide->image_path);
        @endphp
        <section class="section section-with-shape-divider section-height-5 overlay overlay-show border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%', 'fadeIn': true}" data-image-src="{{ $imageUrl }}">
            <div class="container position-relative py-5 mb-5">
                <div class="row align-items-center h-100 mb-4">
                    <div class="col text-center">
                        <div class="text-color-primary d-inline-flex align-items-center custom-font-secondary text-4">
                            <div class="custom-line appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="600"></div>
                            <div class="overflow-hidden">
                                <span class="d-block positive-ls-2 font-weight-medium text-4 px-4 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="300">{{ config('site.welcome.hero_label', __('WELCOME TO')) }}</span>
                            </div>
                            <div class="custom-line appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="600"></div>
                        </div>
                        <h1 class="text-color-light font-weight-bold positive-ls-1 line-height-1 custom-big-font-size-1 mb-2 appear-animation text-uppercase" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="700">{{ config('site.name', '') }}</h1>
                        <p class="text-color-light text-4 opacity-8 pb-3 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 1100, 'minWindowWidth': 0}" style="height: 42px;">{{ config('site.description', '') }}</p>
                        <div class="d-flex flex-column flex-md-row align-items-center justify-content-center gap-2 gap-md-3">
                            @if(config('site.header.cta_button.active', false))<a href="{{ config('site.header.cta_button.url', '#') }}" target="{{ config('site.header.cta_button.target', '_blank') }}" rel="noopener noreferrer" class="btn btn-primary text-2-5 font-weight-medium positive-ls-2 px-5 btn-py-3 appear-animation w-100 w-md-auto d-block d-md-none" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">{{ strtoupper(config('site.header.cta_button.title', 'ORDER NOW')) }}</a>@endif
                            <a href="{{ route('front.menu.index') ?? url('/menu') }}" class="btn btn-light btn-outline text-2-5 text-color-light border-color-light-2 font-weight-medium positive-ls-2 text-color-hover-dark px-5 btn-py-3 appear-animation w-100 w-md-auto" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2200">{{ config('site.welcome.cta_label', __('EXPLORE MENU')) }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#aboutus" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary text-5-5 position-absolute transform3dx-n50 left-50pct bottom-5 mb-4 z-index-2">
                <i class="icons icon-arrow-down font-weight-bold"></i>
            </a>
            <div class="shape-divider shape-divider-bottom shape-divider-reverse-y" style="height: 116px;">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
                    <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                        c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                        c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
                    <rect y="90" fill="#FFF" width="1920" height="26"/>
                </svg>
            </div>
        </section>
    @else
        {{-- Multiple Slides Carousel with Parallax --}}
        <div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-style-1 nav-arrows-thin nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplay': true, 'autoplayTimeout': 7000, 'loop': true}" style="height: 100vh; min-height: 600px;">
            <div class="owl-stage-outer">
                <div class="owl-stage">
                    @foreach($carouselImages as $index => $slide)
                        @php
                            $imageUrl = filter_var($slide->image_path, FILTER_VALIDATE_URL)
                                ? $slide->image_path
                                : asset($slide->image_path);
                        @endphp
                        <div class="owl-item position-relative">
                            <section class="section section-with-shape-divider section-height-5 overlay overlay-show border-0 m-0 h-100" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%', 'fadeIn': true}" data-image-src="{{ $imageUrl }}">
                                <div class="container position-relative py-5 mb-5 h-100">
                                    <div class="row align-items-center h-100 mb-4">
                                        <div class="col text-center">
                                            <div class="text-color-primary d-inline-flex align-items-center custom-font-secondary text-4">
                                                <div class="custom-line appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="600"></div>
                                                <div class="overflow-hidden">
                                                    <span class="d-block positive-ls-2 font-weight-medium text-4 px-4 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="300">{{ config('site.welcome.hero_label', __('WELCOME TO')) }}</span>
                                                </div>
                                                <div class="custom-line appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="600"></div>
                                            </div>
                                            <h1 class="text-color-light font-weight-bold positive-ls-1 line-height-1 custom-big-font-size-1 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="700">{{ config('site.name', '') }}</h1>
                                            <p class="text-color-light text-4 opacity-8 pb-3 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 1100, 'minWindowWidth': 0}" style="height: 42px;">{{ config('site.description', '') }}</p>
                                            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center gap-2 gap-md-3">
                                                @if(config('site.header.cta_button.active', false))<a href="{{ config('site.header.cta_button.url', '#') }}" target="{{ config('site.header.cta_button.target', '_blank') }}" rel="noopener noreferrer" class="btn btn-primary text-2-5 font-weight-medium positive-ls-2 px-5 btn-py-3 appear-animation w-100 w-md-auto d-block d-md-none" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">{{ strtoupper(config('site.header.cta_button.title', 'ORDER NOW')) }}</a>@endif
                                                <a href="{{ route('front.menu.index') ?? url('/menu') }}" class="btn btn-light btn-outline text-2-5 text-color-light border-color-light-2 font-weight-medium positive-ls-2 text-color-hover-dark px-5 btn-py-3 appear-animation w-100 w-md-auto" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2200">{{ config('site.welcome.cta_label', __('EXPLORE MENU')) }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#aboutus" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary text-5-5 position-absolute transform3dx-n50 left-50pct bottom-5 mb-4 z-index-2">
                                    <i class="icons icon-arrow-down font-weight-bold"></i>
                                </a>
                                <div class="shape-divider shape-divider-bottom shape-divider-reverse-y" style="height: 116px;">
                                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
                                        <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                                            c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                                            c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
                                        <rect y="90" fill="#FFF" width="1920" height="26"/>
                                    </svg>
                                </div>
                            </section>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="owl-nav">
                <button type="button" role="presentation" class="owl-prev" aria-label="Previous"></button>
                <button type="button" role="presentation" class="owl-next" aria-label="Next"></button>
            </div>
        </div>
    @endif
@else
    {{-- Fallback: Default image from config --}}
    @php
        $heroBackgroundImage = site_asset_url('hero_background', 'cd-project/img/demos/restaurant/backgrounds/background-1.jpg');
    @endphp
    <section class="section section-with-shape-divider section-height-5 overlay overlay-show border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%', 'fadeIn': true}" data-image-src="{{ $heroBackgroundImage }}">
        <div class="container position-relative py-5 mb-5">
            <div class="row align-items-center h-100 mb-4">
                <div class="col text-center">
                    <div class="text-color-primary d-inline-flex align-items-center custom-font-secondary text-4">
                        <div class="custom-line appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="600"></div>
                        <div class="overflow-hidden">
                            <span class="d-block positive-ls-2 font-weight-medium text-4 px-4 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="300">{{ config('site.welcome.hero_label', __('WELCOME TO')) }}</span>
                        </div>
                        <div class="custom-line appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="600"></div>
                    </div>
                    <h1 class="text-color-light font-weight-bold positive-ls-1 line-height-1 custom-big-font-size-1 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="700">{{ config('site.name', '') }}</h1>
                    <p class="text-color-light text-4 opacity-8 pb-3 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 1100, 'minWindowWidth': 0}" style="height: 42px;">{{ config('site.description', '') }}</p>
                    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center gap-2 gap-md-3">
                        @if(config('site.header.cta_button.active', false))<a href="{{ config('site.header.cta_button.url', '#') }}" target="{{ config('site.header.cta_button.target', '_blank') }}" rel="noopener noreferrer" class="btn btn-primary text-2-5 font-weight-medium positive-ls-2 px-5 btn-py-3 appear-animation w-100 w-md-auto d-block d-md-none" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">{{ strtoupper(config('site.header.cta_button.title', 'ORDER NOW')) }}</a>@endif
                        <a href="{{ route('front.menu.index') ?? url('/menu') }}" class="btn btn-light btn-outline text-2-5 text-color-light border-color-light-2 font-weight-medium positive-ls-2 text-color-hover-dark px-5 btn-py-3 appear-animation w-100 w-md-auto" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2200">{{ config('site.welcome.cta_label', __('EXPLORE MENU')) }}</a>
                    </div>
                </div>
            </div>
        </div>
        <a href="#aboutus" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary text-5-5 position-absolute transform3dx-n50 left-50pct bottom-5 mb-4 z-index-2">
            <i class="icons icon-arrow-down font-weight-bold"></i>
        </a>
        <div class="shape-divider shape-divider-bottom shape-divider-reverse-y" style="height: 116px;">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
                <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                    c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                    c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
                <rect y="90" fill="#FFF" width="1920" height="26"/>
            </svg>
        </div>
    </section>
@endif

<div id="aboutus" class="container py-5 mt-3 mb-5">
    <div class="row row-gutter-sm align-items-center justify-content-center">
        @php
            // Defensive: usar Elvis operator (?:) en vez de fallback del config()
            // para que strings vacíos persistidos en DB caigan al default también
            // (el segundo arg de config() solo aplica si la key NO existe).
            $storyImg1 = config('site.welcome.story_image_1') ?: 'cd-project/img/demos/restaurant/generic/generic-11.jpg';
            $storyImg2 = config('site.welcome.story_image_2') ?: 'cd-project/img/demos/restaurant/generic/generic-12.jpg';
            $storyImg3 = config('site.welcome.story_image_3') ?: 'cd-project/img/demos/restaurant/generic/generic-13.jpg';
        @endphp
        <div class="col-6 col-md-4 col-lg-3 align-self-start">
            <img src="{{ filter_var($storyImg1, FILTER_VALIDATE_URL) ? $storyImg1 : asset($storyImg1) }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant inside showcase 1" />
        </div>
        <div class="col-6 col-md-4 col-lg-3 align-self-start mb-5 mb-lg-0">
            <img src="{{ filter_var($storyImg2, FILTER_VALIDATE_URL) ? $storyImg2 : asset($storyImg2) }}" class="img-fluid box-shadow-4 rounded-0 mb-3 mb-sm-4" alt="Restaurant inside showcase 2" />
            <img src="{{ filter_var($storyImg3, FILTER_VALIDATE_URL) ? $storyImg3 : asset($storyImg3) }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant inside showcase 3" />
        </div>
        <div class="col-lg-6 ps-lg-3 ps-xl-5">
            <h2 class="text-color-primary positive-ls-3 text-4 line-height-3 mb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">{{ config('site.welcome.story_badge', 'OUR STORY') }}</h2>
            <h3 class="text-color-dark text-transform-none text-9 line-height-3 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                {{ config('site.welcome.story_heading', 'The Evolution of Homemade.') }}
            </h3>
            <p class="text-3-5 pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                {{ config('site.welcome.story_text', config('site.about.main_subtitle', config('site.description', 'Born from the soul of Tucumán, Argentina, and crafted for the hustle of Miami. Muma is more than an empanada; it\'s a tribute to our mother\'s kitchen and a new classic for your daily routine. We believe in real food, vibrant colors from natural ingredients, and the perfect bite that follows you wherever your day takes you. No filters, no complications—just honest flavor.'))) }}
            </p>
            <a href="{{ route('front.about') ?? url('/about') }}" class="btn btn-dark font-weight-medium text-3 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900">{{ config('site.welcome.about_cta_label', __('More About Us')) }}</a>
        </div>
    </div>
</div>

{{-- TESTIMONIALS — from testimonials module --}}
@if(isset($testimonials) && $testimonials->count() > 0)
<section class="section section-height-2 border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '130%', 'fadeIn': true}" data-image-src="{{ site_asset_url('section_background', 'cd-project/img/demos/restaurant/backgrounds/background-2.jpg') }}">
    <div class="container mb-4">
        <div class="row justify-content-center appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
            <div class="col-lg-10">
                <div class="d-flex justify-content-center pb-2 mb-4">
                    <i class="fas fa-star text-color-grey opacity-3 text-4-5"></i>
                    <i class="fas fa-star text-color-grey opacity-3 text-4-5 px-2"></i>
                    <i class="fas fa-star text-color-grey opacity-3 text-4-5"></i>
                    <i class="fas fa-star text-color-grey opacity-3 text-4-5 px-2"></i>
                    <i class="fas fa-star text-color-grey opacity-3 text-4-5"></i>
                </div>
                <div class="owl-carousel owl-theme nav-style-1 nav-arrows-thin nav-outside nav-dark nav-font-size-lg bg-light box-shadow-4 py-5 py-lg-0 mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'dots': true}, '768': {'items': 1}, '992': {'items': 1, 'nav': true, 'dots': false}, '1200': {'items': 1, 'nav': true, 'dots': false}}, 'loop': true, 'autoHeight': true, 'autoplay': true, 'autoplayTimeout': 7000}">
                    @foreach($testimonials as $t)
                    <div class="py-3 py-lg-5 px-lg-5">
                        <div class="custom-testimonial-style-1 testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote px-0 px-md-4 mx-xl-3 my-3">
                            <i class="fab fa-google text-color-dark" style="font-size: 42px;"></i>
                            <blockquote class="pt-3 pb-2 px-0 px-md-3">
                                <p class="text-color-dark text-3-5 line-height-8 alternative-font-4 mb-0">{{ $t->description }}</p>
                            </blockquote>
                            <p class="text-color-grey opacity-6">{{ strtoupper($t->position ?? '') }}</p>
                            <div class="testimonial-author">
                                <strong class="font-weight-bold text-4 negative-ls-1">{{ $t->name }}</strong>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<div class="container py-5 my-5">
    <div class="row justify-content-center mb-5">
        <div class="col-lg-10 text-center">
            <h2 class="text-color-primary positive-ls-3 text-4 line-height-3 mb-2">{{ config('site.welcome.offer_badge', 'WHAT WE OFFER') }}</h2>
            <h3 class="text-color-dark text-transform-none text-9 line-height-3 font-weight-medium mb-4">{{ config('site.welcome.offer_heading', 'Colorful, Real & Simple.') }}</h3>
            <p class="text-3-5">
                {{ config('site.welcome.offer_text', 'Our doughs get their vibrant colors from the ingredients themselves: spinach, beets, and cocoa. Choose your mood between our Classics and our Bold selection.') }}
            </p>
        </div>
    </div>
    @if(is_module_active('menu') && isset($menuSections) && $menuSections->isNotEmpty())
        {{-- Preview del menú — 2 secciones con más productos, max 6 items cada una --}}
        @php
            $previewSections = $menuSections->sortByDesc(function($s) {
                return $s->menu->products->count();
            })->take(2);
        @endphp
        <div class="row">
            @foreach($previewSections as $section)
                @php
                    $menu = $section->menu;
                    $previewProducts = $menu->products->take(6);
                @endphp
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <h4 class="text-color-dark font-weight-bold positive-ls-3 mb-3">{{ strtoupper($menu->name) }}</h4>
                    @if($menu->description)
                        <p class="text-2-5 line-height-4 text-color-grey mb-2">{{ $menu->description }}</p>
                    @endif
                    <hr class="custom-divider-size-1 bg-color-grey-200 mt-2 mb-4">
                    <div class="pt-2">
                        @foreach($previewProducts as $product)
                            <div class="custom-menu-item">
                                <div class="custom-menu-item-details">
                                    <div class="custom-menu-item-title">
                                        <h5 class="custom-secondary-font text-transform-none font-weight-semibold text-4 mb-0">{{ $product->name }}</h5>
                                    </div>
                                    <div class="custom-menu-item-line opacity-4"></div>
                                    <div class="custom-menu-item-price">
                                        <strong class="custom-font-secondary text-color-dark text-4 positive-ls-3">
                                            @if((float) $product->price > 0)
                                                <span class="text-2-5">$</span>{{ number_format($product->price, 2) }}
                                            @else
                                                <span class="text-2-5 opacity-7">Ask</span>
                                            @endif
                                        </strong>
                                    </div>
                                </div>
                                @if($product->description)
                                    <div class="custom-menu-item-desc">
                                        <p class="text-2-5 line-height-4">{{ $product->description }}</p>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
        <div class="row pt-2 mt-4">
            <div class="col text-center">
                <a href="{{ route('front.menu.index') ?? url('/menu') }}" class="btn btn-dark custom-btn-style-1 font-weight-medium text-3 btn-px-5 py-3"><span>{{ config('site.welcome.menu_cta_label', __('View Full Menu')) }}</span></a>
            </div>
        </div>
    @else
        {{-- Fallback cuando el módulo Menú está desactivado o no hay datos --}}
        <div class="row">
            <div class="col text-center py-4">
                <p class="text-3-5 text-color-grey mb-4">Explore our full menu.</p>
                @if(config('cd-system.modules.menu.active', false))
                    <a href="{{ route('front.menu.index') ?? url('/menu') }}" class="btn btn-dark custom-btn-style-1 font-weight-medium text-3 btn-px-5 py-3"><span>{{ config('site.welcome.menu_cta_label', __('View Full Menu')) }}</span></a>
                @endif
            </div>
        </div>
    @endif
</div>

<section class="section section-height-3 bg-color-grey border-0 m-0">
    <div class="container pt-2">
        <div class="row">
            <div class="col text-center">
                <h2 class="text-color-primary positive-ls-3 text-4 line-height-1 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ config('site.welcome.gallery_badge', 'INSIDE ' . strtoupper(config('site.name', 'MUMA'))) }}</h2>
                <h3 class="text-color-dark text-transform-none text-9 line-height-3 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.welcome.gallery_heading', 'Our Gallery') }}</h3>
            </div>
        </div>
        <div class="row">
            <div class="col appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">
                <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                    <div class="owl-carousel-wrapper" style="height: 329.77px;">
                        <div class="carousel-half-full-width-wrapper carousel-half-full-width-right">
                            <div class="owl-carousel owl-theme carousel-half-full-width-right carousel-shadow-1 nav-bottom nav-bottom-align-left nav-style-1 nav-arrows-thin nav-dark nav-font-size-lg mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '576': {'items': 2}, '768': {'items': 3}, '992': {'items': 4}, '1200': {'items': 4}}, 'loop': false, 'nav': true, 'dots': false, 'margin': 20}">
                                @if(is_module_active('gallery') && isset($galleryImages) && $galleryImages->count() > 0)
                                    @foreach($galleryImages as $galleryImage)
                                        @php
                                            $imgSrc = filter_var($galleryImage->img, FILTER_VALIDATE_URL) ? $galleryImage->img : asset($galleryImage->img);
                                        @endphp
                                        <div>
                                            <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="{{ $imgSrc }}">
                                                <img src="{{ $imgSrc }}" class="img-fluid box-shadow-4 rounded-0" alt="{{ $galleryImage->title ?? 'Gallery image' }}" />
                                            </a>
                                        </div>
                                    @endforeach
                                @else
                                    <div>
                                        <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="{{ asset('cd-project/img/demos/restaurant/generic/generic-1.jpg') }}">
                                            <img src="{{ asset('cd-project/img/demos/restaurant/generic/generic-1.jpg') }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant interior showcase 1" />
                                        </a>
                                    </div>
                                    <div>
                                        <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="{{ asset('cd-project/img/demos/restaurant/generic/generic-2.jpg') }}">
                                            <img src="{{ asset('cd-project/img/demos/restaurant/generic/generic-2.jpg') }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant interior showcase 1" />
                                        </a>
                                    </div>
                                    <div>
                                        <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="{{ asset('cd-project/img/demos/restaurant/generic/generic-3.jpg') }}">
                                            <img src="{{ asset('cd-project/img/demos/restaurant/generic/generic-3.jpg') }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant interior showcase 1" />
                                        </a>
                                    </div>
                                    <div>
                                        <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="{{ asset('cd-project/img/demos/restaurant/generic/generic-4.jpg') }}">
                                            <img src="{{ asset('cd-project/img/demos/restaurant/generic/generic-4.jpg') }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant interior showcase 1" />
                                        </a>
                                    </div>
                                    <div>
                                        <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="{{ asset('cd-project/img/demos/restaurant/generic/generic-5.jpg') }}">
                                            <img src="{{ asset('cd-project/img/demos/restaurant/generic/generic-5.jpg') }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant interior showcase 1" />
                                        </a>
                                    </div>
                                    <div>
                                        <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon" href="{{ asset('cd-project/img/demos/restaurant/generic/generic-6.jpg') }}">
                                            <img src="{{ asset('cd-project/img/demos/restaurant/generic/generic-6.jpg') }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant interior showcase 1" />
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section bg-transparent border border-top-0 border-end-0 border-start-0 position-relative m-0">
    <img src="{{ asset('cd-project/img/demos/restaurant/backgrounds/background-top-left-1.jpg') }}" class="img-fluid position-absolute top-0 left-0" alt="Author left drawn food background image" />
    <img src="{{ asset('cd-project/img/demos/restaurant/backgrounds/background-top-right-1.jpg') }}" class="img-fluid position-absolute top-0 right-0 d-none d-md-block" alt="Author right drawn food background image" />
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-auto col-lg-3 text-center mb-4 mb-lg-0">
                @php $founderImg = config('site.welcome.founder_image', 'cd-project/img/demos/restaurant/cheff.jpg'); @endphp
                <img src="{{ filter_var($founderImg, FILTER_VALIDATE_URL) ? $founderImg : asset($founderImg) }}" class="img-fluid rounded-circle" style="max-width: 250px;" alt="Restaurant Cheff mounting a dish" />
            </div>
            <div class="col-lg-7">
                <div class="custom-testimonial-style-1 custom-testimonial-style-1-quote-big testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote text-center text-lg-start mb-0">
                    <blockquote class="py-0 px-4 mb-3">
                        <p class="text-color-dark text-4 line-height-8 alternative-font-4 px-4 mb-0">
                            {{ config('site.welcome.founder_quote', 'We didn\'t come here to reinvent the empanada, we came to make it part of your world. Real ingredients, vibrant colors, and that feeling of home, wherever you are.') }}
                        </p>
                    </blockquote>
                    <div class="testimonial-author d-block ps-lg-5">
                        <strong class="font-weight-bold text-3 positive-ls-2 mb-3">{{ config('site.welcome.founder_attribution', 'THE ' . strtoupper(config('site.name', 'MUMA')) . ' BROTHERS - FOUNDERS') }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@if(is_module_active('blog') && isset($recentPosts) && $recentPosts->count() > 0)
<div class="container pt-4 pb-3 my-5">
    <div class="row">
        <div class="col text-center">
            <h2 class="text-color-primary positive-ls-3 text-4 line-height-1 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">{{ config('site.welcome.blog_badge', 'RECENT NEWS') }}</h2>
            <h3 class="text-color-dark text-transform-none text-9 line-height-4 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ config('site.welcome.blog_heading', 'Our Blog') }}</h3>
        </div>
    </div>
    <div class="row row-gutter-sm justify-content-center mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">
        @foreach($recentPosts as $index => $post)
        <div class="col-10 col-sm-9 col-md-6 col-lg-4 {{ $index < 2 ? 'mb-4 mb-lg-0' : '' }}">
            <a href="{{ route('blog.post', $post->slug) }}" class="custom-link-hover-effects text-decoration-none">
                <div class="card border-0 box-shadow-4">
                    <div class="card-img-top position-relative overlay">
                        <div class="position-absolute bottom-10 right-0 d-flex justify-content-end w-100 py-3 px-4 z-index-3">
                            <span class="custom-date-style-1 text-center bg-primary text-color-light font-weight-semibold text-5-5 line-height-2 px-3 py-2">
                                <span class="position-relative text-center z-index-2">
                                    {{ $post->created_at->format('d') }}
                                    <span class="d-block custom-font-size-1 pe-1 ps-2">{{ strtoupper($post->created_at->format('M')) }}</span>
                                </span>
                            </span>
                        </div>
                        @if($post->header)
                            <img src="{{ filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : asset($post->header) }}"
                                 class="img-fluid"
                                 alt="{{ $post->title }}" />
                        @else
                            <img src="{{ asset('cd-project/img/demos/restaurant/blog/blog-' . (($index % 3) + 1) . '.jpg') }}"
                                 class="img-fluid"
                                 alt="{{ $post->title }}" />
                        @endif
                    </div>
                    <div class="card-body p-4">
                        @if($post->category)
                            <span class="d-block text-color-grey font-weight-semibold positive-ls-2 text-2">{{ strtoupper($post->category->name) }}</span>
                        @else
                            <span class="d-block text-color-grey font-weight-semibold positive-ls-2 text-2">BLOG</span>
                        @endif
                        <h4 class="font-weight-semibold text-5 text-color-hover-primary mb-2">{{ $post->title }}</h4>
                        <a href="{{ route('blog.post', $post->slug) }}" class="font-weight-semibold text-color-primary text-decoration-none">{{ __('Ver más') }}</a>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>
@endif

<section class="section section-with-shape-divider bg-dark border-0 m-0">
    <a href="#header" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary position-absolute transform3dx-n50 left-50pct bottom-0 text-5 mb-5 z-index-2">
        <i class="icons icon-arrow-up font-weight-bold"></i>
    </a>
    <div class="shape-divider shape-divider-reverse-x" style="height: 116px;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
            <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
            <rect y="90" fill="#FFF" width="1920" height="26"/>
        </svg>
    </div>
</section>

@endsection