{{-- Analytics illustration — chart card with bars + trend line --}}
<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>
        <linearGradient id="ana-bg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="color-mix(in oklch, var(--accent) 12%, var(--surface))"/>
            <stop offset="100%" stop-color="color-mix(in oklch, var(--accent) 4%, var(--surface))"/>
        </linearGradient>
        <linearGradient id="ana-bar" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="var(--accent)"/>
            <stop offset="100%" stop-color="color-mix(in oklch, var(--accent) 65%, transparent)"/>
        </linearGradient>
        <linearGradient id="ana-fill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="color-mix(in oklch, var(--accent) 32%, transparent)"/>
            <stop offset="100%" stop-color="color-mix(in oklch, var(--accent) 0%, transparent)"/>
        </linearGradient>
        <filter id="ana-shadow" x="-30%" y="-30%" width="160%" height="160%">
            <feDropShadow dx="0" dy="16" stdDeviation="20"
                          flood-color="color-mix(in oklch, var(--accent) 35%, transparent)"/>
        </filter>
    </defs>

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

    {{-- Main chart card --}}
    <g filter="url(#ana-shadow)">
        <rect x="46" y="60" width="268" height="190" rx="22" fill="url(#ana-bg)"
              stroke="color-mix(in oklch, var(--accent) 22%, transparent)" stroke-width="1.5"/>

        {{-- KPI strip --}}
        <rect x="64" y="78" width="58" height="14" rx="4"
              fill="color-mix(in oklch, var(--accent) 22%, transparent)"/>
        <rect x="64" y="98" width="92" height="6" rx="3"
              fill="color-mix(in oklch, var(--accent) 14%, transparent)"/>

        {{-- Chart baseline --}}
        <line x1="68" y1="220" x2="296" y2="220"
              stroke="color-mix(in oklch, var(--accent) 18%, transparent)" stroke-width="1.5"/>

        {{-- Bars --}}
        @foreach ([['x' => 80,  'h' => 50], ['x' => 116, 'h' => 78], ['x' => 152, 'h' => 64],
                   ['x' => 188, 'h' => 96], ['x' => 224, 'h' => 110], ['x' => 260, 'h' => 88]] as $bar)
            <rect x="{{ $bar['x'] }}" y="{{ 220 - $bar['h'] }}" width="20" height="{{ $bar['h'] }}" rx="6"
                  fill="url(#ana-bar)" opacity="0.92"/>
        @endforeach

        {{-- Trend area --}}
        <path d="M70 200 L106 180 L142 188 L178 158 L214 138 L250 150 L290 124 L290 220 L70 220 Z"
              fill="url(#ana-fill)" opacity="0.55"/>

        {{-- Trend line --}}
        <path d="M70 200 L106 180 L142 188 L178 158 L214 138 L250 150 L290 124"
              stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>

        {{-- Trend dots --}}
        @foreach ([['cx' => 70, 'cy' => 200], ['cx' => 106, 'cy' => 180], ['cx' => 142, 'cy' => 188],
                   ['cx' => 178, 'cy' => 158], ['cx' => 214, 'cy' => 138], ['cx' => 250, 'cy' => 150],
                   ['cx' => 290, 'cy' => 124]] as $dot)
            <circle cx="{{ $dot['cx'] }}" cy="{{ $dot['cy'] }}" r="3.5" fill="var(--accent)"
                    stroke="var(--surface)" stroke-width="1.5"/>
        @endforeach
    </g>

    {{-- Floating stat card --}}
    <g transform="translate(232 28)">
        <rect x="0" y="0" width="104" height="62" rx="16"
              fill="var(--surface)"
              stroke="color-mix(in oklch, var(--accent) 22%, transparent)" stroke-width="1.5"
              filter="url(#ana-shadow)"/>

        {{-- Arrow up icon --}}
        <circle cx="20" cy="30" r="13" fill="color-mix(in oklch, var(--accent) 18%, transparent)"/>
        <path d="M14 33 L20 25 L26 33" stroke="var(--accent)" stroke-width="2.4"
              stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        <path d="M20 25 L20 35" stroke="var(--accent)" stroke-width="2.4" stroke-linecap="round"/>

        <rect x="42" y="14" width="50" height="6" rx="3"
              fill="color-mix(in oklch, var(--accent) 22%, transparent)"/>
        <rect x="42" y="26" width="36" height="14" rx="4"
              fill="var(--accent)"/>
        <rect x="42" y="46" width="44" height="3.5" rx="1.5"
              fill="color-mix(in oklch, var(--foreground) 12%, transparent)"/>
    </g>

    {{-- Floating pulse dot --}}
    <g>
        <circle cx="38" cy="120" r="4" fill="var(--accent)" opacity="0.55"/>
        <circle cx="324" cy="200" r="5" fill="var(--accent)" opacity="0.45"/>
    </g>
</svg>