{{--
    Feature Grid — a grid of icon + title + description items
    Props:
      $features  - array of ['icon', 'title', 'description']
      $cols      - '2' | '3' (default '3')
      $dark      - bool, if true renders on dark background
--}}
@props([
    'features' => [],
    'cols'     => '3',
    'dark'     => false,
])

<div class="grid grid-cols-1 sm:grid-cols-2 {{ $cols === '2' ? 'lg:grid-cols-2' : 'lg:grid-cols-3' }} gap-6">
    @foreach($features as $feature)
    <div class="flex items-start gap-4 p-5 rounded-xl3
                {{ $dark ? 'bg-emerald-800/40 border border-emerald-700/40' : 'bg-white border border-graphite-100 shadow-card' }}
                transition-all duration-300 hover:shadow-card-hover"
         data-animate>
        <div class="flex-shrink-0 w-10 h-10 rounded-xl
                    {{ $dark ? 'bg-emerald-700/50 text-teal-300' : 'bg-teal-50 text-teal-600' }}
                    flex items-center justify-center">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                @include('components.icons.' . ($feature['icon'] ?? 'check'))
            </svg>
        </div>
        <div>
            <h3 class="font-semibold text-sm mb-1.5 {{ $dark ? 'text-white' : 'text-graphite-900' }}">
                {{ $feature['title'] }}
            </h3>
            <p class="text-sm leading-relaxed {{ $dark ? 'text-emerald-200' : 'text-graphite-500' }}">
                {{ $feature['description'] }}
            </p>
        </div>
    </div>
    @endforeach
</div>