{{-- Pilares Section (reemplaza tax-solutions del demo original) --}}
<div class="container pt-5 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">{{ config('site.welcome.pillars_badge', 'Lo Que Hago') }}</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">
                    {{ config('site.welcome.pillars_title', 'Crear · Compartir · Conectar') }}
                </h2>
            </div>
            <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                <p>{{ config('site.welcome.pillars_description', 'Tres pilares que se potencian mutuamente. Todo conectado en un mismo espacio.') }}</p>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        @php
            $pillars = [
                [
                    'title' => config('site.welcome.pillar_1_title', 'Crear'),
                    'description' => config('site.welcome.pillar_1_description', 'Lo que vengo construyendo. Cada proyecto entregado, cada colaboración, cada idea que se hizo realidad.'),
                    'image' => 'generic-1.png',
                    'color' => 'quaternary',
                    'delay' => 0,
                    'link' => is_module_active('projects') && Route::has('frontend.projects.index') ? route('frontend.projects.index') : '#'
                ],
                [
                    'title' => config('site.welcome.pillar_2_title', 'Compartir'),
                    'description' => config('site.welcome.pillar_2_description', 'Lo que aprendo lo escribo. Notas, reflexiones y procesos detrás de cada proyecto.'),
                    'image' => 'generic-2.png',
                    'color' => 'primary',
                    'delay' => 300,
                    'link' => is_module_active('blog') && Route::has('blog.index') ? route('blog.index') : '#'
                ],
                [
                    'title' => config('site.welcome.pillar_3_title', 'Conectar'),
                    'description' => config('site.welcome.pillar_3_description', 'Construir redes profesionales sólidas. Las mejores oportunidades surgen de relaciones de confianza.'),
                    'image' => 'generic-3.png',
                    'color' => 'secondary',
                    'delay' => 600,
                    'link' => is_module_active('gallery') && Route::has('gallery') ? route('gallery') : '#'
                ]
            ];
        @endphp
        @foreach($pillars as $pillar)
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $pillar['delay'] }}">
                    <div class="card custom-card-1 border-radius-2 bg-color-light box-shadow-1 box-shadow-1-hover">
                        <div class="card-body overflow-hidden">
                            <div class="custom-card-1-curves">
                                <img class="img-fluid" src="{{ asset('template/img/demos/accounting-2/svg/curves-2.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-{{ $pillar['color'] }}'}" >
                            </div>
                            <span class="rounded-circle bg-color-{{ $pillar['color'] }} d-inline-block overflow-hidden">
                                <img src="{{ asset('template/img/demos/accounting-2/generic/' . $pillar['image']) }}" loading="lazy" class="img-fluid p-relative z-index-2 rounded-circle" width="100" alt="">
                            </span>
                            <h4 class="my-2 text-5-5 pt-1 pb-2">{{ $pillar['title'] }}</h4>
                            <p class="card-text text-3-5">{{ $pillar['description'] }}</p>
                            <div class="d-grid pb-3">
                                <a href="{{ $pillar['link'] }}" class="btn btn-transparent border-0 text-start btn-xl btn-with-arrow-solid btn-with-arrow-sm p-0">
                                    <strong class="d-inline-flex font-weight-semibold text-primary text-decoration-underline me-3 text-2-5">{{ __('Ver más') }}</strong>
                                    <span class="bg-primary box-shadow-6 right-0"><i class="fa-solid fa-arrow-right text-light text-1"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Stats --}}
    <div class="row counters justify-content-center m-5">
        @php
            $counters = [
                ['value' => '45', 'label' => 'proyectos entregados', 'delay' => 0],
                ['value' => '10', 'label' => 'años emprendiendo', 'delay' => 200],
                ['value' => '8', 'label' => 'deportes activos', '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-dark text-13 n-ls-5 p-0 me-4" data-to="{{ $counter['value'] }}" data-append="+"></span>
                    </p>
                    <span class="text-4 n-ls-1 pt-2">{{ $counter['label'] }}</span>
                </div>
            </div>
        @endforeach
    </div>
</div>