{{--
    Reusable project card (PRD §10.1): name, category, role, short description, timeline, key contribution,
    outcome, tools, image, "View Case Study". Organisation shown only via OrganisationPresenter (PRD §31).
    `source` tags project_card_click by section (homepage / listing / related; PRD §29).
--}}
@props(['project', 'source' => 'listing', 'featured' => false, 'headingLevel' => 3])
@inject('ctaSettings', 'App\Domain\Site\Settings\CtaSettings')
@php
    $thumbnail = $project->getFirstMedia(\App\Domain\Media\MediaCollection::Thumbnail->value);
    $organisation = \App\Domain\Portfolio\Support\OrganisationPresenter::name($project);
    $url = route('projects.show', $project->slug);
@endphp
<x-card as="article" :interactive="true" :padded="false"
        {{ $attributes->class(['flex h-full flex-col overflow-hidden', 'shadow-[var(--shadow-card-hover)]' => $featured]) }}
        data-filter-item
        data-categories="{{ $project->categories->pluck('slug')->implode(' ') }}"
        data-tools="{{ $project->tools->pluck('slug')->implode(' ') }}">
    @if ($thumbnail)
        <x-media.image :media="$thumbnail" conversion="card" sizes="(min-width: 1024px) 380px, (min-width: 768px) 50vw, 100vw"
                       class="aspect-[16/10] w-full object-cover" />
    @endif
    <div class="flex flex-1 flex-col gap-3 p-6">
        <div class="flex flex-wrap items-center gap-2">
            @if ($featured)
                <x-tag tone="accent">{{ __('portfolio.ui.featured') }}</x-tag>
            @endif
            @foreach ($project->categories as $category)
                <x-tag>{{ $category->name }}</x-tag>
            @endforeach
        </div>
        <h{{ $headingLevel }} class="text-h3">
            <a href="{{ $url }}" class="text-heading no-underline after:absolute after:inset-0 hover:text-link-hover"
               data-track="project_card_click" data-track-props='{"project":"{{ $project->slug }}","source":"{{ $source }}"}'>{{ $project->title }}</a>
        </h{{ $headingLevel }}>
        <p class="text-sm text-muted">
            {{ collect([$project->role, $organisation, $project->timeline_label])->filter()->implode(' · ') }}
        </p>
        @if ($project->summary)
            <p>{{ $project->summary }}</p>
        @endif
        @if ($project->key_contribution || $project->outcome_summary)
            <dl class="space-y-1 text-sm">
                @if ($project->key_contribution)
                    <div><dt class="inline font-semibold">{{ __('portfolio.ui.key_contribution') }}:</dt> <dd class="inline">{{ $project->key_contribution }}</dd></div>
                @endif
                @if ($project->outcome_summary)
                    <div><dt class="inline font-semibold">{{ __('portfolio.ui.outcome') }}:</dt> <dd class="inline">{{ $project->outcome_summary }}</dd></div>
                @endif
            </dl>
        @endif
        @if ($project->tools->isNotEmpty())
            <ul class="mt-auto flex flex-wrap gap-2 pt-2" aria-label="{{ __('portfolio.ui.tools') }}">
                @foreach ($project->tools as $tool)
                    <li><x-tag class="!bg-transparent !px-2 border border-line text-muted">{{ $tool->name }}</x-tag></li>
                @endforeach
            </ul>
        @endif
        <span class="relative mt-2 inline-flex items-center gap-1 text-sm font-semibold text-link" aria-hidden="true">
            {{ $ctaSettings->view_case_study_label }} <x-icon name="heroicon-o-arrow-right" class="size-4" />
        </span>
    </div>
</x-card>