@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')

{{-- Full Screen Hero Section - Dynamic from WelcomeCarousel --}}
@if(isset($carouselImages) && $carouselImages->count() > 0)
    @if($carouselImages->count() === 1)
        {{-- Single Slide Full Screen --}}
        @php $slide = $carouselImages->first(); @endphp
        <section class="section border-0 overlay overlay-show overlay-op-8 m-0 custom-hero-section-mobile" style="height: 100vh; min-height: 600px; background-image: url({{ $slide->image_path }}); background-size: cover; background-position: center; background-attachment: fixed; position: relative;">
            <div class="container position-relative z-index-3 h-100">
                <div class="row align-items-center h-100">
                    <div class="col">
                        <div class="d-flex flex-column align-items-center justify-content-center h-100 text-center custom-hero-content-mobile">
                            <p class="text-4 text-color-light font-weight-light mb-4 custom-hero-subtitle appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">{{ __('Sistema autoadministrable con CMS integrado') }}<br>{{ __('Gestiona proyectos, galería, blog y más desde un panel intuitivo') }}</p>
                            <div class="mt-4 custom-hero-buttons appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2500">
                                <a href="{{ route('frontend.projects.index') }}" class="btn btn-light btn-modern btn-lg px-5 py-3 font-weight-semibold text-uppercase me-2 me-md-2 me-sm-0 custom-hero-btn">
                                    {{ __('Nuestros Proyectos') }}
                                </a>
                                <a href="{{ route('frontend.services.index') }}" class="btn btn-outline-light btn-modern btn-lg px-5 py-3 font-weight-semibold text-uppercase custom-hero-btn">
                                    {{ __('Nuestros Servicios') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#main" class="slider-scroll-button position-absolute bottom-10 left-50pct transform3dx-n50 custom-hero-scroll-btn" data-hash data-hash-offset="0" data-hash-offset-lg="80" aria-label="Scroll to content">
                    {{ __('Scroll') }}
                </a>
            </div>
        </section>
    @else
        {{-- Multiple Slides Carousel Full Screen --}}
        <div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-style-diamond nav-with-transparency nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0 custom-hero-section-mobile" data-plugin-options="{'autoplay': true, 'autoplayTimeout': 7000, 'loop': true}" data-dynamic-height="['100vh','100vh','90vh','85vh','75vh']" style="height: 100vh; margin-top: 0; padding-top: 0;">
            <div class="owl-stage-outer">
                <div class="owl-stage">
                    @foreach($carouselImages as $index => $slide)
                        <div class="owl-item position-relative">
                            <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({{ $slide->image_path }}); background-size: cover; background-position: center;"></div>
                            <div class="container position-relative z-index-3 h-100">
                                <div class="row align-items-center h-100">
                                    <div class="col">
                                        <div class="d-flex flex-column align-items-center justify-content-center h-100 text-center custom-hero-content-mobile">
                                            <p class="text-4 text-color-light font-weight-light mb-4 custom-hero-subtitle appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">{{ __('Sistema autoadministrable con CMS integrado') }}<br>{{ __('Gestiona proyectos, galería, blog y más desde un panel intuitivo') }}</p>
                                            <div class="mt-4 custom-hero-buttons appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2500">
                                                <a href="{{ route('frontend.projects.index') }}" class="btn btn-light btn-lg px-5 py-3 font-weight-bold text-uppercase me-2 me-md-2 me-sm-0 custom-hero-btn">
                                                    {{ __('Nuestros Proyectos') }}
                                                </a>
                                                <a href="{{ route('frontend.services.index') }}" class="btn btn-outline-light btn-lg px-5 py-3 font-weight-bold text-uppercase custom-hero-btn">
                                                    {{ __('Nuestros Servicios') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="owl-nav mt-5">
                <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>
        <a href="#main" class="slider-scroll-button position-absolute bottom-10 left-50pct transform3dx-n50 custom-hero-scroll-btn" style="position: fixed; z-index: 1000;" data-hash data-hash-offset="0" data-hash-offset-lg="80" aria-label="Scroll to content">
            {{ __('Scroll') }}
        </a>
    @endif
@else
    {{-- Fallback: Default Slide if no carousel images --}}
    <section class="section border-0 overlay overlay-show overlay-op-8 m-0 custom-hero-section-mobile" style="height: 100vh; min-height: 600px; background-image: url({{ asset('cd-project/img/demos/construction/slides/slide-1.jpg') }}); background-size: cover; background-position: center; background-attachment: fixed;">
        <div class="container container-xl-custom position-relative z-index-3 h-100">
            <div class="row align-items-center h-100">
                <div class="col">
                    <div class="d-flex flex-column align-items-center justify-content-center h-100 text-center custom-hero-content-mobile">
                                            <p class="text-4 text-color-light font-weight-light mb-4 custom-hero-subtitle appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">{{ __('Sistema autoadministrable con CMS integrado') }}<br>{{ __('Gestiona proyectos, galería, blog y más desde un panel intuitivo') }}</p>
                        <div class="mt-4 custom-hero-buttons appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2500">
                            <a href="{{ route('frontend.projects.index') }}" class="btn btn-light btn-modern btn-lg px-5 py-3 font-weight-semibold text-uppercase me-2 me-md-2 me-sm-0 custom-hero-btn">
                                {{ __('Nuestros Proyectos') }}
                            </a>
                            <a href="{{ route('frontend.services.index') }}" class="btn btn-outline-light btn-modern btn-lg px-5 py-3 font-weight-semibold text-uppercase custom-hero-btn">
                                {{ __('Nuestros Servicios') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#main" class="slider-scroll-button position-absolute bottom-10 left-50pct transform3dx-n50 custom-hero-scroll-btn" data-hash data-hash-offset="0" data-hash-offset-lg="80" aria-label="Scroll to content">
                {{ __('Scroll') }}
            </a>
        </div>
    </section>
@endif

<div id="main">

    <div class="container container-xl-custom py-5 my-3">
        <div class="row justify-content-between align-items-center flex-lg-nowrap gy-3">
            <div class="col-lg-4">
                <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2000">Sistema Autoadministrable</h2>
                <p class="text-4 font-weight-light mb-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2200">Sistema completo con CMS integrado para empresas de construcción. Gestiona todo el contenido desde un panel de administración intuitivo y fácil de usar. </p>
            </div>
            <div class="col-auto d-none d-lg-block">
                <svg width="145" height="147" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 145.42 147.12" xml:space="preserve" stroke-miter-limit="10" stroke-dasharray="7" data-appear-animation-svg="true">
                    <line stroke="#a2a2a2" stroke-dasharray="8" x1="14.75" y1="132.9" x2="133.81" y2="12.05" class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="2400" data-appear-animation-duration="100ms" />
                    <line stroke="#FFF" stroke-dasharray="8" stroke-width="2" x1="14.75" y1="132.9" x2="133.81" y2="12.05" class="appear-animation" data-appear-animation="customLineDividerAnim" data-appear-animation-delay="2400" data-appear-animation-duration="2.2s" />
                </svg>
            </div>
            <div class="col-lg-6">
                <p class="font-weight-medium text-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3200">Construction es un <span class="highlight highlight-primary highlight-bg-opacity highlight-animated" data-appear-animation="highlight-animated-start" data-appear-animation-delay="4000" data-plugin-options="{'flagClassOnly': true}">sistema autoadministrable</span> con CMS integrado diseñado específicamente para empresas de construcción y arquitectura. Permite gestionar proyectos, galería, blog y más desde un panel de administración intuitivo.</p>
                <p class="font-weight-medium text-3-5 mt-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3600">Con este sistema puedes <strong>gestionar todo el contenido de tu sitio web sin necesidad de conocimientos técnicos avanzados</strong>. El panel de administración es fácil de usar y te permite actualizar proyectos, agregar imágenes a la galería, publicar noticias en el blog y mucho más de forma sencilla e intuitiva.</p>
                <a href="{{ route('front.about') }}" class="custom-view-more d-inline-flex font-weight-medium text-color-primary text-decoration-none appear-animation mt-4" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="3800">
                    Conoce Más Sobre el Sistema
                    <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary ms-2'}" />
                </a>
            </div>
        </div>
    </div>

    {{-- KPIs Section - Métricas de Trayectoria --}}
    @if(isset($kpis))
    <section class="section bg-light border-0 m-0 py-5">
        <div class="container container-xl-custom">
            <div class="row justify-content-center counters gy-4 gy-md-0">
                <div class="col-md-auto appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">
                    <div class="counter">
                        <strong class="text-color-primary text-13" data-to="{{ $kpis['years_experience'] }}" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                        <span class="text-color-primary font-weight-bold text-4 d-block mt-2">Años de Experiencia</span>
                    </div>
                </div>
                <div class="col-md-auto px-xl-5 mx-md-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">
                    <div class="counter">
                        <strong class="text-color-primary text-13" data-to="{{ $kpis['total_projects'] }}" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                        <span class="text-color-primary font-weight-bold text-4 d-block mt-2">Obras Ejecutadas</span>
                    </div>
                </div>
                <div class="col-md-auto appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">
                    <div class="counter">
                        <strong class="text-color-primary text-13" data-to="{{ $kpis['public_projects'] }}" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                        <span class="text-color-primary font-weight-bold text-4 d-block mt-2">Obras Públicas</span>
                    </div>
                </div>
                <div class="col-md-auto px-xl-5 mx-md-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800">
                    <div class="counter">
                        <strong class="text-color-primary text-13" data-to="{{ $kpis['private_projects'] }}" data-append="+" data-plugin-options="{'accY': -200}">0</strong>
                        <span class="text-color-primary font-weight-bold text-4 d-block mt-2">Obras Privadas</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    @if(isset($services) && $services->count() > 0)
    <section class="section position-relative overflow-hidden border-0 m-0">
        <div class="container container-xl-custom pt-5-5 pb-5 mb-3">
            <div class="row mb-5-5">
                <div class="col-lg-8">
                    <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">Funcionalidades del Sistema</h2>
                    <p class="text-4 font-weight-light appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="500">Sistema completo con módulos para gestión de proyectos, galería de imágenes, blog de noticias, formularios de contacto y más. Todo gestionable desde un panel de administración intuitivo y fácil de usar.</p>
                </div>
                <div class="col-lg-4 text-end appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="500">
                    <a href="{{ route('frontend.services.index') }}" class="btn btn-primary btn-modern btn-outline btn-sm font-weight-semibold">
                        Ver Todos los Servicios
                    </a>
                </div>
            </div>
            {{-- Services Grid - Aligned with /services page --}}
            <div class="row">
                @foreach($services as $index => $service)
                    <div class="col-md-6 col-lg-4 mb-4 appear-animation"
                         data-appear-animation="fadeInUpShorterPlus"
                         data-appear-animation-delay="{{ 200 + ($index * 100) }}"
                         data-plugin-animate-viewport="true">
                        <article class="card border-0 shadow-modern service-card h-100" itemscope itemtype="https://schema.org/Service">
                            @if($service->image)
                                <div class="card-img-top position-relative overflow-hidden service-image-wrapper" style="height: 200px;">
                                    <a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none">
                                        <img src="{{ filter_var($service->image, FILTER_VALIDATE_URL) ? $service->image : asset($service->image) }}"
                                             alt="{{ $service->title }}"
                                             class="img-fluid w-100 h-100 service-image"
                                             style="object-fit: cover; transition: transform 0.4s ease;"
                                             itemprop="image">
                                    </a>
                                    @if($service->is_featured)
                                        <div class="position-absolute top-0 start-0 m-3">
                                            <span class="badge bg-secondary text-white">
                                                <i class="fas fa-star me-1"></i>Destacado
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            @endif
                            <div class="card-body p-4 d-flex flex-column" style="position: relative; z-index: 2;">
                                {{-- Category Badge --}}
                                @if($service->category)
                                    <div class="mb-3">
                                        <a href="{{ route('frontend.services.index') }}?category={{ $service->category->slug }}"
                                           class="badge bg-color-grey-scale-2 text-color-dark me-1 mb-1 px-2 py-1 text-decoration-none service-badge">
                                            @if($service->category->icon)
                                                <i class="{{ $service->category->icon }} me-1"></i>
                                            @endif
                                            {{ $service->category->name }}
                                        </a>
                                    </div>
                                @endif

                                <h5 class="card-title font-weight-bold text-color-dark mb-3 flex-grow-1" style="font-size: 1.15rem; line-height: 1.4; min-height: 3rem;" itemprop="name">
                                    <a href="{{ route('frontend.services.detail', $service->slug) }}"
                                       class="text-decoration-none text-color-dark hover-text-primary">
                                        {{ $service->title ?? 'Servicio' }}
                                    </a>
                                </h5>

                                @if($service->description)
                                    <p class="text-color-grey mb-3 text-3" style="line-height: 1.6;" itemprop="description">
                                        {{ \Illuminate\Support\Str::limit($service->description, 120, '...') }}
                                    </p>
                                @endif

                                <div class="mt-auto pt-3 border-top border-color-grey-scale-2">
                                    <a href="{{ route('frontend.services.detail', $service->slug) }}"
                                       class="custom-view-more d-inline-flex align-items-center font-weight-medium text-color-dark text-decoration-none"
                                       itemprop="url">
                                        Ver Detalles
                                        <i class="fas fa-arrow-right ms-2"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="position-absolute transform3dy-n50 right-0 pe-5 me-4">
            <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1700" data-appear-animation-duration="750ms">
                <div class="custom-square-1 bg-primary mb-5"></div>
            </div>
        </div>
        <div class="position-absolute transform3dy-n50 right-15 pe-5 me-5">
            <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1500" data-appear-animation-duration="750ms">
                <div class="custom-square-1 bg-dark pe-5 me-5 mt-4 mb-5"></div>
            </div>
        </div>
    </section>
    @endif

    @if(isset($featuredProjects) && $featuredProjects->count() > 0)
    <div class="container container-xl-custom py-5 my-5-5">
        <div class="row mb-4">
            <div class="col-lg-8">
                <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">Nuestros Proyectos</h2>
                <p class="text-4 font-weight-light appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">Obras que transforman vidas y contribuyen al progreso y bienestar de la sociedad. Desde infraestructura vial y sanitaria hasta proyectos arquitectónicos, cada obra refleja nuestro compromiso con la excelencia y la innovación.</p>
            </div>
            <div class="col-lg-4 text-end appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">
                <a href="{{ route('frontend.projects.index') }}" class="btn btn-primary btn-modern btn-outline btn-sm font-weight-semibold">
                    Ver Todos los Proyectos
                </a>
            </div>
        </div>
        {{-- Projects Grid - Aligned with /projects page --}}
        <div class="shop">
            <div class="products row">
                @foreach($featuredProjects->take(6) as $index => $project)
                    <div class="col-md-6 col-lg-4 mb-4 appear-animation"
                         data-appear-animation="fadeInUpShorterPlus"
                         data-appear-animation-delay="{{ 200 + ($index * 100) }}"
                         data-plugin-animate-viewport="true">
                        <div class="card border-0 shadow-modern project-card h-100">
                            @if($project->image)
                                <div class="card-img-top position-relative overflow-hidden project-image-wrapper" style="height: 250px;">
                                    <a href="{{ route('frontend.projects.show', $project->slug) }}" class="text-decoration-none">
                                        <img src="{{ filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image) }}"
                                             alt="{{ $project->title }}"
                                             class="img-fluid w-100 h-100 project-image"
                                             style="object-fit: cover; transition: transform 0.4s ease;">
                                    </a>
                                    <div class="position-absolute top-0 end-0 m-3">
                                        @if($project->url)
                                            <span class="badge bg-success text-white">
                                                <i class="fas fa-external-link-alt me-1"></i>Online
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            @endif
                            <div class="card-body p-4 d-flex flex-column">
                                {{-- Categories & Tags --}}
                                @if($project->categories && $project->categories->count() > 0 || $project->tags && $project->tags->count() > 0)
                                    <div class="mb-3">
                                        @if($project->categories && $project->categories->count() > 0)
                                            @foreach($project->categories->take(2) as $category)
                                                <a href="{{ route('frontend.projects.category', $category->slug) }}"
                                                   class="badge bg-color-grey-scale-2 text-color-dark border border-color-primary border-opacity-30 me-1 mb-1 px-2 py-1 text-decoration-none project-badge">
                                                    {{ $category->name }}
                                                </a>
                                            @endforeach
                                        @endif
                                        @if($project->tags && $project->tags->count() > 0)
                                            @foreach($project->tags->take(2) as $tag)
                                                <a href="{{ route('frontend.projects.tag', $tag->slug) }}"
                                                   class="badge bg-color-grey-scale-2 text-color-dark me-1 mb-1 px-2 py-1 text-decoration-none project-tag">
                                                    {{ $tag->name }}
                                                </a>
                                            @endforeach
                                        @endif
                                    </div>
                                @endif

                                <h5 class="card-title font-weight-bold text-color-dark mb-3 flex-grow-1" style="font-size: 1.15rem; line-height: 1.4; min-height: 3rem;">
                                    <a href="{{ route('frontend.projects.show', $project->slug) }}"
                                       class="text-decoration-none text-color-dark hover-text-primary">
                                        {{ $project->title ?? 'Proyecto' }}
                                    </a>
                                </h5>

                                @if($project->description)
                                    <p class="text-color-grey mb-3 text-3" style="line-height: 1.6;">{{ \Illuminate\Support\Str::limit($project->description, 100) }}</p>
                                @endif

                                <div class="mt-auto pt-3 border-top border-color-grey-scale-2">
                                    <a href="{{ route('frontend.projects.show', $project->slug) }}"
                                       class="custom-view-more d-inline-flex align-items-center font-weight-medium text-color-dark text-decoration-none">
                                        Ver Detalles
                                        <i class="fas fa-arrow-right ms-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-8 col-lg-6">
                <p class="text-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">El sistema permite gestionar <span class="highlight highlight-primary highlight-bg-opacity highlight-animated" data-appear-animation="highlight-animated-start" data-appear-animation-delay="1100" data-plugin-options="{'flagClassOnly': true}">proyectos de construcción</span> de todo tipo: residenciales, comerciales, industriales, infraestructura y más. Cada proyecto puede incluir imágenes, descripciones detalladas, categorías y toda la información necesaria, todo gestionable desde el panel de administración.</p>
            </div>
        </div>
    </div>
    @endif



    {{-- Sección de Comitentes Destacados (Opcional - comentada hasta tener logos reales) --}}
    {{--
    <section class="section bg-light border-0 m-0 py-5">
        <div class="container container-xl-custom">
            <div class="row mb-4">
                <div class="col text-center">
                    <h3 class="text-color-dark font-weight-bold text-5 mb-2">Nuestros Comitentes</h3>
                    <p class="text-3-5 font-weight-light text-color-grey">Confían en nosotros para hacer realidad sus proyectos</p>
                </div>
            </div>
            <div class="row align-items-center justify-content-center text-center">
                <div class="col-sm-6 col-md-4 col-lg-3 mb-4 mb-lg-0">
                    <div class="opacity-6 opacity-hover-8">
                        <img src="{{ asset('cd-project/img/logos/cliente-1.png') }}" alt="Cliente" class="img-fluid" style="max-width: 120px; height: auto; filter: grayscale(100%);" />
                    </div>
                </div>
                <!-- Más logos de clientes aquí -->
            </div>
        </div>
    </section>
    --}}

    <div class="container container-xl-custom">
        <div class="row">
            <div class="col px-0">
                <hr class="my-0">
            </div>
        </div>
    </div>

    @if(isset($recentPosts) && $recentPosts->count() > 0)
    <section class="section section-height-auto bg-color-grey-scale-1 m-0 border-0">
        <div class="container container-xl-custom">
            <div class="row mb-5-5">
                <div class="col-lg-8">
                    <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">Noticias</h2>
                    <p class="text-4 font-weight-light appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">Explora las funcionalidades del módulo de blog en este sistema autoadministrable. Publica noticias, artículos y actualizaciones desde el panel de administración.</p>
                </div>
                <div class="col-lg-4 text-end appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">
                    <a href="{{ route('blog.index') }}" class="btn btn-primary btn-modern btn-outline btn-sm font-weight-semibold">
                        Ver Todas las Noticias
                    </a>
                </div>
            </div>
            <div class="row mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                @foreach($recentPosts as $index => $post)
                    <div class="col-md-6 col-lg-4 mb-4 appear-animation"
                         data-appear-animation="fadeInUpShorterPlus"
                         data-appear-animation-delay="{{ 200 + ($index * 100) }}"
                         data-plugin-animate-viewport="true">
                        <article class="card border-0 shadow-modern blog-card h-100" itemscope itemtype="https://schema.org/BlogPosting">
                            @if($post->header)
                                <div class="card-img-top position-relative overflow-hidden blog-image-wrapper" style="height: 200px;">
                                    <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none">
                                        <img src="{{ filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : asset($post->header) }}"
                                             alt="{{ $post->title }}"
                                             class="img-fluid w-100 h-100 blog-image"
                                             style="object-fit: cover; transition: transform 0.4s ease;"
                                             itemprop="image">
                                    </a>
                                </div>
                            @else
                                <div class="card-img-top position-relative overflow-hidden blog-image-wrapper" style="height: 200px;">
                                    <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none">
                                        <img src="{{ asset('cd-project/img/demos/construction/blog/blog-thumb-' . (($index % 3) + 1) . '.jpg') }}"
                                             alt="{{ $post->title }}"
                                             class="img-fluid w-100 h-100 blog-image"
                                             style="object-fit: cover; transition: transform 0.4s ease;"
                                             itemprop="image">
                                    </a>
                                </div>
                            @endif
                            <div class="card-body p-4 d-flex flex-column" style="position: relative; z-index: 2;">
                                {{-- Category Badge and Date --}}
                                <div class="mb-3">
                                    <p class="text-uppercase text-color-default text-1 mb-1 d-inline-block">
                                        <time pubdate datetime="{{ $post->created_at->format('Y-m-d') }}" itemprop="datePublished">{{ $post->created_at->format('d M Y') }}</time>
                                    </p>
                                    @if($post->category)
                                        <span class="opacity-3 d-inline-block px-2">|</span>
                                        <a href="{{ route('blog.category', $post->category->slug) }}"
                                           class="badge bg-color-grey-scale-2 text-color-dark me-1 mb-1 px-2 py-1 text-decoration-none blog-badge">
                                            {{ $post->category->name }}
                                        </a>
                                    @endif
                                </div>

                                <h5 class="card-title font-weight-bold text-color-dark mb-3 flex-grow-1" style="font-size: 1.15rem; line-height: 1.4; min-height: 3rem;" itemprop="headline">
                                    <a href="{{ route('blog.post', $post->slug) }}"
                                       class="text-decoration-none text-color-dark hover-text-primary">
                                        {{ $post->title }}
                                    </a>
                                </h5>

                                @if($post->description)
                                    <p class="text-color-grey mb-3 text-3" style="line-height: 1.6;" itemprop="description">
                                        {{ Str::limit($post->description, 120, '...') }}
                                    </p>
                                @endif

                                <div class="mt-auto pt-3 border-top border-color-grey-scale-2">
                                    <a href="{{ route('blog.post', $post->slug) }}"
                                       class="custom-view-more d-inline-flex align-items-center font-weight-medium text-color-dark text-decoration-none"
                                       itemprop="url">
                                        Ver Detalles
                                        <i class="fas fa-arrow-right ms-2"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif


    {{-- <div class="position-relative pb-5 d-sm-none d-xl-block">
        <div class="position-absolute transform3dy-n50 left-0">
            <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1500" data-appear-animation-duration="1500ms">
                <div class="custom-square-1 bg-primary mt-0 mb-5"></div>
            </div>
        </div>
    </div> --}}

</div>

@endsection

@push('styles')
<style>
/* Service Cards - Aligned with /services page design */
.service-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Animated top border on hover - Subtle elegant sliding effect */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-rgba-40), transparent);
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.15) !important;
    border-color: var(--primary-rgba-20);
}

.service-image-wrapper {
    overflow: hidden;
}

.service-image {
    transition: transform 0.4s ease;
}

.service-card:hover .service-image {
    transform: scale(1.08);
}

.service-badge {
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.service-badge:hover {
    background-color: var(--primary-rgba-10) !important;
    border-color: var(--primary-rgba-30);
    transform: translateY(-1px);
}

.hover-text-primary:hover {
    color: var(--primary) !important;
    transition: color 0.3s ease;
}

.custom-view-more {
    transition: all 0.3s ease;
}

.custom-view-more:hover {
    gap: 0.5rem;
    color: var(--primary) !important;
}

.custom-view-more i {
    transition: transform 0.3s ease;
}

.custom-view-more:hover i {
    transform: translateX(3px);
    color: var(--primary);
}

/* Project Cards - Aligned with /projects page design */
.project-card {
    transition: all 0.3s ease;
    overflow: hidden;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.15) !important;
}

.project-image-wrapper {
    overflow: hidden;
}

.project-image {
    transition: transform 0.4s ease;
}

.project-card:hover .project-image {
    transform: scale(1.08);
}

.project-badge {
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.project-badge:hover {
    background-color: var(--primary-rgba-10) !important;
    border-color: var(--primary-rgba-50) !important;
    transform: translateY(-1px);
}

.project-tag {
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.project-tag:hover {
    background-color: #e8e8e8 !important;
    transform: translateY(-1px);
}
</style>
@endpush