@php
    $steps = [
        [
            'icon' => 'users',
            'title' => 'Create Profiles',
            'description' => 'Organizations and individuals can create profiles for elderly people in need, sharing their stories and specific needs.',
        ],
        [
            'icon' => 'shield-check',
            'title' => 'Admin Approval',
            'description' => 'Our admin team reviews each profile to ensure the information is accurate and the needs are legitimate.',
        ],
        [
            'icon' => 'credit-card',
            'title' => 'Receive Donations',
            'description' => 'Donors can choose to support specific elderly individuals or contribute to our global fund for all elderly people.',
        ],
        [
            'icon' => 'hand-heart',
            'title' => 'Provide Support',
            'description' => '100% of donations go directly to supporting the elderly, providing them with care, resources, and dignity.',
        ],
    ];
@endphp

<section class="py-16 md:py-24">
    <div class="container mx-auto px-4 md:px-6">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl font-bold tracking-tight">How It Works</h2>
            <p class="text-muted-foreground mt-4">
                Our platform connects donors with elderly individuals in need through a transparent, secure process.
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($steps as $index => $step)
                <div
                    class="flex flex-col items-center text-center p-6 rounded-lg border bg-white hover:shadow-md transition-all animate-fade-in-up"
                    style="animation-delay: {{ $index * 0.1 }}s"
                >
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        @if($step['icon'] === 'users')
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                                <circle cx="9" cy="7" r="4" />
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                            </svg>
                        @elseif($step['icon'] === 'shield-check')
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                                <path d="m9 12 2 2 4-4" />
                            </svg>
                        @elseif($step['icon'] === 'credit-card')
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect width="20" height="14" x="2" y="5" rx="2" />
                                <line x1="2" x2="22" y1="10" y2="10" />
                            </svg>
                        @elseif($step['icon'] === 'hand-heart')
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M11 14c-1.5 0-3-1.5-3-3s1-2 2-2 2 1 2 2" />
                                <path d="M10 11V9.5a3.5 3.5 0 0 1 7 0V11" />
                                <path d="M17 11v2a3 3 0 0 1-3 3v0" />
                                <path d="M14 16v2a3 3 0 0 1-6 0v-3" />
                                <path d="M7 10V8a5 5 0 0 1 10 0v2" />
                                <path d="M19.5 12.572 12 16.5l-2.896-1.448" />
                                <path d="m17.793 14.5.924.462c1.692.846 2.38 1.189 2.38 2.038 0 .85-.688 1.193-2.38 2.038l-5.462 2.73c-1.154.578-1.732.866-2.38.866-.647 0-1.225-.288-2.379-.865l-5.462-2.73C1.693 18.193 1 17.85 1 17c0-.85.692-1.193 2.383-2.038l.923-.462" />
                            </svg>
                        @endif
                    </div>
                    <h3 class="text-xl font-semibold mb-2">{{ $step['title'] }}</h3>
                    <p class="text-gray-600">{{ $step['description'] }}</p>
                </div>
            @endforeach
        </div>
        
        <div class="mt-12 text-center">
            <a href="{{ route('how-it-works') }}"
               class="inline-flex items-center justify-center rounded-full border border-input bg-background hover:bg-accent hover:text-accent-foreground px-8 py-3 text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
               data-analytics="learn-more-process">
                Learn more about our process
                <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M5 12h14" />
                    <path d="m12 5 7 7-7 7" />
                </svg>
            </a>
        </div>
    </div>
</section>