@props(['name', 'description', 'icon', 'image' => null])

<div data-reveal class="group overflow-hidden rounded-2xl border border-brand-100 bg-white shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-900/10">
    @if ($image)
        <div class="relative h-44 overflow-hidden">
            <img
                src="{{ asset($image) }}"
                alt="{{ $name }}"
                loading="lazy"
                class="h-full w-full object-cover transition duration-500 group-hover:scale-110"
            />
            <div class="absolute inset-0 bg-gradient-to-t from-brand-950/50 via-brand-950/0 to-transparent"></div>
            <span class="absolute bottom-3 left-3 flex h-11 w-11 items-center justify-center rounded-full bg-white text-brand-600 shadow-md">
                <x-icon :name="$icon" class="h-5 w-5" />
            </span>
        </div>
    @else
        <span class="mt-6 ml-6 inline-flex h-12 w-12 items-center justify-center rounded-full bg-brand-500 text-white transition group-hover:bg-brand-600">
            <x-icon :name="$icon" class="h-6 w-6" />
        </span>
    @endif

    <div class="p-6">
        <h3 class="text-lg font-semibold text-brand-950">{{ $name }}</h3>
        <p class="mt-2 text-sm leading-relaxed text-slate-600">{{ $description }}</p>
    </div>
</div>