---
interface Props {
  class?: string;
}
const { class: className = '' } = Astro.props;
---
<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" class={className} aria-hidden="true">
  <defs>
    <linearGradient id="mapGrad" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="#EE7623" stop-opacity="0.05"/>
      <stop offset="1" stop-color="#EE7623" stop-opacity="0.12"/>
    </linearGradient>
  </defs>

  <path
    d="M 130,140 Q 90,180 110,230 Q 90,290 140,330 Q 180,360 230,340 Q 280,330 290,290 Q 320,250 300,210 Q 280,160 230,140 Q 180,120 130,140 Z"
    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
  />
  <path
    d="M 280,180 Q 320,150 380,160 Q 440,150 470,180 Q 480,210 460,240 Q 420,270 380,260 Q 330,250 300,230 Q 270,210 280,180 Z"
    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
  />
  <path
    d="M 470,200 Q 510,180 560,190 Q 610,200 620,240 Q 600,280 550,290 Q 500,290 470,260 Q 450,230 470,200 Z"
    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
  />
  <path
    d="M 620,290 Q 670,300 720,330 Q 770,360 800,400 Q 820,440 780,460 Q 730,470 680,440 Q 640,410 620,370 Q 600,330 620,290 Z"
    fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
  />

  <g>
    <circle cx="170" cy="240" r="8" fill="var(--color-hds-naranja)">
      <animate attributeName="r" values="6;10;6" dur="2.5s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="170" cy="240" r="5" fill="var(--color-hds-naranja)"/>
    <text x="170" y="220" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Canadá</text>
  </g>

  <g>
    <circle cx="370" cy="210" r="8" fill="var(--color-hds-naranja)">
      <animate attributeName="r" values="6;10;6" dur="2.5s" begin="0.4s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="0.4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="370" cy="210" r="5" fill="var(--color-hds-naranja)"/>
    <text x="370" y="190" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">USA</text>
  </g>

  <g>
    <circle cx="540" cy="230" r="8" fill="var(--color-hds-naranja)">
      <animate attributeName="r" values="6;10;6" dur="2.5s" begin="0.8s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="0.8s" repeatCount="indefinite"/>
    </circle>
    <circle cx="540" cy="230" r="5" fill="var(--color-hds-naranja)"/>
    <text x="540" y="210" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Alemania</text>
  </g>

  <g>
    <circle cx="720" cy="390" r="10" fill="var(--color-hds-naranja)">
      <animate attributeName="r" values="8;14;8" dur="2.5s" begin="1.2s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="1.2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="720" cy="390" r="6" fill="var(--color-hds-naranja)"/>
    <circle cx="720" cy="390" r="2.5" fill="white"/>
    <text x="720" y="370" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Uruguay</text>
    <text x="720" y="425" text-anchor="middle" font-size="10" fill="var(--hds-fg-muted)">Sede operativa</text>
  </g>
</svg>
