@props([
    'icon' => 'default',
    'side' => 'us',
])

@php
    $stroke = $side === 'them' ? '#f87171' : '#00b7b2';
    $fill = $side === 'them' ? '#fca5a5' : '#5eead4';
@endphp

<svg class="svc-compare-living__icon-svg" width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
@switch($icon)
    @case('time')
        <circle cx="12" cy="12" r="8" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M12 8v4l2.5 2.5" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        @break
    @case('mobile')
        <rect x="7.5" y="4" width="9" height="16" rx="2" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M10.5 17h3" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('seo')
        <circle cx="10.5" cy="10.5" r="4.5" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M14 14l4.5 4.5" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        <path d="M8 10.5h5M10.5 8v5" stroke="{{ $fill }}" stroke-width="1.5" stroke-linecap="round" opacity="0.9"/>
        @break
    @case('cms')
        <path d="M6 5h12v14H6z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M9 9h6M9 12.5h4M9 16h5" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('support')
        <path d="M6 11.5a6 6 0 0112 0v3.5a2.5 2.5 0 01-2.5 2.5H14l-2.5 2.5V17.5H8.5A2.5 2.5 0 016 15V11.5z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        @break
    @case('community')
        <circle cx="9" cy="10" r="2.5" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <circle cx="15.5" cy="10" r="2.5" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M5.5 18c.8-2.2 2.6-3.5 5-3.5s4.2 1.3 5 3.5M14.5 18c.6-1.5 1.8-2.5 3.5-2.5" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('performance')
        <path d="M13 4L6 14h6l-1 6 7-12h-6l1-4z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round" stroke-linecap="round"/>
        @break
    @case('conversion')
        <path d="M5 7h14v10H5z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M9 11h6M12 11v4" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('handover')
        <path d="M8 6h11v12H8z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M6 9h3v9H6z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M11 10h5M11 13h4" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('analytics')
        <path d="M5 18V10M10 18V6M15 18v-5M20 18V8" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('architecture')
        <path d="M5 16l7-9 7 9" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M8.5 16h7" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('fees')
        <circle cx="12" cy="12" r="7" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M9.5 9.5c.8-1 2.2-1 3 0 .8 1 .2 2-1.5 2.3-1.2.2-2 1-2 2.2" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        <path d="M12 17.25h.01" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('marketing')
        <path d="M5 10v4l11 4V6L5 10z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M16 8.5v7" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('technical')
        <path d="M9 4 5 8v4l4 4M15 4l4 4v4l-4 4" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        @break
    @case('links')
        <path d="M9.5 14.5 7 17a3 3 0 0 1-4.2-4.2l2.5-2.5M14.5 9.5 17 7a3 3 0 0 1 4.2 4.2l-2.5 2.5" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        <path d="M9 15l6-6" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('shield')
        <path d="M12 4l7 3v5c0 4.5-3 7.5-7 8.5C8 19.5 5 16.5 5 12V7l7-3z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        @if($side === 'us')
        <path d="M9.5 12l2 2 4-4" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        @else
        <path d="M9 12h6" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @endif
        @break
    @case('content')
        <rect x="5" y="6" width="14" height="12" rx="1.5" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <circle cx="9.5" cy="10.5" r="1.25" fill="{{ $fill }}"/>
        <path d="M13 14l3-3" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('calendar')
        <rect x="5" y="6" width="14" height="13" rx="2" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M8 4v3M16 4v3M5 10h14" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('strategy')
        <circle cx="12" cy="12" r="7" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <circle cx="12" cy="12" r="2.5" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M12 5V3M12 21v-2M5 12H3M21 12h-2" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('growth')
        <path d="M5 17V7M5 17h14M19 11l-4 4-3-3-3 3" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        @break
    @case('unique')
        <path d="M12 4l1.4 4.3H18l-3.6 2.6 1.4 4.3L12 13l-3.8 2.2 1.4-4.3L6 8.3h4.6L12 4z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        @break
    @case('guidelines')
        <path d="M7 5h10v14H7z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M9 8h6M9 11.5h6M9 15h4" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        @break
    @case('files')
        <path d="M6 8.5V18a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9l-4-4H8a2 2 0 0 0-2 1.5z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        @break
    @case('revisions')
        <path d="M6 8.5A6.5 6.5 0 0 1 17 7M18 15.5A6.5 6.5 0 0 1 7 17" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
        <path d="M17 4v3h-3M7 20v-3h3" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        @break
    @case('trademark')
        <path d="M8 8h8v8H8z" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linejoin="round"/>
        <path d="M10 12l2 2 4-4" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        @break
    @case('creative')
        <path d="M7 17l3-9 2 4 2-4 3 9" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        <circle cx="8" cy="8" r="1.25" fill="{{ $fill }}"/>
        <circle cx="16" cy="7" r="1.25" fill="{{ $fill }}"/>
        @break
    @case('testing')
        <rect x="4" y="6" width="7" height="12" rx="1.5" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <rect x="13" y="6" width="7" height="12" rx="1.5" stroke="{{ $stroke }}" stroke-width="1.75"/>
        @break
    @default
        <circle cx="12" cy="12" r="7" stroke="{{ $stroke }}" stroke-width="1.75"/>
        <path d="M12 9v6M9 12h6" stroke="{{ $stroke }}" stroke-width="1.75" stroke-linecap="round"/>
@endswitch
</svg>