{{--
    One property in a grid.

    The facts strip reads from `propertyDetail` — the indexed projection — rather
    than walking attribute values, so a page of twenty-four cards is one query
    and not twenty-four.
--}}
@php
    $detail = $listing->propertyDetail;
    $url = $listing->publicUrl();
@endphp

<article class="group flex flex-col overflow-hidden rounded-2xl border border-border bg-surface transition hover:shadow-card"
         data-reveal-child>
    <a href="{{ $url }}" class="relative block overflow-hidden bg-surface-muted">
        <x-image :src="$listing->cover_image" :alt="$listing->title" ratio="4/3" zoom rounded="rounded-none" />

        <x-favourite-button :listing="$listing"
                            :favourited="in_array($listing->id, $favouritedIds ?? [], true)"
                            class="absolute right-3 top-3 z-10" />

        <span class="absolute left-3 top-3 flex flex-wrap gap-2">
            <span class="pill bg-primary text-text">{{ $listing->intent->label() }}</span>

            @if ($listing->status->isClosed())
                <span class="pill bg-surface text-text">{{ $listing->status->label() }}</span>
            @endif

            @if ($listing->is_featured)
                <span class="pill bg-surface text-text">{{ __('Featured') }}</span>
            @endif
        </span>
    </a>

    <div class="flex flex-1 flex-col p-5">
        <p class="font-display text-lg font-bold text-text">
            {{ $listing->formattedPrice() }}
            @if ($period = $listing->pricePeriodLabel())
                <span class="text-sm font-normal text-text-secondary">{{ $period }}</span>
            @endif
        </p>

        <h3 class="mt-1.5 font-display text-base font-semibold leading-snug text-text">
            <a href="{{ $url }}" class="transition hover:text-text-brand">{{ $listing->title }}</a>
        </h3>

        <p class="mt-1 flex items-center gap-1.5 text-sm text-text-secondary">
            <x-icon name="map" class="size-3.5 shrink-0 text-text-muted" />
            <span class="truncate">{{ $listing->locationLabel() }}</span>
        </p>

        {{-- Real estate reads the indexed projection; every other vertical
             falls back to the attribute values the category marked as
             highlighted, so a vehicle card is not a blank space where the
             bedroom count would be. --}}
        @if (! $detail && $listing->relationLoaded('attributeValues'))
            @php($highlights = collect($listing->specification())->take(3))

            @if ($highlights->isNotEmpty())
                <dl class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-border pt-4 text-sm text-text-secondary">
                    @foreach ($highlights as $row)
                        <div class="flex items-center gap-1.5">
                            <dt class="text-text-muted">{{ $row['label'] }}</dt>
                            <dd class="font-medium text-text">{{ $row['value'] }}</dd>
                        </div>
                    @endforeach
                </dl>
            @endif
        @endif

        @if ($detail)
            <dl class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-border pt-4 text-sm text-text-secondary">
                @foreach ([
                    ['icon' => 'bed', 'value' => $detail->bedrooms, 'label' => __('bed')],
                    ['icon' => 'bath', 'value' => $detail->bathrooms, 'label' => __('bath')],
                    ['icon' => 'key', 'value' => $detail->parking, 'label' => __('parking')],
                ] as $fact)
                    @if ($fact['value'])
                        <div class="flex items-center gap-1.5">
                            <x-icon :name="$fact['icon']" class="size-4 shrink-0 text-text-muted" />
                            <dt class="sr-only">{{ $fact['label'] }}</dt>
                            <dd>{{ $fact['value'] }} {{ $fact['label'] }}</dd>
                        </div>
                    @endif
                @endforeach

                @if ($area = $detail->headlineArea())
                    <div class="flex items-center gap-1.5">
                        <x-icon name="area" class="size-4 shrink-0 text-text-muted" />
                        <dt class="sr-only">{{ __('Area') }}</dt>
                        <dd>{{ number_format($area) }} {{ __('sq. ft') }}</dd>
                    </div>
                @endif
            </dl>
        @endif
    </div>
</article>