@php
    $imageCard = (bool) $service->imageUrl();
    $wideImageCard = in_array($service->slug, ['photovoltaik', 'intelligente-beleuchtung'], true);
    $fullImageCard = $service->slug === 'elektroinstallation-service';
    $graphicClass = match ($service->slug) {
        'stromspeicher' => 'service-card-graphic',
        'wallbox-e-mobilitaet' => 'service-card-graphic service-card-wallbox',
        'smart-home-knx' => 'service-card-network',
        'sicherheitstechnik' => 'service-card-graphic service-card-security',
        'elektroinstallation-service' => 'service-card-electric',
        default => 'service-card-graphic',
    };
@endphp

<a class="service-card {{ $imageCard ? 'service-card-image'.($wideImageCard ? ' service-card-wide' : '').($fullImageCard ? ' service-card-full' : '') : $graphicClass }}" id="leistung-{{ $service->slug }}" href="{{ route('services.show', $service) }}" data-audiences="{{ implode(' ', $service->audiences ?? ['privat', 'gewerbe']) }}" data-service="{{ $service->slug }}" data-reveal data-reveal-delay="{{ ($loop->index % 2) * 70 }}" aria-label="{{ $service->title }} – Leistungsseite öffnen">
    @if($imageCard)
        <img src="{{ $service->imageUrl() }}" alt="{{ $service->title }} – {{ $service->eyebrow }}" width="1200" height="600">
        <div class="service-overlay"></div>
    @elseif($service->slug === 'stromspeicher')
        <div class="battery-graphic" aria-hidden="true"><div class="battery-shell"><span></span><span></span><span></span><span></span></div><div class="battery-flow"></div></div>
    @elseif($service->slug === 'wallbox-e-mobilitaet')
        <div class="wallbox-graphic" aria-hidden="true"><div class="wallbox-unit"><span></span><i></i></div><svg viewBox="0 0 300 170"><path d="M130 60c55 0 36 77 91 77h54"/><circle cx="282" cy="137" r="6"/></svg></div>
    @elseif($service->slug === 'smart-home-knx')
        <div class="network-graphic" aria-hidden="true"><span class="network-center">KNX</span><span class="network-node node-one">Licht</span><span class="network-node node-two">Klima</span><span class="network-node node-three">Schatten</span><span class="network-node node-four">Energie</span></div>
    @elseif($service->slug === 'sicherheitstechnik')
        <div class="security-graphic" aria-hidden="true"><div class="security-radar"><span></span><i></i><b></b></div><svg viewBox="0 0 120 120"><path d="M60 12 99 29v29c0 29-14 43-39 54-25-11-39-25-39-54V29l39-17Z"/><path d="m43 59 11 11 24-28"/></svg></div>
    @elseif($service->slug === 'elektroinstallation-service')
        <div class="electric-lines" aria-hidden="true"><span></span><span></span><span></span><span></span><i></i></div>
    @endif
    <div class="service-content">
        <span class="service-index">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
        <div><p>{{ $service->eyebrow }}</p><h3>{{ $service->title }}</h3></div>
        <span class="service-arrow" aria-hidden="true">↗</span>
    </div>
</a>
