@props(['class' => 'h-full w-full', 'pin' => true])

{{-- Stylised Tanzania silhouette — a refined placeholder for the client's
     professionally designed map. Dar es Salaam marked on the east coast. --}}
<svg {{ $attributes->merge(['class' => $class]) }} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Map of Tanzania, East Africa">
    <path
        d="M58 44 C54 44 51 47 51 52 C48 53 46 57 48 61 C44 64 43 70 46 74 L44 92 C42 104 43 116 47 126 C50 138 58 150 70 158 C82 166 98 170 112 166 C126 162 138 152 144 138 C150 126 152 112 150 100 C154 92 156 82 152 74 L150 66 C142 58 132 54 122 54 L92 52 C86 48 78 46 70 47 C66 44 62 43 58 44 Z"
        fill="currentColor"
        fill-opacity="0.14"
        stroke="currentColor"
        stroke-opacity="0.55"
        stroke-width="1.5"
        stroke-linejoin="round"
    />
    {{-- Lake Victoria hint (north) --}}
    <path d="M60 50 C64 48 72 48 76 51 C74 55 66 56 62 54 Z" fill="currentColor" fill-opacity="0.25" />
    @if ($pin)
        {{-- Dar es Salaam --}}
        <g transform="translate(146 108)">
            <circle r="9" fill="currentColor" fill-opacity="0.15" class="tz-ping" />
            <circle r="3.5" fill="#38b0b7" />
            <circle r="6" fill="none" stroke="#38b0b7" stroke-width="1" stroke-opacity="0.6" />
        </g>
    @endif
</svg>