@props(['type'])
@if ($type === 'customer')
    <svg viewBox="0 0 220 200" class="path-illustration" aria-hidden="true">
        <ellipse cx="110" cy="188" rx="70" ry="8" fill="var(--ill-ground)" />
        <g class="pin-drop"><path d="M168 78s20-18 20-34a20 20 0 1 0-40 0c0 16 20 34 20 34Z" fill="var(--primary)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><circle cx="168" cy="44" r="7" fill="var(--ill-tile)"/></g>
        <path d="M150 92c-10 8-20 10-30 14" stroke="var(--civic)" stroke-width="3" stroke-dasharray="2 8" stroke-linecap="round" fill="none"/>
        <path d="M62 186c0-40 18-66 46-66s46 26 46 66Z" fill="var(--civic)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><circle cx="108" cy="88" r="26" fill="var(--ill-wall-shade)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>
        <path d="M84 82c4-16 16-24 28-22s22 10 22 22c-10-6-28-6-50 0Z" fill="var(--ill-roof)"/><circle cx="100" cy="92" r="2.5" fill="var(--ill-ink)"/><circle cx="116" cy="92" r="2.5" fill="var(--ill-ink)"/><path d="M102 102q6 5 12 0" stroke="var(--ill-ink)" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M140 150c6-10 8-22 2-34" fill="none" stroke="var(--ill-ink)" stroke-width="3" stroke-linecap="round"/><rect x="128" y="96" width="28" height="44" rx="6" fill="var(--ill-roof)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" transform="rotate(-10 142 118)"/><rect x="133" y="102" width="18" height="28" rx="3" fill="var(--ill-glass)" transform="rotate(-10 142 118)"/><circle cx="142" cy="114" r="4" fill="var(--primary)" transform="rotate(-10 142 118)"/>
    </svg>
@elseif ($type === 'owner')
    <svg viewBox="0 0 220 200" class="path-illustration" aria-hidden="true">
        <ellipse cx="110" cy="188" rx="80" ry="8" fill="var(--ill-ground)"/><rect x="24" y="40" width="120" height="146" rx="10" fill="var(--ill-wall)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>
        <path d="M18 40h132l-6 20H24z" fill="var(--primary)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M24 60q10 10 20 0q10 10 20 0q10 10 20 0q10 10 20 0q10 10 20 0q10 10 20 0" fill="var(--primary)" stroke="var(--ill-ink)" stroke-width="3"/>
        <rect x="54" y="86" width="60" height="100" rx="6" fill="var(--ill-wood)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><rect x="62" y="94" width="44" height="34" rx="4" fill="var(--ill-glass)"/>
        <g class="store-sign"><path d="M72 96l12-10 12 10" stroke="var(--ill-ink)" stroke-width="2" fill="none"/><rect x="64" y="96" width="40" height="20" rx="5" fill="var(--primary)"/><text x="84" y="110" text-anchor="middle" font-size="10" font-weight="800" fill="var(--primary-foreground)" font-family="inherit">OPEN</text></g>
        <path d="M128 186c0-34 14-56 36-56s36 22 36 56Z" fill="var(--ill-wall)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M150 140h28v46h-28z" fill="var(--primary-soft)"/><circle cx="164" cy="104" r="22" fill="var(--ill-wall-shade)" stroke="var(--ill-ink)" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><path d="M142 98c2-14 12-20 22-20s20 6 22 20c-8-4-36-4-44 0Z" fill="var(--ill-roof)"/><circle cx="157" cy="106" r="2.5" fill="var(--ill-ink)"/><circle cx="171" cy="106" r="2.5" fill="var(--ill-ink)"/><path d="M158 115q6 5 12 0" stroke="var(--ill-ink)" stroke-width="2.5" fill="none" stroke-linecap="round"/><path d="M134 156c-8-6-12-14-10-22" fill="none" stroke="var(--ill-ink)" stroke-width="3" stroke-linecap="round"/>
    </svg>
@else
    <svg viewBox="0 0 260 100" class="shop-row" aria-hidden="true">
        @foreach ([['accent',70],['cta',86],['accent',62],['cta',78]] as $index => $shop)
            @php($x = 6 + $index * 63)
            @php($top = 96 - $shop[1])
            <g><rect x="{{ $x }}" y="{{ $top + 10 }}" width="56" height="{{ $shop[1] - 10 }}" rx="6" fill="var(--cta-fg)" opacity=".14"/><rect x="{{ $x - 3 }}" y="{{ $top }}" width="62" height="12" rx="4" fill="{{ $shop[0] === 'accent' ? 'var(--primary)' : 'var(--cta-fg)' }}"/><rect x="{{ $x + 8 }}" y="{{ $top + 22 }}" width="20" height="16" rx="3" fill="var(--ill-light)" opacity=".85"/><rect x="{{ $x + 34 }}" y="66" width="14" height="30" rx="3" fill="var(--cta-fg)" opacity=".35"/></g>
        @endforeach
        <rect x="0" y="96" width="260" height="3" rx="1.5" fill="var(--cta-fg)" opacity=".4"/>
    </svg>
@endif