@extends('layout.front.master')

@section('title', __('Inicio'))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.og.title'))
@section('og_description', config('site.og.description'))
@section('og_image', asset(config('site.og.image')))
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description'))
@section('twitter_image', asset('cd-project/img/meta-tags/twitter-image.png'))

@section('content')

<div>

    {{-- Hero Slider Section --}}
    <section class="section bg-primary border-0 position-relative z-index-1 py-0 m-0">
        <div class="owl-carousel-wrapper appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="350" style="height: 800px;">
            <div id="slider" class="owl-carousel dots-inside dots-horizontal-center show-dots-xs custom-dots-position nav-style-1 nav-inside nav-inside-plus nav-light nav-lg nav-font-size-lg mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'dots': true, 'nav': false}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1, 'nav': true, 'navVerticalOffset': '-100px', 'dots': false}}, 'loop': false, 'autoHeight': false, 'margin': 0, 'dots': true, 'dotsVerticalOffset': '-115px', 'nav': false, 'animateIn': 'fadeIn', 'animateOut': 'fadeOut', 'mouseDrag': false, 'touchDrag': false, 'pullDrag': false, 'autoplay': true, 'autoplayTimeout': 9000, 'autoplayHoverPause': true, 'rewind': true}">

                @if(isset($carouselImages) && $carouselImages->count() > 0)
                    @foreach($carouselImages as $index => $carouselImage)
                        {{-- Carousel Slide {{ $index + 1 }} --}}
                        <div class="position-relative overflow-hidden" data-dynamic-height="['800px','800px','800px','550px','500px']" style="height: 800px;">
                            <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0 overlay overlay-show overlay-op-6"
                                 data-appear-animation="{{ $index % 2 == 0 ? 'kenBurnsToLeft' : 'kenBurnsToRight' }}"
                                 data-appear-animation-duration="30s"
                                 data-plugin-options="{'minWindowWidth': 0}"
                                 data-carousel-onchange-show
                                 style="background-image: url({{ filter_var($carouselImage->image_path, FILTER_VALIDATE_URL) ? $carouselImage->image_path : asset($carouselImage->image_path) }}); background-size: cover; background-position: center;"></div>

                            <div class="container container-xl-custom custom-container-style-2 position-relative z-index-3 h-100 pt-5 mt-5 mt-sm-3">
                                <div class="row align-items-center h-100">
                                    <div class="col text-center">
                                        {{-- <div class="overflow-hidden mb-2 mb-sm-1 mb-md-0">
                                            <h1 class="text-color-light font-weight-black line-height-1 text-10 text-md-13 text-lg-15 ls-0 mb-0 appear-animation" data-appear-animation="maskUp">{{ config('site.name') }}</h1>
                                        </div> --}}
                                        <div class="overflow-hidden opacity-8 mb-1">
                                            <h2 class="text-color-light line-height-6 line-height-md-2 text-8 text-md-10 positive-ls-3 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">MOBILIARIO PARA EVENTOS</h2>
                                        </div>

                                        <a href="{{ route('front.products.index') }}" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3 mt-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="750">{{ __('Ver catálogo') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    {{-- Fallback: Mostrar slides por defecto si no hay imágenes en la BD --}}
                    {{-- Carousel Slide 1 --}}
                    <div class="position-relative overflow-hidden" data-dynamic-height="['800px','800px','800px','550px','500px']" style="height: 800px;">
                        <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0 overlay overlay-show overlay-op-6"
                             data-appear-animation="kenBurnsToLeft"
                             data-appear-animation-duration="30s"
                             data-plugin-options="{'minWindowWidth': 0}"
                             data-carousel-onchange-show
                             style="background-image: url({{ asset('cd-project/img/demos/architecture-2/slides/slide-1-1.jpg') }}); background-size: cover; background-position: center;"></div>

                        <div class="container container-xl-custom custom-container-style-2 position-relative z-index-3 h-100 pt-5 mt-5 mt-sm-3">
                            <div class="row align-items-center h-100">
                                <div class="col text-center">
                                    <div class="overflow-hidden mb-2 mb-sm-1 mb-md-0">
                                        <h1 class="text-color-light font-weight-black line-height-1 text-10 text-md-13 text-lg-15 ls-0 mb-0 appear-animation" data-appear-animation="maskUp">{{ config('site.name') }}</h1>
                                    </div>
                                    <div class="overflow-hidden opacity-8 mb-1">
                                        <h2 class="text-color-light line-height-6 line-height-md-2 text-5 text-md-6 positive-ls-3 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">{{ __('Sumamos Momentos que Cuentan Historias') }}</h2>
                                    </div>
                                    <div class="overflow-hidden opacity-6 mb-5">
                                        <p class="text-color-light text-3-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">{{ __('Mobiliario para eventos - Más de 15 Años de experiencia') }}</p>
                                    </div>
                                    <a href="#start" data-hash data-hash-offset="0" data-hash-offset-lg="140" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="750">{{ __('GET STARTED') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Carousel Slide 2 --}}
                    <div class="position-relative overflow-hidden" data-dynamic-height="['800px','800px','800px','550px','500px']" style="height: 800px;">
                        <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0 overlay overlay-show overlay-op-6"
                             data-appear-animation="kenBurnsToRight"
                             data-appear-animation-duration="30s"
                             data-plugin-options="{'minWindowWidth': 0}"
                             data-carousel-onchange-show
                             style="background-image: url({{ asset('cd-project/img/demos/architecture-2/slides/slide-1-2.jpg') }}); background-size: cover; background-position: center;"></div>

                        <div class="container container-xl-custom custom-container-style-2 position-relative z-index-3 h-100 pt-5 mt-5 mt-sm-3">
                            <div class="row align-items-center h-100">
                                <div class="col text-center">
                                    <div class="overflow-hidden mb-2 mb-sm-1 mb-md-0">
                                        <h1 class="text-color-light font-weight-black line-height-1 text-10 text-md-13 text-lg-15 ls-0 mb-0 appear-animation" data-appear-animation="maskUp">{{ config('site.name') }}</h1>
                                    </div>
                                    <div class="overflow-hidden opacity-8 mb-1">
                                        <h2 class="text-color-light line-height-6 line-height-md-2 text-5 text-md-6 positive-ls-3 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">{{ __('Creamos Experiencias Memorables') }}</h2>
                                    </div>
                                    <div class="overflow-hidden opacity-6 mb-5">
                                        <p class="text-color-light text-3-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">{{ __('Espacios únicos pensados con intención y detalle') }}</p>
                                    </div>
                                    <a href="#start" data-hash data-hash-offset="0" data-hash-offset-lg="140" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="750">{{ __('GET STARTED') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </section>

    <div class="custom-page-wrapper" style="background-color: #efebe4;">
        <section class="section bg-transparent border-0 position-relative py-0 m-0">
            <div class="container container-xl-custom custom-container-style pt-5">
                {{-- Services Carousel --}}
                @if(is_module_active('services'))
                <div class="row mb-5">
                    <div class="col">
                        <div class="overflow-hidden">
                            <div class="owl-carousel-wrapper position-relative z-index-1 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1000" style="height: 373px;">
                                <div class="owl-carousel owl-theme dots-horizontal-center custom-dots-style-1 mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 1}, '992': {'items': 2}, '1200': {'items': 3}}, 'margin': 25, 'loop': true, 'nav': false, 'dots': true, 'autoplay': true, 'autoplayTimeout': 7000}">
                                    @forelse(($services ?? collect())->take(4) as $index => $service)
                                        <div>
                                            <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none">
                                                <div class="card custom-card-style-1 border-radius-0">
                                                    <div class="card-body text-center p-5 mb-4">
                                                        <img width="75" height="75" src="{{ asset($service->icon ?? 'cd-project/img/demos/architecture-2/icons/house-plant.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
                                                        <h2 class="text-color-dark font-weight-bold line-height-1 text-6-5 mb-3">{{ $service->title }}</h2>
                                                        <p class="mb-0">{{ Str::limit($service->description ?? __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.'), 80) }}</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    @empty
                                        @php
                                            $defaultServices = [
                                                ['title' => __('Design & Planning'), 'icon' => 'house-plant.svg'],
                                                ['title' => __('Interior Design'), 'icon' => 'sofa.svg'],
                                                ['title' => __('Exterior Design'), 'icon' => 'wallpaper.svg'],
                                                ['title' => __('Construction Drawings'), 'icon' => 'house-plant.svg'],
                                            ];
                                        @endphp
                                        @foreach($defaultServices as $index => $service)
                                            <div>
                                                <a href="{{ route('frontend.services.index') }}" class="text-decoration-none">
                                                    <div class="card custom-card-style-1 border-radius-0">
                                                        <div class="card-body text-center p-5 mb-4">
                                                            <img width="75" height="75" src="{{ asset('cd-project/img/demos/architecture-2/icons/' . $service['icon']) }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
                                                            <h2 class="text-color-dark font-weight-bold line-height-1 text-6-5 mb-3">{{ $service['title'] }}</h2>
                                                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.') }}</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endforeach
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                {{-- About Section --}}
                <div id="start" class="row align-items-center pb-xl-5 mb-xl-5">
                    <div class="col-9 col-lg-6 col-xl-5 pb-5 pb-lg-0 mb-5 mb-lg-0">
                        <div class="position-relative">
                            <div class="overflow-hidden position-relative z-index-1">
                                <img src="{{ asset('cd-project/img/demos/architecture-2/generic/generic-1.jpg') }}" class="img-fluid appear-animation" alt="" data-appear-animation="maskLeft" data-appear-animation-delay="250" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-xl-5 position-relative pt-5 ">

                        <div class="pt-lg-5 ps-lg-5 mt-lg-5">

                            <div class="overflow-hidden mb-3">
                                <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1000">{{ __('Excelencia en cada detalle') }}</h3>
                            </div>

                            <p class="custom-font-tertiary text-5 line-height-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">{{ __('En Terashe creemos que cada evento merece un espacio único y pensado con intención. Por eso ofrecemos propuestas integrales en donde los materiales, las texturas y los colores se combinan para transformar cualquier encuentro.') }}</p>
                            <p class="custom-font-tertiary text-5 line-height-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">{{ __('Con más de 15 años de trayectoria, nos especializamos en la provisión de mobiliario para eventos. Ofreciendo un servicio completo que abarca equipamiento, montaje y logistica') }}</p>

                            <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1800">{{ __('Contáctanos') }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row pt-5">
                    <div class="col ">
                        <hr>
                    </div>
                </div>
            </div>

            {{-- Process Section --}}
            <div class="custom-section">
                <div class="custom-section-left-content parallax p-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'fadeIn': true}" data-image-src="{{ asset('cd-project/img/demos/architecture-2/generic/generic-3.jpg') }}" style="min-height: 400px"></div>
                <div class="custom-section-middle-content bg-primary p-5">
                    <div class="owl-carousel owl-theme nav-style-1 nav-svg-arrows-1 nav-light custom-hide-prev-nav custom-dots-style-1 custom-dots-style-1-light mb-0" data-plugin-options="{'responsive': {'0': { 'items': 1}, '576': {'items': 1}, '768': {'items': 1, 'dots': true, 'nav': false}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 20, 'refresh': true}">
                        <div class="pt-4 pb-3">
                            <h2 class="custom-heading-style-1 text-4-5 mb-4">
                                <span class="custom-heading-style-1-step">01</span>
                                <span class="custom-heading-style-1-text">{{ __('CONSULTA') }}</span>
                            </h2>
                            <p class="text-3-5 text-color-light opacity-4 pe-5 pe-md-0 pe-lg-5 me-3 me-md-0 me-lg-3 mb-0">{{ __('Atendemos tus consultas para identificar el mobiliario y equipamiento que mejor se adapte a lo que necesitas.') }}</p>
                        </div>
                        <div class="pt-4 pb-3">
                            <h2 class="custom-heading-style-1 text-4-5 mb-4">
                                <span class="custom-heading-style-1-step">02</span>
                                <span class="custom-heading-style-1-text">{{ __('ARMADO') }}</span>
                            </h2>
                            <p class="text-3-5 text-color-light opacity-4 pe-5 pe-md-0 pe-lg-5 me-3 me-md-0 me-lg-3 mb-0">{{ __('Trabajamos con responsabilidad para cumplir con el timing del evento, por eso ofrecemos todas las opciones logísticas que nuestros clientes necesiten para brindar la mejor experiencia.') }}</p>
                        </div>
                        <div class="pt-4 pb-3">
                            <h2 class="custom-heading-style-1 text-4-5 mb-4">
                                <span class="custom-heading-style-1-step">03</span>
                                <span class="custom-heading-style-1-text">{{ __('RETIRO') }}</span>
                            </h2>
                            <p class="text-3-5 text-color-light opacity-4 pe-5 pe-md-0 pe-lg-5 me-3 me-md-0 me-lg-3 mb-0">{{ __('Nuestra empresa brinda todas las soluciones para retirar el mobiliario en el momento que nuestro cliente necesite, ofreciendo un proceso fluido de principio a fin en cada evento.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="custom-section-right-content parallax p-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 3, 'parallaxDirection': 'bottom', 'fadeIn': true}" data-image-src="{{ asset('cd-project/img/demos/architecture-2/generic/generic-4.jpg') }}" style="min-height: 400px"></div>
            </div>
            {{-- Skills Section --}}
            <div class="divider my-5"></div>
        </section>
        {{-- Counters Section --}}
        <section class="section section-height-3 border-0 m-0">
            <div class="container py-2">
                <div class="row counters counters-sm">
                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="15" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ __('AÑOS DE EXPERIENCIA') }}</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="500" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ __('EVENTOS REALIZADOS') }}</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-5 mb-sm-0">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="200" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ __('CLIENTES SATISFECHOS') }}</label>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="counter">
                            <strong class="text-color-dark font-weight-bold line-height-1 text-12 mb-2" data-to="4" data-append="+">0</strong>
                            <label class="text-color-default positive-ls-3 font-weight-normal text-3-5 mb-0">{{ __('CATEGORÍAS') }}</label>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- Gallery Section --}}
        @if(is_module_active('gallery') && ($galleryImages ?? collect())->isNotEmpty())
            <div class="container container-xl-custom py-4 my-3">
                <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                    <div class="masonry-loader masonry-loader-showing">
                        <div class="masonry row g-0" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">
                            @php
                                $displayedImages = $galleryImages->take(8);
                            @endphp
                            @foreach($displayedImages as $index => $gallery)
                                @php
                                    $imageUrl = !empty($gallery->img) ? (filter_var($gallery->img, FILTER_VALIDATE_URL) ? $gallery->img : asset($gallery->img)) : asset('cd-project/img/demos/architecture-2/generic/generic-1.jpg');
                                    $imageAlt = $gallery->title ?? __('Imagen de galería');
                                @endphp
                                <div class="masonry-item no-default-style col-sm-3">
                                    <a href="{{ $imageUrl }}" aria-label="{{ $imageAlt }}">
                                        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                                            <span class="thumb-info-wrapper">
                                                <img src="{{ $imageUrl }}" class="img-fluid" alt="{{ $imageAlt }}">
                                                <span class="thumb-info-action">
                                                    <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @else
            {{-- Fallback a imágenes por defecto si no hay imágenes en la galería --}}
            <div class="container container-xl-custom py-4 my-3">
                <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                    <div class="masonry-loader masonry-loader-showing">
                        <div class="masonry row g-0" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">
                            @php
                                $defaultImages = [5, 6, 7, 8, 9, 10, 11, 12];
                            @endphp
                            @foreach($defaultImages as $imgIndex)
                                <div class="masonry-item no-default-style col-sm-3">
                                    <a href="{{ asset("cd-project/img/demos/architecture-2/generic/generic-{$imgIndex}.jpg") }}" aria-label="">
                                        <span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
                                            <span class="thumb-info-wrapper">
                                                <img src="{{ asset("cd-project/img/demos/architecture-2/generic/generic-{$imgIndex}.jpg") }}" class="img-fluid" alt="">
                                                <span class="thumb-info-action">
                                                    <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
        {{-- CTA Section --}}
        <section class="section section-height-3 bg-primary border-0 m-0">
            <div class="container ">
                <div class="row align-items-center justify-content-center text-center text-xl-start">
                    <div class="col-md-8 col-xl-9 mb-4 mb-xl-0 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="250">
                        <h2 class="text-secondary font-weight-semibold positive-ls-3 text-4 mb-0">{{ __('ESTAMOS AQUÍ PARA AYUDARTE') }}</h2>
                        <h3 class="text-transform-none text-color-light font-weight-black line-height-2 text-9 mb-0">{{ __('Hablemos de tu evento, ¡podemos ayudarte a crear una experiencia memorable!') }}</h3>
                    </div>
                    <div class="col-xl-3 text-xl-end appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500">
                        <a href="{{ route('front.contact') }}" class="btn btn-light custom-btn-style-1 font-weight-bold text-color-dark text-3 px-5 py-3">{{ __('Contáctanos') }}</a>
                    </div>
                </div>
            </div>
        </section>
        {{-- FAQ Section --}}
        <div class="container container-xl-custom">
            <div class="row py-5 my-5">
                <div class="col-lg-5 col-xl-4 position-relative mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="250" data-plugin-options="{'accY': -400}">


                    <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-4">{{ __('Preguntas frecuentes') }}</h3>

                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">
                        {{ __('Encuentra respuestas a las preguntas más frecuentes sobre nuestro servicio.') }}
                    </p>
                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">
                        {{ __('Si tienes alguna consulta adicional, contactanos.') }}
                    </p>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3">{{ __('Contactanos') }}</a>
                </div>
                <div class="col-lg-7 col-xl-8 appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="500" data-plugin-options="{'accY': -400}">
                    <div class="custom-accordion-style-1 accordion accordion-modern" id="FAQAccordion">
                        @if(is_module_active('faqs') && ($featuredFaqs ?? collect())->isNotEmpty())
                            @foreach($featuredFaqs as $index => $faq)
                                @php
                                    $faqId = 'collapseFAQ' . ($index + 1);
                                    $isFirst = $index === 0;
                                @endphp
                                <div class="card card-default">
                                    <div class="card-header">
                                        <h4 class="card-title m-0">
                                            <a class="accordion-toggle text-color-dark font-weight-bold" data-bs-toggle="collapse" href="#{{ $faqId }}">
                                                {{ $faq->question }}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="{{ $faqId }}" class="collapse {{ $isFirst ? 'show' : '' }}" data-bs-parent="#FAQAccordion">
                                        <div class="card-body ps-4 {{ $isFirst ? 'w-md-75pct' : '' }}">
                                            <p class="mb-0">{{ $faq->answer }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            {{-- Fallback si no hay FAQs en la BD --}}
                            @php
                                $defaultFaqs = [
                                ['question' => __('¿Cómo puedo ver el catálogo completo de mobiliario?'), 'id' => 'collapseFAQOne', 'show' => true, 'answer' => __('Puedes explorar nuestro catálogo completo de mobiliario navegando por categorías en la sección Rental. Cada producto incluye descripción detallada, imágenes y especificaciones. También puedes contactarnos directamente para recibir asesoramiento personalizado.')],
                                ['question' => __('¿Qué incluye el servicio de alquiler?'), 'id' => 'collapseFAQTwo', 'show' => false, 'answer' => __('Ofrecemos una experiencia integral. No solo cuenta el mobiliario contratado, también sumamos una logística adaptada a cada cliente para ser sus aliados estratégicos y cumplir correctamente el timing del evento. Incluye entrega, armado y retiro.')],
                                ['question' => __('¿Cómo puedo solicitar información o cotización?'), 'id' => 'collapseFAQFour', 'show' => false, 'answer' => __('Puedes contactarnos a través del formulario de contacto, por WhatsApp al (+54) 3812 46-8393, o por email a Info@terashe.com.ar. Nuestro equipo está disponible para responder todas tus consultas y brindarte la información que necesitas.')],
                                ['question' => __('¿Qué tipos de mobiliario ofrecen?'), 'id' => 'collapseFAQFive', 'show' => false, 'answer' => __('Ofrecemos sillas (Cross, Tiffany, Tijera), mesas (Toscana), pistas de baile (Espejo, Plateada pulida, Pintada) en formatos rectangular, circular y octogonal, carpas, estructuras y accesorios para ambientación. Brindamos una amplia variedad para ofrecer soluciones a cada tipo de ambientación.')],
                                ['question' => __('¿Trabajan con wedding planners y organizadores de eventos?'), 'id' => 'collapseFAQTSix', 'show' => false, 'answer' => __('Sí, trabajamos con wedding planners, organizadores de eventos y productoras. Ofrecemos servicios adaptados a profesionales del sector, siendo sus aliados estratégicos para cumplir correctamente el timing de cada evento.')],
                            ];
                        @endphp
                            @foreach($defaultFaqs as $faq)
                            <div class="card card-default">
                                <div class="card-header">
                                    <h4 class="card-title m-0">
                                        <a class="accordion-toggle text-color-dark font-weight-bold" data-bs-toggle="collapse" href="#{{ $faq['id'] }}">
                                            {{ $faq['question'] }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="{{ $faq['id'] }}" class="collapse {{ $faq['show'] ? 'show' : '' }}" data-bs-parent="#FAQAccordion">
                                    <div class="card-body ps-4 {{ $faq['id'] === 'collapseFAQOne' ? 'w-md-75pct' : '' }}">
                                        <p class="mb-0">{{ $faq['answer'] ?? __('Encuentra respuestas a las preguntas más comunes sobre nuestros productos, servicios, procesos y políticas. Estamos comprometidos con brindarte toda la información que necesitas.') }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <hr class="my-0">
            {{-- Team Section --}}
            {{-- <div class="row py-5 my-5">
                <div class="col-lg-6 col-xl-7 mx-auto mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500">
                    <div class="owl-carousel owl-theme nav-style-1 nav-outside nav-font-size-lg custom-nav-grey mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 2}, '992': {'items': 1}, '1200': {'items': 2}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 20}">
                        @if(is_module_active('team') && ($teamMembers ?? collect())->count() > 0)
                            @foreach(($teamMembers ?? collect())->take(3) as $index => $member)
                                <div>
                                    <div class="card border-radius-0">
                                        <img class="card-img-top border-radius-0" src="{{ asset($member->photo ?? "cd-project/img/demos/architecture-2/authors/author-" . (($index % 2) + 1) . ".jpg") }}" alt="{{ $member->name }}" />
                                        <div class="card-body text-center">
                                            <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $member->name }}</h4>
                                            <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $member->position ?? __('ARCHITECT') }}</h3>
                                            <p class="card-text font-weight-light">{{ Str::limit($member->bio ?? __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor...'), 80) }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            @php
                                $defaultTeam = [
                                    ['name' => 'John Doe', 'position' => 'CEO & FOUNDER', 'img' => 1],
                                    ['name' => 'Janice Doe', 'position' => 'ARCHITECT', 'img' => 2],
                                    ['name' => 'John Doe', 'position' => 'CEO & FOUNDER', 'img' => 1],
                                ];
                            @endphp
                            @foreach($defaultTeam as $member)
                                <div>
                                    <div class="card border-radius-0">
                                        <img class="card-img-top border-radius-0" src="{{ asset("cd-project/img/demos/architecture-2/authors/author-{$member['img']}.jpg") }}" alt="" />
                                        <div class="card-body text-center">
                                            <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $member['name'] }}</h4>
                                            <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $member['position'] }}</h3>
                                            <p class="card-text font-weight-light">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor...') }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-lg-5 col-xl-4 text-end position-relative appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="250">
                    <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="500" style="top: 102px; right: -50px;">
                        <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-3 font-weight-black opacity-1 mb-0">{{ __('ARCHLIFE') }}</h2>
                    </div>
                    <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ __('NUESTRO EQUIPO') }}</h2>
                    <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-4">{{ __('Conoce a Nuestro Equipo') }}</h3>
                    <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4 mt-2" alt="" />
                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">{{ __('Nuestro equipo está formado por profesionales altamente capacitados y comprometidos con la excelencia.') }}</p>
                    <p class="text-3-5 pb-3 mb-4">{{ __('Trabajamos juntos para ofrecerte el mejor servicio y asegurar que encuentres exactamente lo que necesitas para hacer crecer tu negocio.') }}</p>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 custom-btn-style-1-right font-weight-bold text-3 px-5 py-3">{{ __('CONTACT US') }}</a>
                </div>
            </div> --}}
        </div>
        {{-- Testimonials Section --}}
        {{-- <section class="section parallax bg-transparent border-0 py-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'scrollableParallax': true, 'scrollableParallaxMinWidth': 991, 'startOffset': 13, 'cssProperty': 'width', 'cssValueStart': 40, 'cssValueEnd': 100, 'cssValueUnit': 'vw'}">
            <div class="d-flex justify-content-center">
                <div class="scrollable-parallax-wrapper bg-primary overflow-hidden">
                    <div class="container container-xl-custom custom-container-style-3 custom-container-position-1 py-5 my-5 mx-0">
                        <div class="row justify-content-center pt-3 mb-5">
                            <div class="col-sm-8 col-md-12 text-center">
                                <h2 class="text-color-light opacity-6 positive-ls-3 line-height-3 text-4 mb-3">{{ __('CLIENTES SATISFECHOS') }}</h2>
                                <h3 class="text-transform-none text-color-light font-weight-black line-height-2 text-10 negative-ls-1 mb-0">{{ __('Lo Que Dicen Nuestros Clientes') }}</h3>
                            </div>
                        </div>
                        <div class="row justify-content-center pb-3">
                            <div class="col-lg-9">
                                <div class="owl-carousel owl-theme nav-style-1 nav-light nav-outside nav-font-size-lg custom-dots-style-1 custom-dots-style-1-light mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 1, 'nav': false, 'dots': true}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': false, 'nav': true, 'dots': false}">
                                    @if(is_module_active('references') && ($featuredReferences ?? collect())->count() > 0)
                                        @foreach(($featuredReferences ?? collect())->take(2) as $reference)
                                            <div>
                                                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                    <blockquote>
                                                        <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ $reference->testimonial ?? $reference->description ?? __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.') }}</em></p>
                                                    </blockquote>
                                                    <div class="testimonial-author">
                                                        <p class="text-color-light font-weight-bold text-4 mb-0">{{ $reference->name ?? __('John Smith') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        @for($i = 0; $i < 2; $i++)
                                            <div>
                                                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                    <blockquote>
                                                        <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.') }}</em></p>
                                                    </blockquote>
                                                    <div class="testimonial-author">
                                                        <p class="text-color-light font-weight-bold text-4 mb-0">{{ __('John Smith') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
        {{-- Blog Section --}}
        @if(is_module_active('blog'))
        <section class="section bg-transparent border-0 position-relative m-0">
            <div class="container container-xl-custom py-5">
                <div class="row">
                    <div class="col text-center position-relative">

                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ __('NUESTRO BLOG') }}</h2>
                        <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-3">{{ __('Noticias Recientes') }}</h3>

                    </div>
                </div>
                <div class="row row-gutter-sm">
                    @forelse(($recentPosts ?? collect())->take(3) as $index => $post)
                        @php
                            // Obtener imagen del post
                            $postImage = null;
                            if (!empty($post->header)) {
                                // Si es una URL externa, usarla directamente
                                if (filter_var($post->header, FILTER_VALIDATE_URL)) {
                                    $postImage = $post->header;
                                } else {
                                    // Si es una ruta local, verificar si existe y usar asset
                                    $headerPath = $post->header;
                                    if (file_exists(public_path($headerPath))) {
                                        $postImage = asset($headerPath);
                                    } else {
                                        // Si no existe, usar imagen por defecto
                                        $postImage = asset("cd-project/img/demos/architecture-2/blog/blog-thumb-" . ($index + 1) . ".jpg");
                                    }
                                }
                            } else {
                                // Si no hay header, usar imagen por defecto
                                $postImage = asset("cd-project/img/demos/architecture-2/blog/blog-thumb-" . ($index + 1) . ".jpg");
                            }
                        @endphp
                        <div class="col-lg-4 mb-4 mb-lg-0 d-flex">
                            <article class="w-100">
                                <div class="card border-0 border-radius-0 h-100 d-flex flex-column">
                                    <div class="card-body bg-color-grey p-4 z-index-1 d-flex flex-column flex-grow-1">
                                        <a href="{{ route('blog.post', $post->slug) }}">
                                            <img class="card-img-top border-radius-0 hover-effect-2" src="{{ $postImage }}" alt="{{ $post->title }}">
                                        </a>
                                        <p class="text-uppercase text-1 mb-3 pt-1 text-color-default">
                                            <time pubdate datetime="{{ $post->created_at->format('Y-m-d') }}">{{ $post->created_at->format('d M Y') }}</time>
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            {{ $post->comments_count ?? 3 }} {{ __('Comments') }}
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            {{ $post->user->name ?? __('John Doe') }}
                                        </p>
                                        <div class="card-body p-0 d-flex flex-column flex-grow-1">
                                            <h4 class="card-title mb-3 text-5 font-weight-semibold"><a class="text-color-dark text-color-hover-primary text-decoration-none font-weight-bold text-3-5" href="{{ route('blog.post', $post->slug) }}">{{ $post->title }}</a></h4>
                                            <p class="card-text mb-2 flex-grow-1">{{ Str::limit($post->excerpt ?? $post->content, 80) }}</p>
                                            <a href="{{ route('blog.post', $post->slug) }}" class="custom-read-more d-inline-flex align-items-center font-weight-semibold text-3 text-decoration-none ps-0 mt-auto">
                                                {{ __('READ MORE') }} +
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    @empty
                        @for($i = 1; $i <= 3; $i++)
                            <div class="col-lg-4 mb-4 mb-lg-0 d-flex">
                                <article class="w-100">
                                    <div class="card border-0 border-radius-0 h-100 d-flex flex-column">
                                        <div class="card-body bg-color-grey p-4 z-index-1 d-flex flex-column flex-grow-1">
                                            <a href="{{ route('blog.index') }}">
                                                <img class="card-img-top border-radius-0 hover-effect-2" src="{{ asset("cd-project/img/demos/architecture-2/blog/blog-thumb-{$i}.jpg") }}" alt="Card Image">
                                            </a>
                                            <p class="text-uppercase text-1 mb-3 pt-1 text-color-default">
                                                <time pubdate datetime="2025-01-10">10 {{ __('Jan') }} 2025</time>
                                                <span class="opacity-3 d-inline-block px-2">|</span>
                                                3 {{ __('Comments') }}
                                                <span class="opacity-3 d-inline-block px-2">|</span>
                                                {{ __('John Doe') }}
                                            </p>
                                            <div class="card-body p-0 d-flex flex-column flex-grow-1">
                                                <h4 class="card-title mb-3 text-5 font-weight-semibold"><a class="text-color-dark text-color-hover-primary text-decoration-none font-weight-bold text-3-5" href="{{ route('blog.index') }}">{{ __('Lorem ipsum dolor sit a met') }}</a></h4>
                                                <p class="card-text mb-2 flex-grow-1">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lorem ipsum erat orci, ac auctor...') }}</p>
                                                <a href="{{ route('blog.index') }}" class="custom-read-more d-inline-flex align-items-center font-weight-semibold text-3 text-decoration-none ps-0 mt-auto">
                                                    {{ __('READ MORE') }} +
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        @endfor
                    @endforelse
                </div>
            </div>
        </section>
        @endif
    </div>

</div>

@endsection