{{-- Localization illustration — globe with AR/EN language chips --}}
<svg viewBox="0 0 360 320" xmlns="http://www.w3.org/2000/svg" fill="none"
     class="{{ $class ?? 'h-auto w-full' }}" aria-hidden="true">
    <defs>
        <radialGradient id="loc-globe" cx="35%" cy="30%" r="80%">
            <stop offset="0%" stop-color="color-mix(in oklch, var(--accent) 38%, var(--surface))"/>
            <stop offset="60%" stop-color="color-mix(in oklch, var(--accent) 22%, var(--surface))"/>
            <stop offset="100%" stop-color="color-mix(in oklch, var(--accent) 8%, var(--surface))"/>
        </radialGradient>
        <linearGradient id="loc-chip" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="color-mix(in oklch, var(--accent) 14%, var(--surface))"/>
            <stop offset="100%" stop-color="color-mix(in oklch, var(--accent) 6%, var(--surface))"/>
        </linearGradient>
        <filter id="loc-shadow" x="-30%" y="-30%" width="160%" height="160%">
            <feDropShadow dx="0" dy="16" stdDeviation="20"
                          flood-color="color-mix(in oklch, var(--accent) 38%, transparent)"/>
        </filter>
    </defs>

    {{-- Ground shadow --}}
    <ellipse cx="180" cy="290" rx="120" ry="10"
             fill="color-mix(in oklch, var(--accent) 14%, transparent)"/>

    {{-- Decorative orbits --}}
    <ellipse cx="180" cy="160" rx="138" ry="50"
             stroke="color-mix(in oklch, var(--accent) 16%, transparent)"
             stroke-width="1.5" stroke-dasharray="3 6" opacity="0.6"
             transform="rotate(-12 180 160)"/>
    <ellipse cx="180" cy="160" rx="148" ry="38"
             stroke="color-mix(in oklch, var(--accent) 12%, transparent)"
             stroke-width="1.5" opacity="0.4"
             transform="rotate(18 180 160)"/>

    {{-- Globe --}}
    <g filter="url(#loc-shadow)">
        <circle cx="180" cy="160" r="84" fill="url(#loc-globe)"
                stroke="color-mix(in oklch, var(--accent) 32%, transparent)" stroke-width="1.5"/>

        {{-- Latitude lines --}}
        <ellipse cx="180" cy="160" rx="84" ry="28"
                 stroke="color-mix(in oklch, var(--accent) 28%, transparent)" stroke-width="1.4" fill="none"/>
        <ellipse cx="180" cy="160" rx="84" ry="56"
                 stroke="color-mix(in oklch, var(--accent) 22%, transparent)" stroke-width="1.2" fill="none"/>

        {{-- Longitude lines --}}
        <ellipse cx="180" cy="160" rx="28" ry="84"
                 stroke="color-mix(in oklch, var(--accent) 28%, transparent)" stroke-width="1.4" fill="none"/>
        <ellipse cx="180" cy="160" rx="56" ry="84"
                 stroke="color-mix(in oklch, var(--accent) 22%, transparent)" stroke-width="1.2" fill="none"/>

        {{-- Vertical and horizontal axes --}}
        <line x1="96" y1="160" x2="264" y2="160"
              stroke="color-mix(in oklch, var(--accent) 30%, transparent)" stroke-width="1.4"/>
        <line x1="180" y1="76" x2="180" y2="244"
              stroke="color-mix(in oklch, var(--accent) 30%, transparent)" stroke-width="1.4"/>

        {{-- Highlight --}}
        <ellipse cx="158" cy="138" rx="40" ry="30"
                 fill="color-mix(in oklch, white 14%, transparent)" opacity="0.55"/>
    </g>

    {{-- AR chip (top-left) --}}
    <g transform="translate(50 56)">
        <rect x="0" y="0" width="76" height="40" rx="20" fill="url(#loc-chip)"
              stroke="color-mix(in oklch, var(--accent) 26%, transparent)" stroke-width="1.5"
              filter="url(#loc-shadow)"/>
        <circle cx="20" cy="20" r="10" fill="var(--accent)"/>
        <text x="20" y="24" text-anchor="middle" font-family="system-ui, sans-serif"
              font-size="11" font-weight="700" fill="white">AR</text>
        <rect x="36" y="14" width="32" height="5" rx="2.5"
              fill="color-mix(in oklch, var(--accent) 28%, transparent)"/>
        <rect x="36" y="23" width="24" height="4" rx="2"
              fill="color-mix(in oklch, var(--foreground) 14%, transparent)"/>
    </g>

    {{-- EN chip (top-right) --}}
    <g transform="translate(232 80)">
        <rect x="0" y="0" width="76" height="40" rx="20" fill="url(#loc-chip)"
              stroke="color-mix(in oklch, var(--accent) 26%, transparent)" stroke-width="1.5"
              filter="url(#loc-shadow)"/>
        <circle cx="20" cy="20" r="10" fill="color-mix(in oklch, var(--accent) 60%, transparent)"/>
        <text x="20" y="24" text-anchor="middle" font-family="system-ui, sans-serif"
              font-size="11" font-weight="700" fill="white">EN</text>
        <rect x="36" y="14" width="32" height="5" rx="2.5"
              fill="color-mix(in oklch, var(--accent) 22%, transparent)"/>
        <rect x="36" y="23" width="20" height="4" rx="2"
              fill="color-mix(in oklch, var(--foreground) 14%, transparent)"/>
    </g>

    {{-- Bottom RTL/LTR hint chip --}}
    <g transform="translate(110 248)">
        <rect x="0" y="0" width="140" height="36" rx="18" fill="var(--surface)"
              stroke="color-mix(in oklch, var(--accent) 26%, transparent)" stroke-width="1.5"
              filter="url(#loc-shadow)"/>
        <path d="M16 12 L24 18 L16 24 M22 18 L38 18"
              stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        <path d="M124 12 L116 18 L124 24 M118 18 L102 18"
              stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        <text x="70" y="22" text-anchor="middle" font-family="system-ui, sans-serif"
              font-size="11" font-weight="600" fill="color-mix(in oklch, var(--foreground) 80%, transparent)">RTL · LTR</text>
    </g>

    {{-- Floating dots --}}
    <g fill="var(--accent)">
        <circle cx="60" cy="180" r="3" opacity="0.5"/>
        <circle cx="306" cy="200" r="4" opacity="0.45"/>
    </g>
</svg>