@props(['comercio'])

@php

  $img = $comercio->imagen ?: asset('images/post-default.jpg');
  $alt = 'Servicio para mascotas: '.$comercio->nombre;
  $whats = $comercio->telefono
      ? 'https://wa.me/'.preg_replace('/\\D+/', '', $comercio->telefono)
      : null;
  $map = $comercio->direccion
      ? 'https://www.google.com/maps/search/?api=1&query='.urlencode($comercio->direccion.' '.$comercio->ciudad.' '.$comercio->region)
      : null;
@endphp

<article class="card biz-card h-100" itemscope itemtype="https://schema.org/LocalBusiness">
  <div class="position-relative">
    <img
      src="{{ asset($img) }}"
      alt="{{ $alt }}"
      class="biz-thumb"
      width="640" height="360"
      loading="lazy" decoding="async">
  </div>

  <div class="card-body d-flex flex-column">
    <h3 class="h5 text-primary mb-1" itemprop="name">{{ $comercio->nombre }}</h3>
    <div class="small text-muted mb-2">
      <span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
        <span itemprop="addressLocality">{{ $comercio->ciudad }}</span>
        @if($comercio->ciudad && $comercio->region), @endif
        <span itemprop="addressRegion">{{ $comercio->region }}</span>
      </span>
    </div>

    @if($comercio->direccion)
      <div class="small"><i class="bi bi-geo-alt"></i> <span itemprop="streetAddress">{{ $comercio->direccion }}</span></div>
    @endif
    @if($comercio->telefono)
      <div class="small"><i class="bi bi-telephone"></i> <span itemprop="telephone">{{ $comercio->telefono }}</span></div>
    @endif
    @if($comercio->email)
      <div class="small"><i class="bi bi-envelope"></i> <span itemprop="email">{{ $comercio->email }}</span></div>
    @endif

    <div class="mt-auto d-flex flex-wrap gap-2 pt-3">
      {{-- ajusta a tu ruta pública si ya tienes detalle de comercio --}}
      <a href="{{ route('comercios.show', $comercio->slug ?? $comercio->id) }}"
         class="btn btn-outline-primary btn-sm">Ver perfil</a>
      @if($whats)
        <a href="{{ $whats }}" class="btn btn-success btn-sm" target="_blank" rel="noopener">WhatsApp</a>
      @endif
      @if($map)
        <a href="{{ $map }}" class="btn btn-secondary btn-sm" target="_blank" rel="noopener">Ver mapa</a>
      @endif
    </div>
  </div>
</article>