{{-- Solution card — glassmorphism card with poster image and optional hover-video --}}
@props([
'image' => '',
'video' => null,
'title' => '',
'description' => '',
'to' => '#',
])

<a href="{{ $to }}"
    class="group block bg-glassmorphism rounded-lg overflow-hidden transition-all duration-300 hover:border-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
    @if($video) data-solution-card @endif>
    {{-- Image/Video container --}}
    <div class="relative aspect-video overflow-hidden">
        {{-- Static poster image (always visible, progressive fallback) --}}
        <img src="{{ asset($image) }}"
            alt="{{ strip_tags($title) }}"
            class="w-full h-full object-cover"
            loading="lazy">

        @if($video)
        {{-- Video overlay — hidden by default, shown on hover via JS --}}
        <video class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300 pointer-events-none"
            muted
            playsinline
            preload="none"
            data-hover-video>
            <source src="{{ asset($video) }}" type="video/mp4">
        </video>
        @endif
    </div>

    {{-- Content --}}
    <div class="p-4">
        <h3 class="text-lg font-semibold mt-1">{!! $title !!}</h3>
        @if($description)
        <p class="text-sm text-muted-foreground mt-1">{!! $description !!}</p>
        @endif
    </div>
</a>

@once
@push('scripts')
<script>
    // Solution card hover-video behavior — progressive enhancement
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('[data-hover-video]').forEach(function(video) {
            var card = video.closest('[data-solution-card]');
            if (!card) return;

            card.addEventListener('mouseenter', function() {
                video.play().catch(function() {});
                video.style.opacity = '1';
            });

            card.addEventListener('mouseleave', function() {
                video.pause();
                video.currentTime = 0;
                video.style.opacity = '0';
            });
        });
    });
</script>
@endpush
@endonce