@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . config('site.tagline', __('Welcome')))
@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', brand_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', brand_twitter_image())

@section('content')

@php
    // Helper: reads from config('site.welcome.{key}') with fallback defaults
    $welcomeDefaults = [
        'hero_title' => config('site.name', ''),
        'hero_subtitle' => config('site.tagline', ''),
        'hero_description' => config('site.description', ''),

        'tab1_title' => __('Proyectos'),
        'tab1_description' => config('site.modules.services.page_header.subtitle', __('Conocé los proyectos que vengo construyendo.')),
        'tab1_cta' => __('Ver proyectos'),
        'tab2_title' => __('Galería'),
        'tab2_description' => config('site.modules.gallery.page_header.subtitle', __('Momentos, viajes y procesos creativos.')),
        'tab2_cta' => __('Ver galería'),
        'tab3_title' => __('Blog'),
        'tab3_description' => config('site.modules.projects.page_header.subtitle', __('Notas, reflexiones y aprendizajes en el camino.')),
        'tab3_cta' => __('Leer blog'),

        'about_badge' => config('site.about.main_title', __('Sobre mí')),
        'about_title' => config('site.about.page_title', config('site.name')),
        'about_description' => config('site.about.main_subtitle', config('site.description')),
        'about_tagline' => config('site.tagline', ''),

        'closure_text' => config('site.contact.cta_title', __('¿Conectamos? Estoy abierto a conversaciones que sumen.')),
        'closure_cta' => __('Hablemos'),

        'tagline' => config('site.tagline', config('site.name')),

        'work_badge' => __('Lo que hago'),
        'work_title' => config('site.name'),
        'work_subtitle' => config('site.tagline', ''),
        'work_item_1' => __('Proyectos'),
        'work_item_2' => __('Galería'),
        'work_item_3' => __('Blog'),
        'work_item_4' => __('Contacto'),

        'skills_badge' => __('Mis disciplinas'),
        'skills_title' => __('Lo que hago bien'),
        'stat_card_label' => __('Años creando'),
        'stat_card_value' => '10+',

        'show_testimonials' => false,
        'show_social_proof' => false,

        'blog_badge' => __('Blog'),
        'blog_title' => config('site.modules.blog.page_header.title', __('Últimas notas')),

        'stat_1_value' => '10',
        'stat_1_label' => __('años creando'),
        'stat_2_value' => '50',
        'stat_2_label' => __('proyectos completados'),
        'stat_3_value' => '30',
        'stat_3_label' => __('destinos explorados'),
    ];

    $welcome = function($key, $default = null) use ($welcomeDefaults) {
        return config('site.welcome.' . $key, $welcomeDefaults[$key] ?? $default);
    };
@endphp

<div role="main" class="main position-relative overflow-hidden">
    <div class="hero-glow-circle d-none d-lg-block" style="top: 10%; left: 5%;"></div>
    <div class="hero-glow-circle d-none d-lg-block" style="top: 40%; right: 5%;"></div>

    {{-- Hero Section --}}
    <div class="container position-relative z-index-2">
        <div class="row align-items-center py-5">
            <div class="col-lg-7 text-center text-lg-start mb-4 mb-lg-0">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                    <span class="badge rounded-pill text-uppercase font-weight-semibold px-3 py-2 mb-3 d-inline-flex" style="background-color: var(--primary-rgba-15); border: 1px solid var(--primary-rgba-30); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                        {{ config('site.welcome.hero_badge', 'Marca Personal') }}
                    </span>
                    <h1 class="font-weight-bold line-height-2 mb-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2.5rem, 6vw, 4.2rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">
                        {{ $welcome('hero_title') }}
                        <span class="text-color-primary d-block mt-1">{{ $welcome('hero_subtitle') }}</span>
                    </h1>
                    <p class="text-4 text-lg-5 mt-3 line-height-6 font-weight-medium" style="color: rgba(255, 255, 255, 0.75) !important;">
                        {{ $welcome('hero_description') }}
                    </p>
                    <p class="text-3-5 mt-2 line-height-6" style="color: rgba(255, 255, 255, 0.55) !important;">
                        {{ config('site.about.main_subtitle', config('site.description')) }}
                    </p>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                    <div class="d-flex justify-content-center justify-content-lg-end align-items-center gap-3">
                        <a href="{{ route('frontend.projects.portfolio') }}" class="btn btn-rounded btn-primary font-weight-bold px-4 py-3 text-2-5 btn-swap-1" style="border-radius: 50px !important;">
                            <span>{{ config('site.welcome.cta_primary_label', __('Ver proyectos')) }}</span>
                        </a>
                        <a href="{{ route('blog.index') }}" class="btn btn-rounded btn-outline-primary font-weight-bold px-4 py-3 text-2-5 btn-swap-1" style="border-radius: 50px !important;">
                            <span>{{ config('site.welcome.cta_secondary_label', __('Leer el blog')) }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Background Section — Crossfade automático, gestionable desde /admin/welcomecarousel --}}
    <section class="section section-background m-0 p-relative overflow-hidden custom-el-10">
        @if(isset($carouselImages) && $carouselImages->count() > 0)
            @foreach($carouselImages as $index => $slide)
                <div class="hero-bg-layer position-absolute top-0 left-0 right-0 bottom-0" style="background-image: url({{ $slide->image_path }}); background-size: cover; background-position: center; opacity: {{ $index === 0 ? '1' : '0' }}; transition: opacity 2s ease-in-out; z-index: 0;"></div>
            @endforeach
        @else
            <div class="position-absolute top-0 left-0 right-0 bottom-0" style="background-image: url({{ asset('template/img/demos/accounting-2/bg/bg-1.jpg') }}); background-size: cover; background-position: center; z-index: 0;"></div>
        @endif
    </section>

    @if(isset($carouselImages) && $carouselImages->count() > 1)
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var layers = document.querySelectorAll('.hero-bg-layer');
        if (layers.length <= 1) return;
        var current = 0;
        setInterval(function() {
            layers[current].style.opacity = '0';
            current = (current + 1) % layers.length;
            layers[current].style.opacity = '1';
        }, 6000);
    });
    </script>
    @endif

    {{-- 3 Pilares Cards V3 --}}
    <div class="container py-5 mt-4 position-relative z-index-2">
        <div class="row">
            {{-- Pilar 1: Crear --}}
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                    <div class="card card-glass custom-card-glass-1 border-0 h-100 anim-hover-translate-top-10px transition-3ms" style="border: 1px solid rgba(255, 255, 255, 0.08) !important;">
                        <div class="card-body p-4 d-flex flex-column">
                            <div class="rounded-circle bg-color-primary-rgba-10 d-flex align-items-center justify-content-center mb-4" style="width: 60px; height: 60px; border: 1px solid var(--primary-rgba-25);">
                                <i class="fa-solid fa-code text-color-primary text-5"></i>
                            </div>
                            <h3 class="font-weight-bold text-5 mb-2" style="font-family: var(--font-family-secondary), sans-serif !important;">
                                {{ config('site.about.value_1_title', 'Crear') }}
                            </h3>
                            <p class="text-3-5 opacity-8 mb-4 flex-grow-1">
                                {{ config('site.about.value_1_description', 'Lo que vengo construyendo. Cada proyecto entregado, cada colaboración, cada idea que se hizo realidad.') }}
                            </p>
                            <a href="{{ route('frontend.projects.portfolio') }}" class="font-weight-bold text-2 text-uppercase text-decoration-none d-inline-flex align-items-center gap-2 text-color-primary">
                                {{ __('Ver Proyectos') }} <i class="fa-solid fa-arrow-right text-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Pilar 2: Compartir --}}
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    <div class="card card-glass custom-card-glass-1 border-0 h-100 anim-hover-translate-top-10px transition-3ms" style="border: 1px solid rgba(255, 255, 255, 0.08) !important;">
                        <div class="card-body p-4 d-flex flex-column">
                            <div class="rounded-circle bg-color-primary-rgba-10 d-flex align-items-center justify-content-center mb-4" style="width: 60px; height: 60px; border: 1px solid var(--primary-rgba-25);">
                                <i class="fa-solid fa-pen-nib text-color-primary text-5"></i>
                            </div>
                            <h3 class="font-weight-bold text-5 mb-2" style="font-family: var(--font-family-secondary), sans-serif !important;">
                                {{ config('site.about.value_2_title', 'Compartir') }}
                            </h3>
                            <p class="text-3-5 opacity-8 mb-4 flex-grow-1">
                                {{ config('site.about.value_2_description', 'Lo que aprendo lo escribo. Notas, reflexiones y procesos detrás de cada proyecto.') }}
                            </p>
                            <a href="{{ route('gallery') }}" class="font-weight-bold text-2 text-uppercase text-decoration-none d-inline-flex align-items-center gap-2 text-color-primary">
                                {{ __('Explorar Galería') }} <i class="fa-solid fa-arrow-right text-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Pilar 3: Conectar --}}
            <div class="col-lg-4">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                    <div class="card card-glass custom-card-glass-1 border-0 h-100 anim-hover-translate-top-10px transition-3ms" style="border: 1px solid rgba(255, 255, 255, 0.08) !important;">
                        <div class="card-body p-4 d-flex flex-column">
                            <div class="rounded-circle bg-color-primary-rgba-10 d-flex align-items-center justify-content-center mb-4" style="width: 60px; height: 60px; border: 1px solid var(--primary-rgba-25);">
                                <i class="fa-solid fa-handshake text-color-primary text-5"></i>
                            </div>
                            <h3 class="font-weight-bold text-5 mb-2" style="font-family: var(--font-family-secondary), sans-serif !important;">
                                {{ config('site.about.value_3_title', 'Conectar') }}
                            </h3>
                            <p class="text-3-5 opacity-8 mb-4 flex-grow-1">
                                {{ config('site.about.value_3_description', 'Construir redes profesionales sólidas. Las mejores oportunidades surgen de relaciones de confianza.') }}
                            </p>
                            <a href="{{ route('blog.index') }}" class="font-weight-bold text-2 text-uppercase text-decoration-none d-inline-flex align-items-center gap-2 text-color-primary">
                                {{ __('Leer el Blog') }} <i class="fa-solid fa-arrow-right text-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Mis disciplinas — overview de los módulos activos --}}
    <div class="container py-5 my-3 position-relative z-index-2">
        <div class="row align-items-center">
            <div class="col-lg-5 mb-4 mb-lg-0">
                <span class="badge rounded-pill text-uppercase font-weight-semibold px-3 py-2 mb-3 d-inline-flex" style="background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-25); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                    {{ config('site.welcome.modules_badge', 'Mi Espacio') }}
                </span>
                <h2 class="font-weight-bold line-height-2 mb-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">
                    {{ config('site.welcome.modules_title', 'Todo conectado') }} <span class="text-color-primary d-block">{{ config('site.welcome.modules_subtitle', 'en un mismo lugar') }}</span>
                </h2>
                <p class="text-4 mb-4" style="color: var(--secondary) !important;">
                    {{ config('site.welcome.modules_description', 'Acá encontrás todo lo que vengo construyendo: proyectos, publicaciones, momentos y respuestas a las preguntas que más recibo.') }}
                </p>
                <div class="d-flex align-items-center gap-3">
                    <a href="{{ route('front.about') }}" class="btn btn-rounded btn-primary font-weight-bold px-4 py-3 text-2-5" style="border-radius: 50px !important;">
                        {{ __('Conocé mi historia') }}
                    </a>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="card card-glass custom-card-glass-1 border-0 p-4" style="border: 1px solid rgba(255, 255, 255, 0.08) !important;">
                    <h4 class="font-weight-bold text-4 mb-4 text-color-light d-flex align-items-center gap-2" style="font-family: var(--font-family-secondary), sans-serif !important;">
                        <span class="d-inline-block rounded-circle bg-success animate-pulse" style="width: 8px; height: 8px; box-shadow: 0 0 8px var(--primary);"></span>
                        {{ config('site.welcome.modules_grid_title', 'Explorá las secciones') }}
                    </h4>
                    <div class="row g-3">
                        @php
                            $activeModulesShow = [
                                ['name' => __('Proyectos'), 'desc' => __('Trabajos publicados y casos de estudio'), 'icon' => 'fa-solid fa-code', 'active' => is_module_active('projects'), 'route' => route('frontend.projects.portfolio')],
                                ['name' => __('Galería'), 'desc' => __('Momentos, procesos y registros visuales'), 'icon' => 'fa-solid fa-images', 'active' => is_module_active('gallery'), 'route' => route('gallery')],
                                ['name' => __('Blog'), 'desc' => __('Notas, reflexiones y aprendizajes en el camino'), 'icon' => 'fa-solid fa-pen-nib', 'active' => is_module_active('blog'), 'route' => route('blog.index')],
                                ['name' => __('Preguntas Frecuentes'), 'desc' => __('Respuestas rápidas sobre mi proceso de trabajo'), 'icon' => 'fa-solid fa-circle-question', 'active' => is_module_active('faqs'), 'route' => route('faqs.index')],
                            ];
                        @endphp
                        @foreach($activeModulesShow as $modShow)
                            @if($modShow['active'])
                                <div class="col-md-6">
                                    <div class="p-3 border-radius-2 d-flex align-items-center gap-3 transition-3ms hover-bg-light-opacity-5" style="background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);">
                                        <div class="rounded bg-color-primary-rgba-10 d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; border: 1px solid var(--primary-rgba-15);">
                                            <i class="{{ $modShow['icon'] }} text-color-primary text-4"></i>
                                        </div>
                                        <div class="text-start flex-grow-1">
                                            <span class="d-block font-weight-bold text-3 text-color-light">{{ $modShow['name'] }}</span>
                                            <span class="d-block text-2 text-color-tertiary opacity-7" style="color: var(--secondary) !important;">{{ $modShow['desc'] }}</span>
                                        </div>
                                        <div>
                                            <a href="{{ $modShow['route'] }}" class="text-color-primary text-hover-light"><i class="fa-solid fa-chevron-right text-3"></i></a>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Who Is {{ config('site.name') }} Section --}}
    <div class="container pt-5 mt-3">
        <div class="row">
            <div class="col text-center">
                <span class="badge rounded-pill text-uppercase font-weight-semibold px-3 py-2" style="background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-25); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                    <span class="d-inline-flex py-1 px-2">{{ $welcome('about_badge') }}</span>
                </span>
                <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                    <h2 class="font-weight-bold line-height-2 mb-3 mt-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">
                        {{ $welcome('about_title') }}
                    </h2>
                </div>
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                    <p class="text-4 line-height-7" style="color: rgba(255, 255, 255, 0.75) !important;">{{ $welcome('about_description') }}</p>
                    <p class="text-4 line-height-7 font-weight-bold mt-3" style="color: var(--primary) !important; font-family: var(--font-family-secondary), sans-serif;">{{ $welcome('about_tagline') }}</p>
                </div>
            </div>
        </div>

        <div class="row counters justify-content-center m-5">
            @php
                $counters = [
                    ['value' => $welcome('stat_1_value'), 'label' => $welcome('stat_1_label'), 'delay' => 0],
                    ['value' => $welcome('stat_2_value'), 'label' => $welcome('stat_2_label'), 'delay' => 200],
                    ['value' => $welcome('stat_3_value'), 'label' => $welcome('stat_3_label'), 'delay' => 400]
                ];
            @endphp
            @foreach($counters as $counter)
                <div class="col-md-6 col-lg-4 mb-4 mb-lg-0 text-center">
                    <div class="d-flex flex-column pt-2 pb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $counter['delay'] }}">
                        <p class="d-inline-block mb-0 font-weight-bold line-height-1 counter d-flex justify-content-center">
                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-7.svg') }}" width="50" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-2'}" />
                            <span class="text-light text-13 n-ls-5 p-0 me-4" style="font-family: var(--font-family-secondary), sans-serif !important;" data-to="{{ $counter['value'] }}" data-append="{{ $counter['value'] < 100 ? '+' : '' }}"></span>
                        </p>
                        <span class="text-4 n-ls-1 pt-2" style="color: rgba(255, 255, 255, 0.65) !important;">{{ $counter['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>
      {{-- My Work & Passions Section — Dinámica y adaptada al perfil personal --}}
    @php
        $workItems = [];
        if (is_module_active('projects') && Route::has('frontend.projects.portfolio')) {
            $workItems[] = ['title' => $welcome('work_item_1', __('Proyectos')), 'image' => 'generic-4.jpg', 'delay' => 0, 'link' => route('frontend.projects.portfolio')];
        }
        if (is_module_active('gallery') && Route::has('gallery')) {
            $workItems[] = ['title' => $welcome('work_item_2', __('Galería')), 'image' => 'generic-5.jpg', 'delay' => 100, 'link' => route('gallery')];
        }
        if (is_module_active('blog') && Route::has('blog.index')) {
            $workItems[] = ['title' => $welcome('work_item_3', __('Blog')), 'image' => 'generic-6.jpg', 'delay' => 200, 'link' => route('blog.index')];
        }
        if (is_module_active('contact') && Route::has('front.contact')) {
            $workItems[] = ['title' => $welcome('work_item_4', __('Contacto')), 'image' => 'generic-7.jpg', 'delay' => 300, 'link' => route('front.contact')];
        }
    @endphp
    @if(!empty($workItems))
    <div class="px-4">
        <div class="bg-secondary px-3 px-xl-0 border-radius-2 text-light p-relative overflow-hidden" style="border: 1px solid var(--primary-rgba-20);">
            <div class="container p-relative z-index-1 py-4">
                <div class="row align-items-end py-5">
                    <div class="col-lg-9 text-center text-lg-start mb-4 mb-lg-0">
                        <span class="badge bg-transparent text-light border border-color-light-rgba-20 box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2">
                            <span class="d-inline-flex py-1 px-2">{{ $welcome('work_badge') }}</span>
                        </span>
                        <h2 class="font-weight-bold line-height-2 mb-0 mt-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">
                            {{ $welcome('work_title') }}
                            <span class="text-color-tertiary" style="color: var(--tertiary) !important;">{{ $welcome('work_subtitle') }}</span>
                        </h2>
                    </div>
                    <div class="col-lg-3 text-center text-lg-end">
                        <a href="{{ route('front.about') }}" class="btn btn-rounded btn-primary font-weight-bold px-4 py-3 text-2-5 btn-swap-1 ms-3 px-5" style="border-radius: 50px !important;">
                            <span>{{ __('Conocé más') }}</span>
                        </a>
                    </div>
                </div>
                <div class="row pb-5">
                    <div class="col">
                        <div class="d-grid">
                            @foreach($workItems as $item)
                                <a href="{{ $item['link'] }}" class="btn btn-tertiary overflow-hidden border-0 border-radius-2 text-start box-shadow-6 btn-xl text-3 py-4 btn-with-arrow-solid btn-with-arrow-sm mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $item['delay'] }}">
                                    <em class="custom-el-4 d-none d-lg-inline-block">
                                        <img src="{{ asset('template/img/demos/accounting-2/generic/' . $item['image']) }}" loading="lazy" class="img-fluid p-relative z-index-2" height="130" alt="">
                                    </em>
                                    <strong class="d-inline-flex font-weight-semibold me-3 negative-ls-05 text-6 p-relative top-4" style="font-family: var(--font-family-secondary), sans-serif !important;">{{ $item['title'] }}</strong>
                                    <span class="bg-secondary box-shadow-6 me-3"><i class="fa-solid fa-arrow-right text-light"></i></span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Skills & Expertise Section - Comentado: Landing comercial removida según especificaciones --}}
    {{--
    <div class="container pt-5 pb-3 mt-3">
        <div class="row">
            <div class="col text-center">
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                    <span class="d-inline-flex py-1 px-2">{{ $welcome('skills_badge') }}</span>
                </span>
                <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                    <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ $welcome('skills_title') }}</h2>
                </div>
            </div>
        </div>
        <div class="row mt-4 align-items-center">
            <div class="col-lg-6 text-center">
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                    <div class="custom-el-5 p-relative" style="background-image: url({{ asset('template/img/demos/accounting-2/generic/generic-8.jpg') }}">
                        <div class="custom-el-5-1 border-color-primary"></div>
                        <span class="custom-el-5-2 rounded-circle d-inline-block overflow-hidden">
                            <img src="{{ asset('template/img/demos/accounting-2/generic/generic-22.jpg') }}" loading="lazy" class="img-fluid p-relative z-index-2 rounded-circle" alt="">
                        </span>
                        <div class="p-absolute bg-color-light border-radius-2 p-3 text-3-5 box-shadow-7 d-flex align-items-center z-index-10 custom-pos-3">
                            <div class="appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="100">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle bg-color-tertiary custom-el-6 p-relative">
                                        <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                            <div class="anim-up-down-infinite p-relative bottom-8" style="animation-duration: 1200ms;">
                                                <img src="{{ asset('template/img/demos/accounting-2/icons/icon-5.svg') }}" width="40" height="40" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ps-2 ms-2 text-start pe-4">
                                        <span class="d-block font-weight-medium text-2 text-color-default line-height-1">{{ $welcome('stat_card_label') }}</span>
                                        <span class="d-block font-weight-bold text-dark text-4">{{ $welcome('stat_card_value') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="d-grid">
                    @php
                        $skills = array_filter([
                            $welcome('skill_1'),
                            $welcome('skill_2'),
                            $welcome('skill_3'),
                            $welcome('skill_4'),
                            $welcome('skill_5'),
                            $welcome('skill_6')
                        ]);
                    @endphp
                    @foreach($skills as $skill)
                        <div class="btn btn-light overflow-hidden border-0 text-start btn-xl text-3 py-4 btn-with-arrow-solid btn-with-arrow-sm mb-0">
                            <strong class="d-inline-flex text-color-secondary font-weight-semibold text-dark me-3 negative-ls-05 text-5">{{ $skill }}</strong>
                            <span class="bg-grey-100 box-shadow-6 me-0"><i class="fa-solid fa-check text-primary"></i></span>
                        </div>
                    @endforeach
                </div>
                <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium px-3 py-3 text-2-5 btn-swap-1 mt-4 ms-4 px-5 p-relative left-7" data-clone-element="1">
                    <span>{{ __('Contactame') }}</span>
                </a>
            </div>
        </div>
    </div>
    --}}

    {{-- Created by Real People Section --}}
    {{-- <div class="px-4 mt-5">
        <div class="bg-color-quaternary-rgba-10 px-3 px-xl-0 border-radius-2 p-relative overflow-hidden">
            <div class="container p-relative z-index-1 py-4">
                <div class="row align-items-end justify-content-center pt-5 pb-4">
                    <div class="col-lg-8 text-center">
                        <span class="badge bg-transparent text-dark border border-color-grey-rgba-10 box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                            <span class="d-inline-flex py-1 px-2">{{ $welcome('personal_badge') }}</span>
                        </span>
                        <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                            <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ $welcome('personal_title') }}</h2>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                            <p>{{ $welcome('personal_description') }}</p>
                        </div>
                    </div>
                </div>
                <div class="row pb-5 mb-3">
                    <div class="col text-center">
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">
                            <div class="custom-gallery-1">
                                @for($i = 9; $i <= 12; $i++)
                                    <div>
                                        <img class="" src="{{ asset('template/img/demos/accounting-2/generic/generic-' . $i . '.jpg') }}" alt="">
                                    </div>
                                @endfor
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row pb-5 mb-3">
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                        <p class="mb-0 text-dark font-weight-medium d-flex justify-content-center">
                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-16.svg') }}" width="30" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ $welcome('availability_text') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    {{-- Social Proof / Featured In --}}
    @if(filter_var($welcome('show_social_proof', false), FILTER_VALIDATE_BOOLEAN))
    <div class="container">
        <div class="row mt-3 py-4">
            <div class="col pb-0 pt-5 pb-lg-5">
                <div class="owl-carousel owl-theme carousel-center-active-item" data-plugin-options="{'responsive': {'0': {'items': 3}, '476': {'items': 3}, '768': {'items': 3}, '992': {'items': 5}, '1200': {'items': 5}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
                    @for($i = 1; $i <= 7; $i++)
                        @if($i != 2)
                            <div>
                                <img class="img-fluid" src="{{ asset('template/img/logos/logo-' . $i . '.png') }}" alt="">
                            </div>
                        @endif
                    @endfor
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Trusted By Clients (Testimonials) Section --}}
    @if(filter_var($welcome('show_testimonials', false), FILTER_VALIDATE_BOOLEAN))
    <div class="px-4 mt-5">
        <div class="bg-custom-color-1 px-3 px-xl-0 border-radius-2 p-relative overflow-hidden">
            <div class="custom-el-8">
                <i class="fas fa-star custom-text-color-2 rotate-l-45"></i>
                <i class="fas fa-star custom-text-color-2 rotate-l-45"></i>
                <i class="fas fa-star custom-text-color-2 rotate-l-45"></i>
            </div>
            <div class="container p-relative z-index-1 py-4">
                <div class="row align-items-end justify-content-center pt-5 pb-4">
                    <div class="col-lg-7 text-center">
                        <span class="badge bg-transparent text-dark border border-color-grey-rgba-10 box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                            <span class="d-inline-flex py-1 px-2">{{ $welcome('testimonials_badge') }}</span>
                        </span>
                        <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                            <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ $welcome('testimonials_title') }}</h2>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                            <p>{{ $welcome('testimonials_description') }}</p>
                        </div>
                    </div>
                </div>
                <div class="row pb-5 mb-3 justify-content-center">
                    <div class="col-lg-9 text-center">
                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                            <div class="owl-carousel custom-owl-carousel-1 owl-theme nav-lg nav-transparent nav-borders rounded-nav mb-0" data-plugin-options="{'responsive': {'1': {'items': 1, 'stagePadding': 0, 'margin': 0}, '768': {'items': 1, 'stagePadding': 100, 'margin': 100}, '992': {'items': 1, 'stagePadding': 100, 'margin': 100}, '1200': {'items': 1, 'stagePadding': 100, 'margin': 100}}, 'loop': false, 'nav': true, 'dots': false}">
                                @php
                                    $testimonials = [
                                        [
                                            'text' => $welcome('testimonial_1_text', __('Working with our team transformed our online presence. The team delivered a scalable solution that perfectly captured the essence of our brand. Professional, creative and always attentive.')),
                                            'author' => $welcome('testimonial_1_author', 'Cliente, Socio de Marca'),
                                            'image' => 'generic-13.jpg'
                                        ],
                                        [
                                            'text' => $welcome('testimonial_2_text', "La solución web que recibimos superó nuestras expectativas. No es solo un sitio web—es una experiencia digital que realmente representa quiénes somos. La atención al detalle y el enfoque estratégico marcaron la diferencia."),
                                            'author' => $welcome('testimonial_2_author', 'Cliente, Empresario'),
                                            'image' => 'generic-23.jpg'
                                        ]
                                    ];
                                @endphp
                                @foreach($testimonials as $testimonial)
                                    <div class="row align-items-center">
                                        <div class="col-lg-4 ps-5 pt-4">
                                            <span class="rounded-circle d-inline-block p-relative">
                                                <span class="custom-el-7 bg-primary"><i class="fa-solid fa-quote-left text-light"></i></span>
                                                <img src="{{ asset('template/img/demos/accounting-2/generic/' . $testimonial['image']) }}" loading="lazy" class="img-fluid p-relative z-index-2 rounded-circle" width="260" alt="">
                                            </span>
                                        </div>
                                        <div class="col-lg-8 text-start ps-4">
                                            <p class="mb-3 custom-font-tertiary text-5 line-height-9">{{ $testimonial['text'] }}</p>
                                            <strong class="pt-4 text-dark text-4 font-weight-semi-bold">{{ $testimonial['author'] }}</strong>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- FAQ Section - Comentado: FAQs corporativos removidos según especificaciones --}}
    {{--
    <div class="container pt-5 pb-3 mt-3">
        <div class="row">
            <div class="col">
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                    <span class="d-inline-flex py-1 px-2">{{ $welcome('faq_badge') }}</span>
                </span>
                <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ __('Preguntas Frecuentes') }}</h2>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col">
                <div class="toggle toggle-minimal toggle-faqs toggle-dark mt-0 mb-4" data-plugin-toggle="">
                    @php
                        $faqs = [
                            [
                                'question' => $welcome('faq_1_question'),
                                'answer' => $welcome('faq_1_answer')
                            ],
                            [
                                'question' => $welcome('faq_2_question'),
                                'answer' => $welcome('faq_2_answer')
                            ],
                            [
                                'question' => $welcome('faq_3_question'),
                                'answer' => $welcome('faq_3_answer')
                            ],
                            [
                                'question' => $welcome('faq_4_question'),
                                'answer' => $welcome('faq_4_answer')
                            ],
                            [
                                'question' => $welcome('faq_5_question'),
                                'answer' => $welcome('faq_5_answer')
                            ]
                        ];
                    @endphp
                    @foreach($faqs as $faq)
                        <section class="toggle">
                            <a class="toggle-title text-4 text-dark">{{ $faq['question'] }}</a>
                            <div class="toggle-content">
                                <p class="mb-0">{{ $faq['answer'] }}</p>
                            </div>
                        </section>
                    @endforeach
                </div>
                <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium py-3 text-2-5 btn-swap-1 px-5" data-clone-element="1">
                    <span>{{ __('Contactame') }}</span>
                </a>
            </div>
        </div>
    </div>
    --}}

    {{-- ====== LATEST CONTENT — Lo más reciente ====== --}}
    @if(is_module_active('blog') && isset($featuredPosts) && $featuredPosts->count() > 0)
    <div class="container py-5">
        <div class="row mb-4 align-items-end">
            <div class="col-lg-8 text-center text-lg-start">
                <span class="badge rounded-pill text-uppercase font-weight-semibold px-3 py-2" style="background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-25); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                    <span class="d-inline-flex py-1 px-2">{{ $welcome('blog_badge') }}</span>
                </span>
                <h2 class="font-weight-bold line-height-2 mb-0 mt-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">{{ $welcome('blog_title') }}</h2>
            </div>
            <div class="col-lg-4 text-center text-lg-end mt-3 mt-lg-0">
                <a href="{{ route('blog.index') }}" class="btn btn-outline-primary btn-rounded font-weight-bold px-4 py-2" style="border-radius: 50px !important;">
                    {{ __('Ver todo') }} <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        </div>
        <div class="owl-carousel owl-theme blog-latest-content-owl" data-plugin-options="{'responsive': {'0': {'items': 1, 'margin': 18}, '576': {'items': 2, 'margin': 22}, '992': {'items': 3, 'margin': 28}}, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 0, 'autoHeight': true}">
            @foreach($featuredPosts->take(6) as $post)
                <div class="blog-latest-content-owl-item">
                    <article class="blog-card border-radius-2" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                        <div style="border-radius: var(--border-radius2x) var(--border-radius2x) 0 0;">
                            @include('modules.blog.frontend.partials.homepage-post-media', [
                                'post' => $post,
                                'mediaMinHeight' => '240px',
                                'imageClass' => '',
                            ])
                        </div>
                        <div class="card-body p-4 d-flex flex-column">
                            <div class="d-flex align-items-center mb-2">
                                @if($post->category)
                                    <span class="badge rounded-pill font-weight-semibold text-1 px-2 py-1" style="color: var(--primary); background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">{{ $post->category->name }}</span>
                                @endif
                                <span class="text-2 ms-auto" style="color: rgba(255, 255, 255, 0.55);">{{ $post->created_at->format('d M Y') }}</span>
                            </div>
                            <h4 class="card-title mb-2 font-weight-bold flex-grow-1" style="color: var(--light); font-size: 1.1rem; line-height: 1.4;">
                                <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none" style="color: var(--light);">{{ $post->title }}</a>
                            </h4>
                            <p class="text-3 mb-3" style="color: rgba(255, 255, 255, 0.7); line-height: 1.6;">{{ Str::limit($post->description ?? strip_tags($post->content ?? ''), 80) }}</p>
                            <div class="mt-auto">
                                <a href="{{ route('blog.post', $post->slug) }}" class="btn btn-outline-primary btn-sm rounded-pill">{{ __('Leer más') }}</a>
                            </div>
                        </div>
                    </article>
                </div>
            @endforeach
        </div>

        {{-- Categorías como pills inline --}}
        @php
            $blogCategories = $blogCategories ?? collect();
        @endphp
        @if($blogCategories->count() > 0)
        <div class="d-flex flex-wrap gap-2 mt-3">
            @foreach($blogCategories as $blogCat)
                <a href="{{ route('blog.category', $blogCat->slug) }}" class="btn btn-sm rounded-pill font-weight-medium" style="background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.15);">{{ $blogCat->name }} ({{ $blogCat->posts_count }})</a>
            @endforeach
        </div>
        @endif
        <style>
            .blog-latest-content-owl .owl-stage { display: flex; align-items: flex-start; }
            .blog-latest-content-owl .owl-item { display: flex; align-items: flex-start; height: auto !important; }
            .blog-latest-content-owl .blog-latest-content-owl-item { margin-right: 1.25rem; width: 100%; }
        </style>
    </div>
    @endif

    {{-- ====== GALLERY — Perspectiva visual ====== --}}
    @if(is_module_active('gallery') && isset($galleryImages) && $galleryImages->count() > 0)

    {{-- Lightbox fullscreen (mismo que /gallery) --}}
    <div id="photographyLightbox" class="mfp-hide">
        <div class="thumb-gallery">
            <div class="owl-carousel owl-theme manual thumb-gallery-detail" id="thumbGalleryDetail">
                @foreach($galleryImages->take(6) as $image)
                    @php $imgUrl = filter_var($image->img, FILTER_VALIDATE_URL) ? $image->img : asset($image->img); @endphp
                    <div>
                        <span class="img-thumbnail d-block">
                            <img alt="{{ $image->title ?? '' }}" src="{{ $imgUrl }}" class="img-fluid">
                        </span>
                    </div>
                @endforeach
            </div>
            <div class="owl-carousel owl-theme manual thumb-gallery-thumbs show-thumbs mt" id="thumbGalleryThumbs">
                @foreach($galleryImages->take(6) as $image)
                    @php $imgUrl = filter_var($image->img, FILTER_VALIDATE_URL) ? $image->img : asset($image->img); @endphp
                    <div>
                        <span class="img-thumbnail d-block cur-pointer">
                            <img alt="{{ $image->title ?? '' }}" src="{{ $imgUrl }}">
                        </span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="container py-5">
        <div class="row mb-4 align-items-end">
            <div class="col-lg-8 text-center text-lg-start">
                <span class="badge rounded-pill text-uppercase font-weight-semibold px-3 py-2" style="background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-25); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                    <span class="d-inline-flex py-1 px-2">{{ config('site.modules.gallery.page_header.title', 'Perspectiva') }}</span>
                </span>
                <h2 class="font-weight-bold line-height-2 mb-0 mt-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">{{ config('site.welcome.gallery_heading', config('site.modules.gallery.page_header.title', __('Galería'))) }}</h2>
            </div>
            <div class="col-lg-4 text-center text-lg-end mt-3 mt-lg-0">
                <a href="{{ route('gallery') }}" class="btn btn-outline-primary btn-rounded font-weight-bold px-4 py-2" style="border-radius: 50px !important;">
                    {{ __('Ver galería') }} <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        </div>
        <div class="row g-3">
            @foreach($galleryImages->take(6) as $index => $image)
                @php $imgUrl = filter_var($image->img, FILTER_VALIDATE_URL) ? $image->img : asset($image->img); @endphp
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="portfolio-grid-item">
                        <a href="#photographyLightbox" class="popup-with-move-anim d-block overflow-hidden welcome-gallery-item" style="border-radius: var(--border-radius2x); aspect-ratio: 4/3; position: relative; cursor: pointer;">
                            <img src="{{ $imgUrl }}" alt="{{ $image->title ?? '' }}" class="w-100 h-100" style="object-fit: cover; transition: transform 0.4s ease;" loading="lazy" onmouseover="this.style.transform='scale(1.08)'" onmouseout="this.style.transform='scale(1)'">
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ====== PROJECTS — Lo que construí ====== --}}
    @if(is_module_active('projects') && isset($featuredProjects) && $featuredProjects->count() > 0)
    <div class="container py-5">
        <div class="row mb-4 align-items-end">
            <div class="col-lg-8 text-center text-lg-start">
                <span class="badge rounded-pill text-uppercase font-weight-semibold px-3 py-2" style="background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-25); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                    <span class="d-inline-flex py-1 px-2">{{ config('site.modules.projects.page_header.title', 'Proyectos') }}</span>
                </span>
                <h2 class="font-weight-bold line-height-2 mb-0 mt-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; color: var(--light) !important; letter-spacing: -0.03em;">{{ config('site.welcome.projects_heading', config('site.modules.projects.page_header.title', __('Proyectos'))) }}</h2>
            </div>
            <div class="col-lg-4 text-center text-lg-end mt-3 mt-lg-0">
                <a href="{{ route('frontend.projects.portfolio') }}" class="btn btn-outline-primary btn-rounded font-weight-bold px-4 py-2" style="border-radius: 50px !important;">
                    {{ __('Ver portfolio') }} <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        </div>
        <div class="owl-carousel owl-theme" data-plugin-options="{'responsive': {'0': {'items': 1, 'margin': 15}, '576': {'items': 2, 'margin': 20}, '992': {'items': 3, 'margin': 25}}, 'loop': false, 'nav': true, 'dots': false}">
            @foreach($featuredProjects->take(6) as $project)
                <div>
                    <article class="blog-card border-radius-2 h-100" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                        @if($project->image)
                            <div class="card-img-top" style="background-image: url('{{ filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image) }}'); background-size: cover; background-position: center; height: 200px; border-radius: var(--border-radius2x) var(--border-radius2x) 0 0;"></div>
                        @else
                            <div class="card-img-top d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%); height: 200px; border-radius: var(--border-radius2x) var(--border-radius2x) 0 0;">
                                <span class="font-weight-extra-bold" style="font-size: 3rem; color: var(--primary); opacity: 0.15;">{{ strtoupper(substr($project->title, 0, 2)) }}</span>
                            </div>
                        @endif
                        <div class="card-body p-4">
                            <h4 class="card-title mb-2 font-weight-bold" style="color: var(--light);">{{ $project->title }}</h4>
                            <p class="text-3 mb-0" style="color: rgba(255, 255, 255, 0.7);">{{ Str::limit(strip_tags($project->description ?? ''), 80) }}</p>
                        </div>
                    </article>
                </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ====== TAGLINE ====== --}}
    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
        <div class="text-center py-5 my-5 custom-feather-shadow">
            <span class="custom-el-9" style="background-color: transparent !important; box-shadow: none !important;">
                <strong style="color: var(--light) !important; font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(1.4rem, 3vw, 2.2rem); text-shadow: 0 0 15px var(--primary-rgba-25); display: inline-block;">{{ $welcome('tagline') }}</strong>
            </span>
        </div>
    </div>

    {{-- ====== CTA FINAL — Build What Matters ====== --}}
    <div class="container pt-5 pb-5 mt-3">
        <div class="row">
            <div class="col text-center">
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                    <p class="text-4 line-height-7 mb-4">{{ $welcome('closure_text') }}</p>
                    <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium px-4 py-3 text-2-5 btn-swap-1" data-clone-element="1">
                        <span>{{ $welcome('closure_cta') }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection