@props([
    'project',
    'index' => null,     // project number shown in the technical corner label
    'featured' => false, // wide editorial treatment
])

{{--
    Project card (SOW 4.3). Architectural editorial treatment: image, project
    number, sector, then the technical metadata an engineering audience scans for
    — client, location, duration, status.
--}}
<article @class([
    'card-interactive group flex h-full flex-col',
    'sm:col-span-2 sm:flex-row' => $featured,
]) data-reveal-child>

    <a href="{{ route('projects.show', $project) }}"
       @class(['relative block overflow-hidden bg-surface-muted', 'sm:w-1/2 sm:shrink-0' => $featured])
       tabindex="-1" aria-hidden="true">

        <x-image :src="$project->thumbnail" :alt="$project->title"
                 :ratio="$featured ? '4/3' : '16/10'" rounded="rounded-none" zoom
                 class="{{ $featured ? 'h-full' : '' }}">

            @if ($index !== null)
                <span class="absolute left-4 top-4 font-mono text-[0.625rem] font-medium tracking-[0.18em] text-white/85">
                    {{ str_pad((string) $index, 2, '0', STR_PAD_LEFT) }}
                </span>
            @endif

            @if ($project->is_flagship)
                <span class="absolute right-4 top-4 pill bg-white/95 text-primary">{{ __('Flagship') }}</span>
            @endif
        </x-image>
    </a>

    <div class="flex flex-1 flex-col p-6">
        <div class="mb-3 flex flex-wrap items-center gap-2">
            @if ($project->sector)
                <a href="{{ route('sectors.show', $project->sector) }}" class="eyebrow-plain hover:underline">
                    {{ $project->sector->name }}
                </a>
                <span class="text-text-muted/40" aria-hidden="true">·</span>
            @endif

            <span @class([
                'pill',
                'pill-warning' => $project->status === \App\Models\Project::STATUS_ONGOING,
                'pill-success' => $project->status === \App\Models\Project::STATUS_COMPLETED,
            ])>
                <x-icon :name="$project->status === \App\Models\Project::STATUS_COMPLETED ? 'check-circle' : 'clock'" class="size-3" />
                {{ $project->statusLabel() }}
            </span>
        </div>

        <h3 @class(['font-display font-semibold leading-snug text-text', 'text-title' => $featured, 'text-lg' => ! $featured])>
            <a href="{{ route('projects.show', $project) }}" class="transition group-hover:text-text-brand">
                {{ $project->title }}
                <span class="absolute inset-0" aria-hidden="true"></span>
            </a>
        </h3>

        @if ($project->short_description)
            <p class="mt-2.5 line-clamp-2 text-sm leading-relaxed text-text-secondary">{{ $project->short_description }}</p>
        @endif

        <dl class="mt-auto grid grid-cols-1 gap-x-4 gap-y-3 border-t border-border pt-4 text-sm xs:grid-cols-2">
            @foreach ([
                __('Client') => $project->client_name ?: $project->funding_agency,
                __('Location') => $project->locationLabel(),
                __('Duration') => $project->durationLabel(),
                __('Sector') => $featured ? $project->sector?->name : null,
            ] as $label => $value)
                @if (filled($value))
                    <div class="min-w-0">
                        <dt class="meta-label">{{ $label }}</dt>
                        <dd class="mt-0.5 truncate text-text-secondary" title="{{ $value }}">{{ $value }}</dd>
                    </div>
                @endif
            @endforeach
        </dl>
    </div>
</article>