{{-- Features Grid Component --}}
@php
    $features = $component['content']['features'] ?? [];

    // Debug logging
    if (empty($features)) {
        \Log::warning('Features Grid has no features', [
            'component_type' => $component['type'] ?? 'unknown',
            'content_keys' => array_keys($component['content'] ?? []),
            'full_content' => $component['content'] ?? []
        ]);
    }
@endphp

@if(!empty($features))
<div class="row g-4">
    @foreach($features as $feature)
        <div class="col-md-4">
            <div class="feature-card text-center h-100">
                @if(!empty($feature['icon']))
                    <div class="feature-icon mb-3">
                        <i class="{{ $feature['icon'] }}" style="font-size: 48px; color: var(--primary-color);"></i>
                    </div>
                @endif

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

                @if(!empty($feature['description']))
                    <p class="text-muted" style="font-family: var(--body-font);">
                        {{ $feature['description'] }}
                    </p>
                @endif
            </div>
        </div>
    @endforeach
</div>
@else
<div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle"></i>
    No features configured. Please edit this component to add features.
</div>
@endif

<style>
    .feature-card {
        padding: 2rem;
        border-radius: 8px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .feature-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>