@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp
<!-- Stats Section -->
<section class="py-16 bg-[#eeffff] relative">
    <div class="container mx-auto px-4 relative">
        <h2 class="text-3xl font-bold text-center text-[#007e7f] mb-12">Las cifras que nos respaldan</h2>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-white text-center auto-rows-fr">
            @php
                $numeralia = json_decode(json_encode(setting('site.numeralia')), true) ?? [];
            @endphp

            @foreach ($numeralia as $index => $item)
                @php
                    $path = storage_path('app/public/' . $item['icono']);
                    $svg = file_exists($path) ? file_get_contents($path) : null;

                    if ($svg) {
                        $svg = preg_replace('/<svg([^>]*)>/', '<svg$1 class="h-20 md:h-[120px] fill-[#eeffff]">', $svg);
                    }
                @endphp

                <div class="bg-[#007e7f] rounded-xl p-2 md:p-6 flex flex-col items-center justify-center h-full transition-transform hover:-translate-y-2 cursor-default"
                    data-aos="fade-up" data-aos-delay="{{ $index * 100 }}" data-aos-duration="700"
                    data-aos-easing="ease-out-cubic">

                    {!! $svg !!}

                    <div class="text-3xl font-bold mb-2">
                        <span class="counter" data-count="{{ $item['cantidad'] }}">0</span>
                    </div>

                    <div class="text-xs sm:text-sm">
                        {{ $item['titulo'] }}
                    </div>

                </div>
            @endforeach
            {{-- <!-- Stat 1 -->
            <div
                class="bg-[#007e7f] rounded-xl p-2 md:p-6 flex flex-col items-center justify-center h-full transition-transform hover:-translate-y-2 cursor-default"
                data-aos="fade-up"
                data-aos-delay="0"
                data-aos-duration="700"
                data-aos-easing="ease-out-cubic"
            >
                <x-local-enfermera class="h-20 md:h-[120px] fill-[#eeffff]" />
                <div class="text-3xl font-bold mb-2">
                    <span class="counter" data-count="3000">0</span>
                </div>
                <div class="text-xs sm:text-sm">alumnos egresados</div>
            </div>

            <!-- Stat 2 -->
            <div
                class="bg-[#007e7f] rounded-xl p-2 md:p-6 flex flex-col items-center justify-center h-full transition-transform hover:-translate-y-2 cursor-default"
                data-aos="fade-up"
                data-aos-delay="150"
                data-aos-duration="700"
            >
                <x-local-colegio class="h-20 md:h-[120px] fill-[#eeffff]" />
                <div class="text-3xl font-bold mb-2">
                    <span class="counter" data-count="35">0</span>
                </div>
                <div class="text-xs sm:text-sm">años de experiencia</div>
            </div>

            <!-- Stat 3 -->
            <div
                class="bg-[#007e7f] rounded-xl p-2 md:p-6 flex flex-col items-center justify-center h-full transition-transform hover:-translate-y-2 cursor-default"
                data-aos="fade-up"
                data-aos-delay="300"
                data-aos-duration="700"
            >
                <x-local-investigacion class="h-20 md:h-[120px] fill-[#eeffff]" />
                <div class="text-3xl font-bold mb-2">
                    <span class="counter" data-count="6">0</span>
                </div>
                <div class="text-xs sm:text-sm">Laboratorios modernos</div>
            </div>

            <!-- Stat 4 -->
            <div
                class="bg-[#007e7f] rounded-xl p-2 md:p-6 flex flex-col items-center justify-center h-full transition-transform hover:-translate-y-2 cursor-default"
                data-aos="fade-up"
                data-aos-delay="450"
                data-aos-duration="700"
            >
                <x-local-feria-de-trabajo class="h-20 md:h-[120px] fill-[#eeffff]" />
                <div class="text-3xl font-bold mb-2">
                    <span class="counter" data-count="6">0</span>
                </div>
                <div class="text-xs sm:text-sm">
                    meses para inserción<br>laboral de egresados
                </div>
            </div> --}}

        </div>

    </div>
</section>