{{-- Service Cards Component --}}
@php
    $services = $component['content']['services'] ?? [];
@endphp

<div class="row g-4">
    @foreach($services as $service)
        <div class="col-md-4">
            <div class="service-card h-100">
                @if(!empty($service['image']))
                    <div class="service-image mb-3">
                        <img src="{{ $service['image'] }}" alt="{{ $service['title'] ?? '' }}" class="img-fluid rounded">
                    </div>
                @endif

                <div class="service-content">
                    @if(!empty($service['title']))
                        <h3 class="h4 mb-3" style="font-family: var(--heading-font);">
                            {{ $service['title'] }}
                        </h3>
                    @endif

                    @if(!empty($service['description']))
                        <p class="text-muted mb-3" style="font-family: var(--body-font);">
                            {{ $service['description'] }}
                        </p>
                    @endif

                    @if(!empty($service['link']))
                        <a href="{{ $service['link'] }}" class="btn btn-outline-primary btn-sm">
                            Learn More →
                        </a>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

<style>
    .service-card {
        background: #fff;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .service-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        transform: translateY(-5px);
    }

    .service-image img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .service-content {
        padding-top: 1rem;
    }
</style>