@props(['data' => []])

<section class="section-padding bg-[#f8fafc]">
    <div class="container-page">
        <div class="text-center">
            <span class="home-eyebrow">Process</span>
            <h2 class="section-heading mt-6">{{ $data['title'] ?? 'How it works' }}</h2>
        </div>
        <div class="mt-8 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
            @foreach($data['steps'] ?? [] as $index => $step)
                <div class="premium-card p-6 text-center">
                    <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-accent text-lg font-bold text-white shadow-lg shadow-primary/20">
                        {{ $step['number'] ?? str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                    </div>
                    <h3 class="mt-5 font-bold text-secondary">{{ $step['title'] ?? '' }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-muted">{{ $step['description'] ?? $step['text'] ?? '' }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>