{{-- Partial: storefront/account/_address-card.blade.php --}}
@php
  $removeLabel = trim($address->line1.', '.$address->city);
@endphp
<div class="group relative overflow-hidden rounded-2xl border bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md
     {{ $address->is_default ? 'border-emerald-200 ring-2 ring-emerald-500/15' : 'border-stone-200 hover:border-stone-300' }}">
  <div class="flex flex-col gap-4 p-5 sm:flex-row sm:items-start">

    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ring-1
         {{ $address->type->value === 'shipping' ? 'bg-emerald-50 text-[#007a55] ring-emerald-100' : 'bg-amber-50 text-amber-700 ring-amber-100' }}">
      @if ($address->type->value === 'shipping')
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>
        </svg>
      @else
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/>
        </svg>
      @endif
    </div>

    <div class="min-w-0 flex-1">
      <div class="mb-2 flex flex-wrap items-center gap-2">
        <span class="text-[11px] font-semibold uppercase tracking-widest
             {{ $address->type->value === 'shipping' ? 'text-[#007a55]' : 'text-amber-700' }}">
          {{ $address->type->getLabel() }}
        </span>
        @if ($address->is_default)
          <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-700 ring-1 ring-emerald-200">
            <span class="h-1.5 w-1.5 rounded-full bg-[#007a55]"></span>
            Default
          </span>
        @endif
      </div>

      @if ($address->contact_name)
        <p class="text-sm font-semibold text-stone-950">{{ $address->contact_name }}</p>
      @endif

      <address class="mt-1 not-italic text-sm leading-6 text-stone-600">
        {{ $address->line1 }}@if ($address->line2), {{ $address->line2 }}@endif<br>
        {{ $address->city }}@if ($address->state), {{ $address->state }}@endif @if($address->postal_code){{ $address->postal_code }}@endif<br>
        {{ $address->country_code === 'US' ? 'United States' : 'Canada' }}
      </address>

      @if ($address->phone)
        <p class="mt-2 text-xs font-medium text-stone-400">{{ $address->phone }}</p>
      @endif
    </div>

    <div class="flex shrink-0 flex-wrap items-center gap-2 sm:flex-col sm:items-end">
      <button type="button"
              @click="startEdit({{ $address->id }}, {
                type: '{{ $address->type->value }}',
                contact_name: '{{ addslashes($address->contact_name ?? '') }}',
                phone: '{{ addslashes($address->phone ?? '') }}',
                line1: '{{ addslashes($address->line1) }}',
                line2: '{{ addslashes($address->line2 ?? '') }}',
                city: '{{ addslashes($address->city) }}',
                state: '{{ addslashes($address->state ?? '') }}',
                postal_code: '{{ addslashes($address->postal_code ?? '') }}',
                country_code: '{{ $address->country_code }}',
                is_default: {{ $address->is_default ? 'true' : 'false' }}
              })"
              class="inline-flex items-center gap-1.5 rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-xs font-semibold text-stone-600 transition hover:border-stone-300 hover:bg-stone-50 hover:text-stone-950">
        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"/>
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 7.125 16.875 4.5"/>
        </svg>
        Edit
      </button>

      @if (!$address->is_default)
        <form method="POST" action="{{ route('storefront.addresses.default', $address) }}">
          @csrf
          <button type="submit"
                  class="inline-flex items-center gap-1.5 rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-xs font-semibold text-stone-500 transition hover:border-emerald-200 hover:bg-emerald-50 hover:text-[#007a55]">
            <span class="h-1.5 w-1.5 rounded-full bg-[#007a55]"></span>
            Set default
          </button>
        </form>
      @endif

      <button type="button"
              data-remove-action="{{ route('storefront.addresses.destroy', $address) }}"
              data-remove-label="{{ $removeLabel }}"
              @click="confirmRemoveFromButton($el)"
              class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold text-stone-400 transition hover:bg-red-50 hover:text-red-600">
        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673A2.25 2.25 0 0 1 15.916 21.75H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
        </svg>
        Remove
      </button>
    </div>
  </div>
</div>