@php
    $orbitItems = [
        ['icon' => 'pin', 'label' => 'pin', 'x' => 7, 'y' => 22, 'size' => 84, 'rot' => -8, 'fd' => 6.2, 'fdl' => 0, 'dx' => 4, 'dy' => -10, 'mobile' => true],
        ['icon' => 'bag', 'label' => 'bag', 'x' => 86, 'y' => 8, 'size' => 76, 'rot' => 7, 'fd' => 7.4, 'fdl' => -2, 'dx' => -5, 'dy' => -8, 'mobile' => true],
        ['icon' => 'coffee', 'label' => 'coffee', 'x' => 20, 'y' => 4, 'size' => 58, 'rot' => 5, 'fd' => 5.6, 'fdl' => -1, 'dx' => 6, 'dy' => -6, 'mobile' => true],
        ['icon' => 'star', 'label' => 'star', 'x' => 74, 'y' => 30, 'size' => 52, 'rot' => -6, 'fd' => 6.8, 'fdl' => -3, 'dx' => -4, 'dy' => -10, 'mobile' => true],
        ['icon' => 'heart', 'label' => 'heart', 'x' => 30, 'y' => 26, 'size' => 46, 'rot' => 10, 'fd' => 8, 'fdl' => -4, 'dx' => 3, 'dy' => -7, 'mobile' => false],
        ['icon' => 'tag', 'label' => 'tag', 'x' => 64, 'y' => 2, 'size' => 56, 'rot' => -12, 'fd' => 7, 'fdl' => -1.5, 'dx' => -3, 'dy' => -9, 'mobile' => true],
        ['icon' => 'map', 'label' => 'map', 'x' => .5, 'y' => 2, 'size' => 50, 'rot' => -4, 'fd' => 6.5, 'fdl' => -2.5, 'dx' => 5, 'dy' => -5, 'mobile' => false],
        ['icon' => 'avatar', 'label' => 'avatar', 'x' => 94, 'y' => 34, 'size' => 60, 'rot' => 6, 'fd' => 7.8, 'fdl' => -.5, 'dx' => -4, 'dy' => -6, 'mobile' => false],
        ['icon' => 'star', 'label' => 'star-small', 'x' => 40, 'y' => 0, 'size' => 38, 'rot' => 14, 'fd' => 6, 'fdl' => -2.2, 'dx' => 3, 'dy' => -6, 'mobile' => false],
        ['icon' => 'heart', 'label' => 'heart-small', 'x' => 57, 'y' => 28, 'size' => 40, 'rot' => -10, 'fd' => 7.2, 'fdl' => -3.4, 'dx' => -3, 'dy' => -8, 'mobile' => false],
    ];
    $shops = [
        ['x' => 70, 'w' => 110, 'h' => 150, 'awning' => 'var(--civic-soft)', 'kind' => 'cafe', 'desktop' => true],
        ['x' => 200, 'w' => 130, 'h' => 190, 'awning' => 'var(--primary-soft)', 'kind' => 'bakery', 'desktop' => false],
        ['x' => 345, 'w' => 90, 'h' => 130, 'awning' => 'var(--civic-soft)', 'kind' => 'florist', 'desktop' => false],
        ['x' => 770, 'w' => 90, 'h' => 140, 'awning' => 'var(--primary-soft)', 'kind' => 'florist', 'desktop' => false],
        ['x' => 875, 'w' => 130, 'h' => 180, 'awning' => 'var(--civic-soft)', 'kind' => 'cafe', 'desktop' => false],
        ['x' => 1020, 'w' => 110, 'h' => 150, 'awning' => 'var(--primary-soft)', 'kind' => 'bakery', 'desktop' => true],
    ];
@endphp
<div class="scene" data-animated-scene aria-hidden="true">
    <svg class="scene-street" viewBox="0 0 1200 525" preserveAspectRatio="none">
        @foreach ($shops as $shop)
            @php($top = 470 - $shop['h'])
            <g @class(['hide-sm-svg' => $shop['desktop']])>
                @if ($shop['kind'] === 'cafe')
                    <path d="M{{ $shop['x'] + $shop['w'] / 2 - 10 }} {{ $top + 6 }}c-4-6 4-8 0-14M{{ $shop['x'] + $shop['w'] / 2 + 4 }} {{ $top + 6 }}c-4-6 4-8 0-14" stroke="var(--shop-ink)" stroke-width="2" fill="none" stroke-linecap="round" />
                @elseif ($shop['kind'] === 'bakery')
                    <ellipse cx="{{ $shop['x'] + $shop['w'] / 2 }}" cy="{{ $top + 4 }}" rx="16" ry="8" fill="var(--ill-wood)" opacity=".8" />
                @endif
                <rect x="{{ $shop['x'] }}" y="{{ $top + 22 }}" width="{{ $shop['w'] }}" height="{{ $shop['h'] - 22 }}" rx="8" fill="var(--shop-wall)" stroke="var(--shop-ink)" stroke-width="2" />
                <rect x="{{ $shop['x'] - 6 }}" y="{{ $top + 14 }}" width="{{ $shop['w'] + 12 }}" height="16" rx="5" fill="{{ $shop['awning'] }}" />
                @php($scallopCount = (int) floor($shop['w'] / 20))
                @php($scallopWidth = ($shop['w'] + 12) / $scallopCount)
                @php($scallopPath = 'M'.($shop['x'] - 6).' '.($top + 30).str_repeat(' q'.($scallopWidth / 2).' 10 '.$scallopWidth.' 0', $scallopCount))
                <path d="{{ $scallopPath }}" fill="{{ $shop['awning'] }}" />
                <rect x="{{ $shop['x'] + $shop['w'] * .12 }}" y="{{ $top + 52 }}" width="{{ $shop['w'] * .42 }}" height="{{ $shop['h'] * .32 }}" rx="5" fill="var(--shop-glass)" />
                <rect x="{{ $shop['x'] + $shop['w'] * .64 }}" y="{{ 470 - $shop['h'] * .48 }}" width="{{ $shop['w'] * .24 }}" height="{{ $shop['h'] * .48 }}" rx="4" fill="var(--shop-ink)" opacity=".55" />
                @if ($shop['kind'] === 'florist')
                    <circle cx="{{ $shop['x'] + $shop['w'] * .2 }}" cy="{{ $top + $shop['h'] * .32 + 50 }}" r="5" fill="var(--primary)" opacity=".7" />
                    <circle cx="{{ $shop['x'] + $shop['w'] * .2 + 12 }}" cy="{{ $top + $shop['h'] * .32 + 50 }}" r="5" fill="var(--primary)" opacity=".7" />
                    <circle cx="{{ $shop['x'] + $shop['w'] * .2 + 24 }}" cy="{{ $top + $shop['h'] * .32 + 50 }}" r="5" fill="var(--primary)" opacity=".7" />
                @endif
            </g>
        @endforeach
        <rect x="0" y="470" width="1200" height="3" rx="1.5" fill="var(--shop-ink)" opacity=".5" />
        <rect x="0" y="473" width="1200" height="34" fill="var(--street)" />
        <path d="M20 490h1160" stroke="var(--street-line)" stroke-width="3" stroke-dasharray="22 18" />
        <path class="route-dash" d="M126 210C220 300 300 230 420 330S620 420 700 462" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round" />
        <circle cx="700" cy="462" r="6" fill="var(--primary)" />
    </svg>
    <div class="ground"></div>
    @foreach ($orbitItems as $index => $item)
        <div @class(['orbit', 'hide-sm' => !$item['mobile']]) style="left:{{ $item['x'] }}%;top:{{ $item['y'] }}%;--gx:calc({{ 50 - $item['x'] }} * 1cqw - {{ $item['size'] / 2 }}px);--gy:calc({{ (58 - $item['y']) * .4375 }} * 1cqw - {{ $item['size'] / 2 }}px)">
            <div class="orbit-pop" style="animation-delay:{{ .15 + $index * .07 }}s">
                <div class="orbit-float" style="--fd:{{ $item['fd'] }}s;--fdl:{{ $item['fdl'] }}s;--dx:{{ $item['dx'] }}px;--dy:{{ $item['dy'] }}px">
                    <div class="tile" style="--s:clamp(34px,6.5cqw,{{ $item['size'] }}px);--r:{{ $item['rot'] }}deg"><x-marketing.icon :name="$item['icon']" /></div>
                </div>
            </div>
        </div>
    @endforeach
    <svg viewBox="0 0 240 220" class="store" aria-hidden="true">
        <g class="store-body">
            <rect x="58" y="10" width="124" height="30" rx="10" fill="var(--ill-roof)"/><circle cx="80" cy="25" r="6" fill="var(--primary)"/><rect x="94" y="21" width="70" height="8" rx="4" fill="var(--ill-wall)" opacity=".9"/>
            <rect x="26" y="66" width="188" height="146" rx="10" fill="var(--ill-wall)" stroke="var(--ill-ink)" stroke-width="3"/><rect x="26" y="196" width="188" height="16" rx="6" fill="var(--ill-wall-shade)"/>
            <rect x="44" y="106" width="80" height="62" rx="8" fill="var(--ill-glass)" stroke="var(--ill-ink)" stroke-width="3"/><rect class="store-light" x="48" y="110" width="72" height="54" rx="6" fill="var(--ill-light)"/><path d="M84 106v62M44 137h80" stroke="var(--ill-ink)" stroke-width="3"/><rect x="40" y="168" width="88" height="8" rx="3" fill="var(--ill-wood)"/>
            <rect x="142" y="110" width="54" height="102" rx="8" fill="var(--ill-wood)" stroke="var(--ill-ink)" stroke-width="3"/><rect x="150" y="120" width="38" height="36" rx="5" fill="var(--ill-glass)"/><circle cx="186" cy="168" r="3.5" fill="var(--ill-ink)"/>
            <g class="store-sign"><path d="M160 118l9-8 9 8" stroke="var(--ill-ink)" stroke-width="2" fill="none"/><rect x="154" y="118" width="30" height="16" rx="4" fill="var(--primary)"/><rect x="160" y="124" width="18" height="4" rx="2" fill="var(--primary-foreground)"/></g>
        </g>
        <g class="store-awning"><path d="M16 54h208l-6 26H22z" fill="var(--ill-wall)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round"/>
            <path d="M16 54h26l-1 26H16zM68 54h26l-1 26H68zM120 54h26l-1 26h-25zM172 54h26l-1 26h-25z" fill="var(--primary)"/>
            <path d="M22 80q13 14 26 0q13 14 26 0q13 14 26 0q13 14 26 0q13 14 26 0q13 14 26 0q13 14 26 0q13 14 14 0" fill="var(--primary)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round"/><rect x="12" y="48" width="216" height="10" rx="5" fill="var(--ill-roof)"/>
        </g>
    </svg>
</div>