@php
    /** @var \ImovelZapAi\Properties\Application\Data\PropertyMapViewData $map */
@endphp

<section aria-label="Mapa" class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
    <div class="flex items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
        <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Mapa</h3>
        @if ($map->externalUrl)
            <a
                href="{{ $map->externalUrl }}"
                target="_blank"
                rel="noopener noreferrer"
                class="text-xs font-medium text-emerald-700 hover:text-emerald-600"
            >
                Abrir no Google Maps
            </a>
        @endif
    </div>

    @if ($map->embedUrl)
        <div class="relative aspect-[4/3] bg-slate-100">
            <iframe
                title="Mapa do imóvel no Google Maps"
                src="{{ $map->embedUrl }}"
                class="absolute inset-0 h-full w-full border-0"
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                allowfullscreen
            ></iframe>
        </div>
        @if ($map->coordinatesLabel)
            <p class="border-t border-slate-100 px-4 py-2 text-xs text-slate-500">
                Coordenadas: {{ $map->coordinatesLabel }}
            </p>
        @endif
    @else
        <div class="relative flex aspect-[4/3] flex-col items-center justify-center bg-slate-100 p-6 text-center">
            <div class="pointer-events-none absolute inset-0 opacity-40" aria-hidden="true">
                <svg class="h-full w-full text-slate-300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 220h400M0 160h400M0 100h400M80 0v300M160 0v300M240 0v300M320 0v300" stroke="currentColor" stroke-width="1"/>
                    <circle cx="200" cy="140" r="36" stroke="currentColor" stroke-width="2" fill="white"/>
                    <path d="M200 104v72M164 140h72" stroke="currentColor" stroke-width="2"/>
                </svg>
            </div>

            <div class="relative z-10 max-w-xs space-y-2">
                <p class="text-sm font-medium text-slate-700">Mapa indisponível</p>
                <p class="text-xs text-slate-500">Informe o endereço ou as coordenadas do imóvel para exibir a localização.</p>
            </div>
        </div>
    @endif
</section>
