@extends('layout.front.master')

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

@section('content')

<div role="main" class="main">

    {{-- Hero Carousel --}}
    <div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover show-dots-xs nav-style-1 nav-arrows-thin nav-inside nav-inside-plus nav-dark nav-lg nav-font-size-lg show-nav-hover mb-0" data-plugin-options="{'autoplay': true, 'autoplayTimeout': 5000}" style="height: 800px;">
        <div class="owl-stage-outer">
            <div class="owl-stage">

                @if(isset($carouselImages) && $carouselImages->count() > 0)
                    @foreach($carouselImages as $index => $carouselImage)
                        <!-- Carousel Slide {{ $index + 1 }} -->
                        <div class="owl-item position-relative overflow-hidden">
                            <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0"
                                 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>

                            @if($index == 0)
                                <!-- Slide 1: Soluciones Industriales -->
                                <div class="container-fluid h-100 px-lg-5 mx-lg-5 pb-5">
                                    <div class="row h-100 p-relative z-index-1 gx-5 pb-5">
                                        <div class="col">
                                            <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="100" data-plugin-options="{'minWindowWidth': 0}">
                                                <h3 class="text-color-light rotate-r-90 font-weight-bold ls-0 p-relative left-0 custom-font-size-1 pe-5 ws-nowrap">Soluciones</h3>
                                            </div>
                                            <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">
                                                <h3 class="custom-stroke-text-effect-1 color-transparent rotate-r-90 font-weight-bold ls-0 p-relative custom-text-pos-1 custom-font-size-1 pe-5 ws-nowrap">Industriales</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @elseif($index == 1)
                                <!-- Slide 2: Experiencia Comprobada -->
                                <div class="container-fluid h-100 px-lg-5 mx-lg-5 pb-5 text-end">
                                    <div class="row h-100 p-relative z-index-1 gx-5 pb-5">
                                        <div class="col">
                                            <h3 class="text-color-light rotate-r-90 font-weight-bold ls-0 p-absolute top-50pct right-0 custom-font-size-1 pe-5 ws-nowrap">Experiencia</h3>
                                            <h3 class="custom-stroke-text-effect-1 color-transparent rotate-r-90 font-weight-bold ls-0 p-absolute top-50pct custom-text-pos-2 custom-font-size-1 pe-5 ws-nowrap">Comprobada</h3>
                                        </div>
                                    </div>
                                </div>
                            @elseif($index == 2)
                                <!-- Slide 3: Calidad Garantizada -->
                                <div class="container-fluid h-100 px-lg-5 mx-lg-5 pb-5 text-end">
                                    <div class="row h-100 p-relative z-index-1 gx-5 pb-5">
                                        <div class="col">
                                            <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="100" data-plugin-options="{'minWindowWidth': 0}">
                                                <h3 class="text-color-light rotate-r-90 font-weight-bold ls-0 p-relative left-0 custom-font-size-1 pe-5 ws-nowrap">Calidad</h3>
                                            </div>
                                            <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">
                                                <h3 class="custom-stroke-text-effect-1 color-transparent rotate-r-90 font-weight-bold ls-0 p-relative custom-text-pos-1 custom-font-size-1 pe-5 ws-nowrap">Garantizada</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <!-- Slides adicionales: Usar el nombre de la imagen como texto -->
                                <div class="container-fluid h-100 px-lg-5 mx-lg-5 pb-5 {{ $index % 2 == 0 ? '' : 'text-end' }}">
                                    <div class="row h-100 p-relative z-index-1 gx-5 pb-5">
                                        <div class="col">
                                            <div class="p-absolute top-50pct appear-animation" data-appear-animation="{{ $index % 2 == 0 ? 'fadeInRightShorter' : 'fadeInLeftShorter' }}" data-appear-animation-delay="100" data-plugin-options="{'minWindowWidth': 0}">
                                                {{-- <h3 class="text-color-light rotate-r-90 font-weight-bold ls-0 p-relative {{ $index % 2 == 0 ? 'left-0' : 'right-0' }} custom-font-size-1 pe-5 ws-nowrap">{{ $carouselImage->name ?? 'Technoa' }}</h3> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                @else
                    <!-- Fallback: Mostrar slides por defecto si no hay imágenes en la BD -->
                    <!-- Carousel Slide 1 -->
                    <div class="owl-item position-relative overflow-hidden">
                        <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" 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/transportation-logistic/slides/slide-1.jpg')}}); background-size: cover; background-position: center;"></div>
                        <div class="container-fluid h-100 px-lg-5 mx-lg-5 pb-5">
                            <div class="row h-100 p-relative z-index-1 gx-5 pb-5">
                                <div class="col">
                                    <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="100" data-plugin-options="{'minWindowWidth': 0}">
                                        <h3 class="text-color-light rotate-r-90 font-weight-bold ls-0 p-relative left-0 custom-font-size-1 pe-5 ws-nowrap">Soluciones</h3>
                                    </div>
                                    <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">
                                        <h3 class="custom-stroke-text-effect-1 color-transparent rotate-r-90 font-weight-bold ls-0 p-relative custom-text-pos-1 custom-font-size-1 pe-5 ws-nowrap">Industriales</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Carousel Slide 2 -->
                    <div class="owl-item position-relative overflow-hidden">
                        <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" 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/transportation-logistic/slides/slide-2.jpg')}}); background-size: cover; background-position: center;"></div>
                        <div class="container-fluid h-100 px-lg-5 mx-lg-5 pb-5 text-end">
                            <div class="row h-100 p-relative z-index-1 gx-5 pb-5">
                                <div class="col">
                                    <h3 class="text-color-light rotate-r-90 font-weight-bold ls-0 p-absolute top-50pct right-0 custom-font-size-1 pe-5 ws-nowrap">Experiencia</h3>
                                    <h3 class="custom-stroke-text-effect-1 color-transparent rotate-r-90 font-weight-bold ls-0 p-absolute top-50pct custom-text-pos-2 custom-font-size-1 pe-5 ws-nowrap">Comprobada</h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Carousel Slide 3 -->
                    <div class="owl-item position-relative overflow-hidden">
                        <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" 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/transportation-logistic/slides/slide-3.jpg')}}); background-size: cover; background-position: center;"></div>
                        <div class="container-fluid h-100 px-lg-5 mx-lg-5 pb-5 text-end">
                            <div class="row h-100 p-relative z-index-1 gx-5 pb-5">
                                <div class="col">
                                    <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="100" data-plugin-options="{'minWindowWidth': 0}">
                                        <h3 class="text-color-light rotate-r-90 font-weight-bold ls-0 p-relative left-0 custom-font-size-1 pe-5 ws-nowrap">Calidad</h3>
                                    </div>
                                    <div class="p-absolute top-50pct appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">
                                        <h3 class="custom-stroke-text-effect-1 color-transparent rotate-r-90 font-weight-bold ls-0 p-relative custom-text-pos-1 custom-font-size-1 pe-5 ws-nowrap">Garantizada</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

            </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>

    {{-- Services Carousel --}}
    <div class="container-fluid p-0 mx-0 custom-carousel-1-wrapper">
        <div class="row gx-0">
            <div class="col-lg-4">
                <div class="custom-carouse-1-title bg-tertiary p-2 mt-5">
                    <h4 class="text-color-light text-6 font-weight-semi-bold d-block text-center text-lg-end p-3 m-0"><span class="d-block me-lg-5 pe-lg-4 p-relative bottom-2"><span class="d-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="0">Nuestros Servicios</span></span></h4>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="carousel-half-full-width-wrapper carousel-half-full-width-right custom-carousel-1">
                    <div class="owl-carousel owl-theme carousel-half-full-width-right nav-bottom nav-bottom-align-left nav-style-1 nav-light nav-arrows-thin nav-font-size-lg mb-0" data-plugin-options="{'responsive': {'0': {'items': 1,  'autoplay': true, 'autoplayTimeout': 3000}, '768': {'items': 1,  'autoplay': true, 'autoplayTimeout': 3000}, '992': {'items': 2}, '1200': {'items': 3}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 0}">
                        @php
                            try {
                                // Cargar servicios dinámicamente desde BD
                                $featuredServices = \App\Modules\Services\Models\Service::where('is_active', true)
                                    ->where('is_featured', true)
                                    ->orderBy('sort_order', 'asc')
                                    ->orderBy('title', 'asc')
                                    ->get();
                            } catch (\Exception $e) {
                                $featuredServices = collect(); // Colección vacía si hay error
                            }
                        @endphp

                        @forelse($featuredServices as $service)
                        <div class="anim-hover-translate-top-10px transition-3ms">
                            <div class="card">
                                <div class="card-body p-5">
                                    <div class="d-flex flex-row">
                                        <div class="ps-4">
                                            <h4 class="mb-2 text-5 font-weight-semi-bold">{{ $service->title }}</h4>
                                            <p class="mb-2 font-weight-medium text-3">{{ $service->description }}</p>
                                            <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-uppercase text-2-5 stretched-link text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-2ms d-inline-block">Ver Más</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        {{-- Fallback si no hay servicios --}}
                        <div class="anim-hover-translate-top-10px transition-3ms">
                            <div class="card">
                                <div class="card-body p-5">
                                    <div class="d-flex flex-row">
                                        <div class="ps-4">
                                            <h4 class="mb-2 text-5 font-weight-semi-bold">Servicios Industriales</h4>
                                            <p class="mb-2 font-weight-medium text-3">Soluciones integrales para la industria.</p>
                                            <a href="{{ route('frontend.services.index') }}" class="text-uppercase text-2-5 stretched-link text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-2ms d-inline-block">Ver Más</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Intro Section --}}
    <section class="border-0 section-intro">
        <div class="container py-5 mt-5">
            <div class="row mt-4">
                <div class="col-lg-5">
                    <p class="custom-drop-caps font-weight-medium text-4"><span class="custom-drop-caps-number text-color-dark negative-ls-1"><span class="d-inline-block appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">25+</span></span> años de experiencia en el sector industrial argentino respaldando a empresas de ingenios, agroindustria, oil & gas y alimentos & bebidas.</p>
                    <p class="m-0"><a href="{{ route('front.about') }}" class="text-uppercase text-3-5 text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-3ms d-inline-block">Conocer Nuestra Historia</a></p>
                </div>
                <div class="d-none d-lg-block col-lg-1 text-center">
                    <div class="vr bg-primary opacity-10 custom-vr-1"></div>
                </div>
                <div class="pb-5 pb-lg-0 my-5 my-lg-0 col-lg-6">
                    <p class="font-weight-medium text-8 line-height-4 text-color-tertiary negative-ls-1 p-relative bottom-10"><span class="d-lg-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="0">Estamos <strong>comprometidos</strong> en brindar a nuestros</span> <span class="d-lg-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">clientes las mejores soluciones en bombas,</span><span class="d-lg-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400"> instrumentación y automatización industrial.</span></p>
                </div>
            </div>
        </div>
    </section>

    {{-- Services Grid --}}
    <section class="border-0 custom-bg-color-grey-1">
        <div class="container py-5">
            <div class="row pb-3">
                <div class="col pb-5 mb-3">

                    <div class="owl-carousel owl-theme nav-dark nav-style-1 nav-arrows-thin nav-font-size-lg nav-outside mb-0 custom-el-pos-1" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 2}, '1199': {'items': 3}}, 'loop': false, 'nav': true, 'dots': false, 'margin': 20}">
                        <div>
                            <span class="thumb-info thumb-info-swap-content anim-hover-inner-wrapper">
                                <span class="thumb-info-wrapper overlay overlay-show overlay-gradient-bottom-content">
                                    <img src="{{ asset('cd-project/img/demos/transportation-logistic/homepage/service-1.jpg') }}" class="img-fluid" alt="">
                                    <span class="thumb-info-title bottom-30 bg-transparent w-100 mw-100 p-0 text-center">
                                        <span class="thumb-info-swap-content-wrapper">
                                            <span class="thumb-info-inner text-3-5 pb-2">
                                                Sistemas de Bombeo
                                            </span>
                                            <span class="thumb-info-inner text-2">
                                                <p class="px-5 text-2 opacity-7 font-weight-medium text-light ls-0">Soluciones técnicas avanzadas respaldadas por más de 25 años de experiencia industrial.</p>
                                                <a href="{{ route('frontend.services.index') }}" class="btn border-0 px-3 py-1 line-height-8 btn-primary ls-0">Ver Detalles</a>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </span>
                        </div>
                        <div>
                            <span class="thumb-info thumb-info-swap-content anim-hover-inner-wrapper">
                                <span class="thumb-info-wrapper overlay overlay-show overlay-gradient-bottom-content">
                                    <img src="{{ asset('cd-project/img/demos/transportation-logistic/homepage/service-2.jpg') }}" class="img-fluid" alt="">
                                    <span class="thumb-info-title bottom-30 bg-transparent w-100 mw-100 p-0 text-center">
                                        <span class="thumb-info-swap-content-wrapper">
                                            <span class="thumb-info-inner text-3-5 pb-2">
                                                Instrumentación Yokogawa
                                            </span>
                                            <span class="thumb-info-inner text-2">
                                                <p class="px-5 text-2 opacity-7 font-weight-medium text-light ls-0">Soluciones técnicas avanzadas respaldadas por más de 25 años de experiencia industrial.</p>
                                                <a href="{{ route('frontend.services.index') }}" class="btn border-0 px-3 py-1 line-height-8 btn-primary ls-0">Ver Detalles</a>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </span>
                        </div>
                        <div>
                            <span class="thumb-info thumb-info-swap-content anim-hover-inner-wrapper">
                                <span class="thumb-info-wrapper overlay overlay-show overlay-gradient-bottom-content">
                                    <img src="{{ asset('cd-project/img/demos/transportation-logistic/homepage/service-3.jpg') }}" class="img-fluid" alt="">
                                    <span class="thumb-info-title bottom-30 bg-transparent w-100 mw-100 p-0 text-center">
                                        <span class="thumb-info-swap-content-wrapper">
                                            <span class="thumb-info-inner text-3-5 pb-2">
                                                Repuestos y Mantenimiento
                                            </span>
                                            <span class="thumb-info-inner text-2">
                                                <p class="px-5 text-2 opacity-7 font-weight-medium text-light ls-0">Soluciones técnicas avanzadas respaldadas por más de 25 años de experiencia industrial.</p>
                                                <a href="{{ route('frontend.services.index') }}" class="btn border-0 px-3 py-1 line-height-8 btn-primary ls-0">Ver Detalles</a>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </span>
                        </div>
                        <div>
                            <span class="thumb-info thumb-info-swap-content anim-hover-inner-wrapper">
                                <span class="thumb-info-wrapper overlay overlay-show overlay-gradient-bottom-content">
                                    <img src="{{ asset('cd-project/img/demos/transportation-logistic/homepage/service-2.jpg') }}" class="img-fluid" alt="">
                                    <span class="thumb-info-title bottom-30 bg-transparent w-100 mw-100 p-0 text-center">
                                        <span class="thumb-info-swap-content-wrapper">
                                            <span class="thumb-info-inner text-3-5 pb-2">
                                                Instrumentación Yokogawa
                                            </span>
                                            <span class="thumb-info-inner text-2">
                                                <p class="px-5 text-2 opacity-7 font-weight-medium text-light ls-0">Soluciones técnicas avanzadas respaldadas por más de 25 años de experiencia industrial.</p>
                                                <a href="{{ route('frontend.services.index') }}" class="btn border-0 px-3 py-1 line-height-8 btn-primary ls-0">Ver Detalles</a>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </span>
                        </div>
                    </div>

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

    {{-- Testimonials --}}
    <section class="border-0 text-center custom-el-pos-2">
        <div class="container py-5">
            <div class="row">
                <div class="col">
                    <h2 class="custom-heading-1"><span class="d-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="0">Referencias</span></h2>
                </div>
            </div>
            <div class="row pt-4">
                <div class="col">
                    <div class="pb-3">
                        <img width="68" src="{{ asset('cd-project/img/demos/transportation-logistic/icons/quote.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-tertiary'}" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">

                    <div class="owl-carousel owl-theme nav-dark nav-style-1 nav-arrows-thin nav-font-size-lg nav-outside mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1}}, 'loop': false, 'nav': true, 'dots': false, 'margin': 20}">
                        <div>
                            <div class="testimonial testimonial-style-5 px-lg-5 mx-lg-5">
                                <blockquote>
                                    <p class="mb-0 line-height-8 font-weight-medium text-4">"Technoa nos ha brindado soluciones integrales de bombeo para nuestro ingenio. Su experiencia y soporte técnico son excepcionales. Los equipos funcionan de manera impecable desde la instalación."</p>
                                </blockquote>
                                <div class="testimonial-author border-0">
                                    <p><strong class="font-weight-extra-bold pt-2">Carlos Mendoza</strong><span>Gerente de Operaciones - Ingenio San Martín</span></p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="testimonial testimonial-style-5 px-lg-5 mx-lg-5">
                                <blockquote>
                                    <p class="mb-0 line-height-8 font-weight-medium text-4">"La instrumentación Yokogawa que nos proporcionó Technoa transformó completamente nuestros procesos. La precisión y confiabilidad han aumentado significativamente nuestra eficiencia operativa."</p>
                                </blockquote>
                                <div class="testimonial-author border-0">
                                    <p><strong class="font-weight-extra-bold pt-2">María González</strong><span>Ingeniera de Procesos - Planta Oleaginosa Norte</span></p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="testimonial testimonial-style-5 px-lg-5 mx-lg-5">
                                <blockquote>
                                    <p class="mb-0 line-height-8 font-weight-medium text-4">"El equipo de Technoa nos acompañó en todo el proceso de automatización de nuestra planta. Su profesionalismo y conocimiento técnico superaron nuestras expectativas."</p>
                                </blockquote>
                                <div class="testimonial-author border-0">
                                    <p><strong class="font-weight-extra-bold pt-2">Roberto Fernández</strong><span>Director Técnico - Alimentos del Sur S.A.</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

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

    {{-- CTA Section --}}
    <div class="bg-gradient m-0">
        <div class="container py-2">
            <div class="row align-items-center text-center text-lg-start py-5">
                <div class="col-lg-9 mb-3 mb-lg-0">
                    <p class="text-color-light text-4-5 font-weight-medium line-height-4 mb-0">
                        <span class="d-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="0">
                            <strong>Solicite Cotización Online</strong> - ¿Necesita Confirmación Inmediata? Llámenos al <u>{{ config('site.contact.phone', '+54 11 4567-8900') }}</u>
                        </span>
                    </p>
                </div>
                <div class="col-lg-3 pt-3 pt-lg-0 text-center text-lg-end">
                    <span class="d-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
                        <a href="{{ route('front.contact') }}" class="btn btn-light text-color-tertiary border-0 text-3-5 font-weight-semi-bold btn-px-5 btn-py-3">Solicitar Cotización</a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Process Section --}}
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 order-2 order-lg-1 p-0 bg-position-center bg-no-repeat" style="background: url({{ asset('cd-project/img/demos/transportation-logistic/generic/generic-3.png') }});">
                <div class="h-100 m-0">
                    <div class="row m-0 py-3">
                        <div class="col-half-section col-half-section-right py-5 ms-auto">
                            <div class="px-3 py-5">

                                <p class="font-weight-medium text-8 line-height-4 text-color-tertiary negative-ls-1"><span class="d-lg-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="0">Nuestro <strong>proceso</strong> es una de las cosas</span><span class="d-lg-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200"> que nos hace muy competitivos</span><span class="d-lg-inline-block appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400"> en el mercado industrial.</span></p>

                                <div class="process process-vertical py-4">
                                    <div class="process-step appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                                        <div class="process-step-circle bg-tertiary border-0">
                                            <strong class="process-step-circle-content text-light">1</strong>
                                        </div>
                                        <div class="process-step-content">
                                            <h4 class="mb-0 mt-1 text-4-5 font-weight-bold">Consultoría</h4>
                                            <p class="mb-0 font-weight-medium text-3-5">Análisis detallado de sus necesidades industriales y recomendaciones técnicas especializadas.</p>
                                        </div>
                                    </div>
                                    <div class="process-step appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                                        <div class="process-step-circle bg-tertiary border-0">
                                            <strong class="process-step-circle-content text-light">2</strong>
                                        </div>
                                        <div class="process-step-content">
                                            <h4 class="mb-0 mt-1 text-4-5 font-weight-bold">Implementación</h4>
                                            <p class="mb-0 font-weight-medium text-3-5">Instalación y puesta en marcha de equipos con soporte técnico completo.</p>
                                        </div>
                                    </div>
                                    <div class="process-step appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                                        <div class="process-step-circle bg-tertiary border-0">
                                            <strong class="process-step-circle-content text-light">3</strong>
                                        </div>
                                        <div class="process-step-content">
                                            <h4 class="mb-0 mt-1 text-4-5 font-weight-bold">Soporte</h4>
                                            <p class="mb-0 font-weight-medium text-3-5">Mantenimiento preventivo, repuestos originales y asistencia técnica continua.</p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 p-0 p-relative z-index-2">
                <section class="parallax custom-parallax-1 section section-parallax h-100 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'horizontalPosition': '100%'}" data-image-src="{{ asset('cd-project/img/demos/transportation-logistic/generic/1.jpg') }}" style="min-height: 500px;">
                </section>
            </div>
        </div>
    </div>

    {{-- Latest News & FAQs --}}
    <section class="border-0 custom-bg-color-grey-1 pt-5 custom-el-pos-3 p-relative z-index-1">
        <div class="container py-5">
            <div class="row justify-content-between pt-5">
                <div class="col-lg-5">
                    <h3 class="font-weight-semibold text-9 text-capitalize mb-2">{{ __('Últimas Novedades') }}</h3>
                    <div class="divider divider-small mt-0 mb-4">
                        <hr class="bg-primary">
                    </div>
                    @php
                        try {
                            // Cargar el último post del blog dinámicamente
                            $latestPost = \App\Modules\Blog\Models\Post::with('category')
                                ->where('status', 'Published')
                                ->latest()
                                ->first();
                        } catch (\Exception $e) {
                            $latestPost = null;
                        }
                    @endphp

                    @if($latestPost)
                    <div class="card border-0 bg-transparent">
                        <div class="card-img-top position-relative overlay">
                            <a href="{{ route('blog.post', $latestPost->slug) }}" class="stretched-link">
                                <span class="position-absolute bottom-10 left-0 d-flex justify-content-start w-100 py-3 px-4 z-index-3">
                                    <span class="text-center bg-primary text-color-light font-weight-semibold line-height-2 px-3 py-2">
                                        <span class="position-relative text-6 z-index-2">
                                            {{ $latestPost->created_at->format('d') }}
                                            <span class="d-block text-0 positive-ls-2 px-1">{{ strtoupper($latestPost->created_at->format('M')) }}</span>
                                        </span>
                                    </span>
                                </span>
                                @if($latestPost->header)
                                <img src="{{ asset($latestPost->header) }}" class="img-fluid" alt="{{ $latestPost->title }}" />
                                @else
                                <img src="{{ asset('cd-project/img/demos/transportation-logistic/blog/post-thumb-1.jpg') }}" class="img-fluid" alt="{{ $latestPost->title }}" />
                                @endif
                            </a>
                        </div>
                        <div class="card-body py-4 px-0">
                            <span class="d-block text-color-grey font-weight-semibold positive-ls-2 text-2">@if($latestPost->category) {{ strtoupper($latestPost->category->name) }} @endif</span>
                            <h4 class="font-weight-bold text-5 text-color-hover-primary mb-2">{{ $latestPost->title }}</h4>
                            <p class="text-3-5 mb-3">{{ \Illuminate\Support\Str::limit($latestPost->description, 120, '...') }}</p>
                            <p class="m-0"><a href="{{ route('blog.post', $latestPost->slug) }}" class="text-uppercase text-3 text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-3ms d-inline-block stretched-link">{{ __('Leer Más') }}</a></p>
                        </div>
                    </div>
                    @else
                    {{-- Fallback si no hay posts --}}
                    <div class="card border-0 bg-transparent">
                        <div class="card-img-top position-relative overlay">
                            <a href="{{ route('blog.index') }}" class="stretched-link">
                                <span class="position-absolute bottom-10 left-0 d-flex justify-content-start w-100 py-3 px-4 z-index-3">
                                    <span class="text-center bg-primary text-color-light font-weight-semibold line-height-2 px-3 py-2">
                                        <span class="position-relative text-6 z-index-2">
                                            {{ now()->format('d') }}
                                            <span class="d-block text-0 positive-ls-2 px-1">{{ strtoupper(now()->format('M')) }}</span>
                                        </span>
                                    </span>
                                </span>
                                <img src="{{ asset('cd-project/img/demos/transportation-logistic/blog/post-thumb-1.jpg') }}" class="img-fluid" alt="{{ __('Novedades') }}" />
                            </a>
                        </div>
                        <div class="card-body py-4 px-0">
                            <span class="d-block text-color-grey font-weight-semibold positive-ls-2 text-2">{{ __('POR EQUIPO') }}</span>
                            <h4 class="font-weight-bold text-5 text-color-hover-primary mb-2">{{ __('Últimas Novedades Industriales') }}</h4>
                            <p class="text-3-5 mb-3">{{ __('Mantente al día con las últimas novedades en tecnología industrial y soluciones de automatización.') }}</p>
                            <p class="m-0"><a href="{{ route('blog.index') }}" class="text-uppercase text-3 text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-3ms d-inline-block stretched-link">{{ __('Ver Blog') }}</a></p>
                        </div>
                    </div>
                    @endif
                </div>
                <div class="col-lg-6 pt-5 pt-lg-0">
                    <h3 class="font-weight-semibold text-9 text-capitalize mb-2">Preguntas Frecuentes</h3>
                    <div class="divider divider-small mt-0 mb-4">
                        <hr class="bg-primary">
                    </div>

                    @php
                        try {
                            // Cargar FAQs destacadas dinámicamente
                            $featuredFaqs = \App\Modules\CdBase\Faqs\Models\Faq::where('is_featured', true)
                                ->orderBy('order', 'asc')
                                ->orderBy('created_at', 'asc')
                                ->limit(4)
                                ->get();
                        } catch (\Exception $e) {
                            $featuredFaqs = collect(); // Colección vacía si hay error
                        }
                    @endphp

                    <div class="accordion accordion-modern-status accordion-modern-status-primary" id="accordion100">
                        @forelse($featuredFaqs as $index => $faq)
                        <div class="card card-default">
                            <div class="card-header" id="collapse100Heading{{ $loop->iteration }}">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100{{ $loop->iteration }}" aria-expanded="false" aria-controls="collapse100{{ $loop->iteration }}">
                                        {{ $loop->iteration }} - {{ $faq->question }}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100{{ $loop->iteration }}" class="collapse" aria-labelledby="collapse100Heading{{ $loop->iteration }}" data-bs-parent="#accordion100">
                                <div class="card-body">
                                    <p class="mb-0">{{ $faq->answer }}</p>
                                </div>
                            </div>
                        </div>
                        @empty
                        {{-- Fallback si no hay FAQs --}}
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingOne">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100One" aria-expanded="false" aria-controls="collapse100One">
                                        1 - ¿Qué sectores industriales atiende?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100One" class="collapse" aria-labelledby="collapse100HeadingOne" data-bs-parent="#accordion100">
                                <div class="card-body">
                                    <p class="mb-0">Atendemos principalmente los sectores de ingenios azucareros, agroindustria, oil & gas, tratamiento de aguas, alimentos & bebidas y plantas de procesamiento industrial en general.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingTwo">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100Two" aria-expanded="false" aria-controls="collapse100Two">
                                        2 - ¿Qué marcas representan?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100Two" class="collapse" aria-labelledby="collapse100HeadingTwo" data-bs-parent="#accordion100">
                                <div class="card-body">
                                    <p class="mb-0">Somos representantes oficiales de Yokogawa para instrumentación y control, además de trabajar con las mejores marcas internacionales en bombas industriales y sistemas de automatización.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingThree">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100Three" aria-expanded="false" aria-controls="collapse100Three">
                                        3 - ¿Ofrecen servicio técnico post-venta?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100Three" class="collapse" aria-labelledby="collapse100HeadingThree" data-bs-parent="#accordion100">
                                <div class="card-body">
                                    <p class="mb-0">Sí, contamos con un equipo técnico especializado que brinda soporte completo: mantenimiento preventivo, reparaciones, repuestos originales y capacitación técnica.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingFour">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100Four" aria-expanded="false" aria-controls="collapse100Four">
                                        4 - ¿Realizan proyectos llave en mano?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100Four" class="collapse" aria-labelledby="collapse100HeadingFour" data-bs-parent="#accordion100">
                                <div class="card-body">
                                    <p class="mb-0">Absolutamente. Desarrollamos proyectos integrales desde la ingeniería conceptual hasta la puesta en marcha, incluyendo suministro, instalación y comisionado de equipos.</p>
                                </div>
                            </div>
                        </div>
                        @endforelse
                    </div>

                    <p class="m-0 mt-5"><a href="{{ route('faqs.index') }}" class="text-uppercase text-3 text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-3ms d-inline-block">Ver Todas las FAQs</a></p>
                </div>
            </div>
        </div>
    </section>

    {{-- Client Logos --}}
    {{-- <section class="section border-0 bg-light m-0 p-0">
        <div class="container py-5 mt-4">
            <div class="row mb-0">
                <h3 class="font-weight-semibold text-9 text-capitalize mb-2">Nuestros Clientes</h3>
                <div class="divider divider-small mt-0 mb-4">
                    <hr class="bg-primary">
                </div>

            </div>
        </div>
        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="350">
            <div class="marquee custom-marquee-1 d-flex" data-duration="40000" data-gap="10" data-duplicated="false" data-startVisible="true">
                <span class="d-flex align-items-center" data-clone-element="2">
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-1.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-2.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-3.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-4.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-5.png') }}" alt="" class="img-fluid" style="max-width: 70px;">
                    </div>
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-6.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>

                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-8.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-9.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>
                    <div class="px-5 py-1">
                        <img src="{{ asset('cd-project/img/company-logos/logo-10.png') }}" alt="" class="img-fluid" style="max-width: 120px;">
                    </div>
                </span>
            </div>
        </div>
    </section> --}}

    <hr>

    {{-- Locations & Map --}}
    <section class="border-0 p-relative">

        <div class="p-absolute custom-text-pos-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">
            <h2 class="custom-heading-1 rotate-r-90 d-none d-lg-inline-block">Dónde Estamos</h2>
        </div>

        <div class="container">
            <div class="row pt-5 pb-4">
                <div class="col-md-8">
                    <h3 class="font-weight-semibold text-9 text-capitalize mb-2">Nuestra Ubicación</h3>
                    <div class="divider divider-small mt-0 mb-4">
                        <hr class="bg-primary">
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                    <a href="{{ route('front.contact') }}" class="btn btn-tertiary border-0 text-3-5 font-weight-semi-bold btn-px-5 btn-py-3 d-none d-md-inline-block">Solicitar Cotización</a>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <!-- Google Maps Embed -->
                    <div class="google-map-embed m-0" style="min-height: 600px;">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14427.264089848389!2d-65.2108451!3d-24.7859486!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x941bc39fd3c59937%3A0x747ee5a40305a404!2sControl%20Industrial%20Noa%20SRL!5e0!3m2!1ses!2sar!4v1703123456789!5m2!1ses!2sar"
                            width="100%"
                            height="600"
                            style="border:0;"
                            allowfullscreen=""
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"
                            title="Ubicación">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>

        <div class="container pt-5 mt-3 pb-3">
            <div class="row">
                <div class="col">
                    <div class="owl-carousel owl-theme nav-dark nav-style-1 nav-arrows-thin nav-font-size-lg nav-outside mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 2}, '1199': {'items': 4}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 40}">
                        <div>
                            <p class="font-weight-semibold text-color-tertiary text-4 line-height-6 mb-2">{{ config('site.contact.address', 'Av. Corrientes 1234, CABA, Buenos Aires, Argentina') }}</p>
                            <p class="font-weight-medium text-3 line-height-5 mb-2"><a href="mailto:{{ config('site.contact.email', 'info@example.com') }}">{{ config('site.contact.email', 'info@example.com') }}</a></p>
                            <p class="font-weight-medium text-3 line-height-5 mb-0">{{ config('site.contact.phone', '+54 11 4567-8900') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Reinicializar carousel de servicios si es necesario
    setTimeout(function() {
        var $carousel = $('.carousel-half-full-width-right');
        if ($carousel.length && $carousel.hasClass('owl-carousel')) {
            // Verificar si el carousel tiene items
            if ($carousel.find('.anim-hover-translate-top-10px').length > 0) {
                // Reinicializar si es necesario
                if (!$carousel.hasClass('owl-loaded')) {
                    $carousel.trigger('refresh.owl.carousel');
                }
            }
        }
    }, 1000);
});
</script>

@endsection