@props(['offer'])

@php
    $price = $offer->prices->first();
    $available = ! $offer->inventory || ! $offer->inventory->track_inventory
        ? null
        : max(0, (float) $offer->inventory->quantity - (float) $offer->inventory->reserved_quantity);
    $isService = $offer->item->type === 'service';
@endphp

<article class="offer-card catalog-offer-card">
    <a class="offer-visual" href="{{ route('offers.show', $offer) }}" aria-label="Voir {{ $offer->item->name }}">
        <span class="offer-category">{{ $isService ? 'Service' : 'Produit' }}</span>
        @if($isService)
            <svg class="offer-illustration" aria-hidden="true" viewBox="0 0 120 120"><circle cx="60" cy="60" r="38"/><path d="M60 38v44M38 60h44"/><path d="M30 94h60"/></svg>
        @else
            <svg class="offer-illustration" aria-hidden="true" viewBox="0 0 120 120"><path d="M30 48h60l-5 50H35l-5-50Z"/><path d="M45 50c0-18 30-18 30 0"/><path d="M45 68h30M42 82h36"/></svg>
        @endif
    </a>
    <div class="offer-body">
        <h3><a href="{{ route('offers.show', $offer) }}">{{ $offer->item->name }}</a></h3>
        <div class="offer-merchant">
            <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M3 9h18l-1-5H4L3 9Zm1 0v11h16V9M9 20v-6h6v6"/></svg>
            <span>{{ $offer->organization->name }}</span>
        </div>
        <p>{{ Str::limit($offer->item->description ?: 'Une initiative proposée par un partenaire FreeGive.', 92) }}</p>
        <div class="offer-footer">
            <div>
                <strong>{{ $price ? number_format((float) $price->price, 0, ',', ' ') : '—' }} <small>XOF</small></strong>
                @if($available !== null)<span class="stock">{{ $available > 0 ? number_format($available, 0, ',', ' ').' disponible(s)' : 'Épuisé' }}</span>@endif
            </div>
            <a @class(['offer-finance', 'disabled' => $available !== null && $available <= 0]) href="{{ route('offers.show', $offer) }}" @if($available !== null && $available <= 0) aria-disabled="true" tabindex="-1" @endif>
                <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 18h4l2 2h7.5a2.5 2.5 0 0 0 2.5-2.5V16h-7l-2-2H7a3 3 0 0 0-3 3v1Z"/><path d="M14 10.5c-2.5 0-4-1.2-4-3S11.5 4.5 14 4.5s4 1.2 4 3-1.5 3-4 3Zm0-6V3m0 9v-1.5"/></svg>
                Financer
            </a>
        </div>
    </div>
</article>