@props(['span' => 'col-span-1', 'rowSpan' => 'row-span-1', 'title', 'subtitle' => null])
<div 
    class="relative group rounded-3xl bg-app-surface border border-app-border p-8 lg:p-10 transition-all {{ $span }} {{ $rowSpan }} opacity-0 translate-y-10"
    x-data="{ x: 0, y: 0 }"
    x-on:mousemove="
        const rect = $el.getBoundingClientRect();
        x = $event.clientX - rect.left;
        y = $event.clientY - rect.top;
    "
    x-init="gsap.to($el, {
        scrollTrigger: { trigger: $el, start: 'top 85%' },
        opacity: 1,
        y: 0,
        duration: 0.8,
        ease: 'power3.out'
    })"
>
    <!-- Hover Spotlight -->
    <div class="pointer-events-none absolute -inset-px rounded-3xl opacity-0 transition duration-300 group-hover:opacity-100 mix-blend-screen"
        x-bind:style="`background: radial-gradient(600px circle at ${x}px ${y}px, rgba(236,72,153,0.1), transparent 40%);`">
    </div>

    <!-- Active Spotlight Glow inside border -->
    <div class="pointer-events-none absolute inset-0 rounded-3xl opacity-0 transition duration-300 group-hover:opacity-100"
        x-bind:style="`background: radial-gradient(400px circle at ${x}px ${y}px, rgba(255,255,255,0.06), transparent 40%);`">
    </div>

    <div class="relative z-10 flex flex-col h-full">
        @if(isset($icon))
            <div class="mb-4 text-pink-500 w-8 h-8">
                {{ $icon }}
            </div>
        @endif
        
        <h3 class="text-xl font-semibold text-white mb-2">{{ $title }}</h3>
        
        @if($subtitle)
            <p class="text-zinc-400 text-sm leading-relaxed mb-6">{{ $subtitle }}</p>
        @endif
        
        <div class="mt-auto relative w-full flex-grow flex flex-col justify-end">
            {{ $slot }}
        </div>
    </div>
</div>