@php
    $steps = [
        [
            'number' => '1',
            'title' => 'Create your account',
            'description' => 'Sign up in under a minute — just your name, phone number and email. No paperwork to get started.',
        ],
        [
            'number' => '2',
            'title' => 'Fund your wallet',
            'description' => 'Top up by card or bank transfer, or send money straight to your own dedicated account number, anytime.',
        ],
        [
            'number' => '3',
            'title' => 'Buy instantly',
            'description' => 'Airtime, data, electricity or cable TV — pick a service, confirm, and it lands in seconds.',
        ],
    ];
@endphp

<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8" aria-labelledby="how-it-works-heading">
    <div class="mx-auto max-w-2xl text-center">
        <h2 id="how-it-works-heading" class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
            How it works
        </h2>
        <p class="mt-4 text-lg text-slate-600 dark:text-slate-300">Three steps between you and your next top-up.</p>
    </div>

    <div class="mt-16 grid gap-10 sm:grid-cols-3">
        @foreach ($steps as $step)
            <div class="relative text-center">
                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-600 text-xl font-bold text-white shadow-brand-glow">
                    {{ $step['number'] }}
                </div>
                <h3 class="mt-6 text-lg font-semibold text-slate-900 dark:text-white">{{ $step['title'] }}</h3>
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">{{ $step['description'] }}</p>
            </div>
        @endforeach
    </div>
</section>