@props([
    'sector',
    'count' => null,   // published project count, when the caller has it
])

{{--
    Sector card. Sectors are the site's primary taxonomy, so the card carries
    imagery, a technical one-liner and the live project count rather than being
    one of eight identical tiles.
--}}
<article class="card-interactive group relative flex h-full flex-col" data-reveal-child>
    <a href="{{ route('sectors.show', $sector) }}" tabindex="-1" aria-hidden="true">
        <x-image :src="$sector->thumbnail" :alt="$sector->name" ratio="16/10" rounded="rounded-none" zoom>
            <div class="scrim opacity-70"></div>

            <span class="absolute bottom-4 left-4 flex size-10 items-center justify-center rounded-lg bg-white/95 text-primary">
                @if ($sector->icon)
                    <img src="{{ asset_path($sector->icon) }}" alt="" class="size-5">
                @else
                    <x-icon name="grid" class="size-5" />
                @endif
            </span>
        </x-image>
    </a>

    <div class="flex flex-1 flex-col p-6">
        <h3 class="font-display text-lg font-semibold text-text">
            <a href="{{ route('sectors.show', $sector) }}" class="transition group-hover:text-text-brand">
                {{ $sector->name }}
                <span class="absolute inset-0" aria-hidden="true"></span>
            </a>
        </h3>

        @if ($sector->tagline)
            <p class="mt-1 text-sm font-medium text-text-brand">{{ $sector->tagline }}</p>
        @endif

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

        <div class="mt-auto flex items-center justify-between gap-4 border-t border-border pt-4">
            @if ($count !== null)
                <span class="meta-label">
                    {{ trans_choice(':count project|:count projects', $count, ['count' => $count]) }}
                </span>
            @else
                <span></span>
            @endif

            <span class="link-arrow">
                {{ __('Explore') }} <x-icon name="arrow-right" class="icon-arrow size-4" />
            </span>
        </div>
    </div>
</article>