{{--
    Preview de la creatividad en formato "Just Eat/KFC" (spec §Objetivo): foto + badge de %
    + botón "Realizar pedido". Variables esperadas: $imageUrl, $restaurantName, $headline,
    $primaryText, $badgeText, $ctaLabel (opcional, default "Realizar pedido").
--}}
<div class="mx-auto" style="max-width: 320px;">
    <div class="card shadow-sm overflow-hidden">
        <div class="position-relative">
            <img
                src="{{ $imageUrl ?: 'https://via.placeholder.com/320x200?text=Sin+imagen' }}"
                alt="{{ $restaurantName }}"
                class="w-100"
                style="height: 200px; object-fit: cover;">
            @if (!empty($badgeText))
                <span class="badge bg-danger position-absolute top-0 start-0 m-2 fs-6 px-3 py-2">
                    {{ $badgeText }}
                </span>
            @endif
        </div>
        <div class="card-body">
            <h6 class="mb-1">{{ $headline ?: $restaurantName }}</h6>
            @if (!empty($primaryText))
                <p class="small text-body-secondary mb-3">{{ $primaryText }}</p>
            @endif
            <button type="button" class="btn btn-primary w-100" disabled>
                {{ $ctaLabel ?? 'Realizar pedido' }}
            </button>
        </div>
    </div>
</div>