@php
    $imageUrl = !empty($offer['icon_url'])
        ? $offer['icon_url']
        : (!empty($offer['image_path']) ? Storage::url($offer['image_path']) : asset('app-assets/images/svg/basketloot-offer.svg'));
@endphp
{{-- Guests see the card and reward but not milestones; clicking prompts sign-up. --}}
<a href="{{ route('register') }}" class="po-offer" style="--po-bg: {{ $offer['background_color'] ?? '#12362e' }}"
   title="Sign up to start this offer">
    <span class="po-ribbon" style="--rib: {{ $offer['badge_color'] ?? '#86efac' }}">{{ $ribbon }}</span>
    <img class="po-offer-media" src="{{ $imageUrl }}" alt="{{ $offer['name'] }}" loading="lazy" decoding="async"
         onerror="this.onerror=null;this.src='{{ asset('app-assets/images/svg/basketloot-offer.svg') }}'">
    <span class="po-provider">{{ $offer['provider'] }}</span>
    <span class="po-offer-title">{{ Str::limit($offer['name'], 34) }}</span>
    <span class="po-offer-desc">{{ Str::limit($offer['description'] ?: 'Sign in to view offer details.', 60) }}</span>
    <span class="po-offer-foot">
        <span class="po-reward">{{ format_coins_as_usd($offer['reward']) }} <small>USD</small></span>
        <span class="po-lock"><i data-feather="lock" style="width:12px;height:12px;"></i> Sign in</span>
    </span>
</a>
