<a class="bg-white rounded-lg border border-gray-200 p-6 relative shadow-sm w-full" href="{{ route('products.show', $product->id) }}">

    <div class="flex flex-wrap items-start gap-4 w-full">
        <div class="flex items-start justify-between w-full">
            {{-- Icono del producto --}}
            <div class="flex">
                <img src="{{ $product->image_url ?? asset('images/placeholder.png') }}"
                alt="{{ $product->name }}"
                class="w-16 h-16 rounded-lg object-contain bg-white border border-gray-200 p-2">
            </div>
            {{-- Badge en la esquina superior derecha --}}
            <div class="flex items-center gap-1.5 px-2.5 py-1 border border-gray-200 rounded">
                <img src="{{ asset('vendor/blade-untitledui-icons/server-04.svg') }}" alt="Environments" class="w-3.5 h-3.5">
                <span class="text-sm font-medium text-gray-700">{{ $this->environmentsCount }}</span>
            </div>
        </div>
        {{-- Contenido principal --}}
        <div class="flex-1 min-w-0">
            {{-- Nombre y versión --}}
            <div class="flex items-baseline gap-3 mb-3">
                <h3 class="text-2xl font-bold text-gray-900">{{ $product->name }}</h3>
                @if($this->latestVersion)
                    <span class="text-lg font-normal text-gray-500">{{ $this->latestVersion }}</span>
                @endif
            </div>

            {{-- Descripción --}}
            @if($product->summary)
                <div class="text-gray-700 text-sm leading-relaxed">
                    {!! preg_replace('/\*\*(.+?)\*\*/', '<strong>$1</strong>', e($product->summary)) !!}
                </div>
            @elseif($product->description)
                <p class="text-gray-700 text-sm leading-relaxed">
                    {{ Str::limit(strip_tags($product->description), 150) }}
                </p>
            @endif
        </div>
    </div>
</a>
