@props([
    'title',
    'subtitle' => null,
    'stats' => [],
])

<section class="py-24 bg-gray-50">

    <div class="max-w-7xl mx-auto px-6">

        <div class="text-center mb-16">

            <h2 class="text-4xl font-bold">

                {{ $title ?? 'Our Impact' }}

            </h2>

            @if($subtitle)

                <p class="mt-4 text-lg text-gray-600">

                    {{ $subtitle ?? '' }}

                </p>

            @endif

        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 text-center">

            @foreach($stats as $stat)

                <div class="bg-white p-8 rounded-2xl shadow-sm">

                    <h3 class="text-5xl font-bold text-green-700">

                        {{ $stat['value'] }}

                    </h3>

                    <p class="mt-3">

                        {{ $stat['label'] }}

                    </p>

                </div>

            @endforeach

        </div>

    </div>

</section>