@props(['images'])
@if($images && $images->isNotEmpty())
<div class="tech-panel p-6 mb-6">
    <div class="flex items-center justify-between gap-3 mb-4">
        <div>
            <h3 class="text-lg font-semibold" style="color:var(--tech-text)">Afbeeldingen</h3>
            <p class="text-xs mt-1" style="color:var(--tech-text-muted)">{{ $images->count() }} afbeelding{{ $images->count() === 1 ? '' : 'en' }}</p>
        </div>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        @foreach($images as $image)
            <a href="{{ $image->url() }}" target="_blank" rel="noopener" class="group block rounded-xl overflow-hidden border" style="border-color:var(--tech-border);background:var(--tech-surface-soft)">
                <img src="{{ $image->url() }}" alt="{{ $image->original_name }}" loading="lazy" class="w-full aspect-[4/3] object-cover transition duration-200 group-hover:scale-[1.02]">
                <div class="px-3 py-2 text-xs truncate" style="color:var(--tech-text-soft)" title="{{ $image->original_name }}">{{ $image->original_name }}</div>
            </a>
        @endforeach
    </div>
</div>
@endif