@props(['project'])

@php
    $industry = collect(config('brokam.industries'))->firstWhere('slug', $project->industry);
    $cardImage = $industry['image'] ?? 'images/integration.jpg';
@endphp

<a href="{{ route('projects.show', $project) }}" class="card group overflow-hidden flex flex-col">
    {{-- Project photo --}}
    <div class="media media-zoom aspect-[16/10] scrim">
        <img src="{{ asset($cardImage) }}" alt="{{ $project->title }}" loading="lazy">
        <span class="absolute z-[2] top-3 left-3 font-mono text-[10px] tracking-wider text-white border border-white/30 bg-white/10 backdrop-blur px-2 py-0.5 rounded">{{ $project->year }}</span>
        @if ($industry)
            <p class="absolute z-[2] bottom-3 left-4 font-mono text-[11px] uppercase tracking-wider text-white/90">{{ $industry['name'] }}</p>
        @endif
    </div>
    <div class="p-5 flex flex-col flex-1">
        <h3 class="text-base font-semibold text-slate-ink group-hover:text-brand-600 transition">{{ $project->title }}</h3>
        <p class="mt-2 text-sm text-slate-500 leading-relaxed flex-1">{{ \Illuminate\Support\Str::limit($project->summary, 110) }}</p>
        <span class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-600">
            Case study <x-icon name="arrow" class="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
        </span>
    </div>
</a>