@php
    $wallboxKnowledge = collect($service->knowledge_sections ?? []);
    $wallboxVariants = collect($wallboxKnowledge->get(0)['items'] ?? [])->take(4);
    $wallboxMultiUser = collect($wallboxKnowledge->get(1)['items'] ?? []);
    $wallboxIcons = ['load', 'solar-car', 'smart-wallbox', 'users-card'];
    $wallboxUses = [
        ['icon' => 'home', 'title' => 'Zuhause', 'text' => 'Sicher in Garage oder Carport laden – mit passender Zuleitung, Schutztechnik und auf Wunsch PV-Überschuss.'],
        ['icon' => 'parking', 'title' => 'Mehrfamilienhaus', 'text' => 'Ladepunkte gemeinsam vorbereiten, Leistung verteilen und Ladevorgänge Wohnungen oder Nutzern zuordnen.'],
        ['icon' => 'building', 'title' => 'Betrieb & Flotte', 'text' => 'Mitarbeiter, Kunden und Flottenfahrzeuge laden – mit Zugangsrechten, Lastmanagement und ausbaufähiger Infrastruktur.'],
        ['icon' => 'users-card', 'title' => 'Dienstwagen', 'text' => 'Zu Hause geladene Energie nachvollziehbar erfassen und über eine passende Schnittstelle zur Abrechnung bereitstellen.'],
    ];
@endphp

<section class="wallbox-offers section" id="wallbox-varianten" aria-labelledby="wallbox-offers-title">
    <div class="section-shell">
        <div class="wallbox-offers-head" data-reveal>
            <div>
                <p class="eyebrow eyebrow-dark"><span></span> Wallbox auswählen</p>
                <h2 id="wallbox-offers-title">Welche Wallbox passt?</h2>
            </div>
            <p>Entscheidend sind nicht Marke oder maximale Leistung, sondern Gebäude, Fahrzeug, Standzeit und gewünschte Funktionen.</p>
        </div>

        <div class="wallbox-offer-grid">
            @foreach($wallboxVariants as $variant)
                <article class="wallbox-offer-card" data-reveal data-reveal-delay="{{ $loop->index * 65 }}">
                    <header>
                        <span class="service-pictogram wallbox-pictogram" aria-hidden="true">@include('services.partials.lighting-icon', ['icon' => $wallboxIcons[$loop->index] ?? 'wallbox'])</span>
                        <small>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</small>
                    </header>
                    <p>{{ $variant['label'] }}</p>
                    <h3>{{ $variant['title'] }}</h3>
                    <div>{{ $variant['text'] }}</div>
                </article>
            @endforeach
        </div>

        <div class="wallbox-offers-action" data-reveal>
            <span>Fahrzeug, Stellplatz und vorhandene Elektroanlage kurz einordnen.</span>
            <a href="{{ $configuratorUrl }}">Passende Wallbox planen <i aria-hidden="true">↗</i></a>
        </div>
    </div>
</section>

<section class="wallbox-gallery section" id="wallbox-beispiele" aria-labelledby="wallbox-gallery-title">
    <div class="section-shell">
        <div class="wallbox-gallery-head" data-reveal>
            <div>
                <p class="eyebrow"><span></span> Echte Anwendungsfälle</p>
                <h2 id="wallbox-gallery-title">Ein Ladepunkt.<br><em>Oder ein ganzes System.</em></h2>
            </div>
            <p>Die Technik verändert sich mit der Zahl der Stellplätze: Zu Hause zählt der sichere Einzelanschluss, bei mehreren Nutzern zusätzlich Verteilung, Zugang und Abrechnung.</p>
        </div>

        <div class="wallbox-gallery-grid">
            <figure data-reveal>
                <img src="{{ asset('images/service-details/wallbox-detail.jpg') }}" alt="Fest installierte Wallbox mit angeschlossenem Ladekabel und grüner Statusanzeige" width="760" height="870" loading="lazy">
                <figcaption><small>01 · Zuhause</small><strong>Für regelmäßiges Laden sicher installiert</strong></figcaption>
            </figure>
            <figure data-reveal data-reveal-delay="90">
                <img src="{{ asset('images/service-details/wallbox-mehrnutzer.jpg') }}" alt="Mehrere Elektrofahrzeuge an einzelnen Ladepunkten auf einem gemeinsamen Parkplatz" width="1140" height="850" loading="lazy">
                <figcaption><small>02 · Mehrere Nutzer</small><strong>Leistung verteilen und Verbräuche zuordnen</strong></figcaption>
            </figure>
        </div>
    </div>
</section>

<section class="wallbox-power section" id="wallbox-leistung" aria-labelledby="wallbox-power-title">
    <div class="section-shell wallbox-power-shell">
        <div class="wallbox-power-copy" data-reveal>
            <p class="eyebrow eyebrow-dark"><span></span> Ladeleistung</p>
            <h2 id="wallbox-power-title">11 oder 22 kW?</h2>
            <p>Mehr Ladeleistung ist nur dann schneller, wenn Fahrzeug, Kabel und Gebäudeanschluss sie ebenfalls unterstützen. Für viele Fahrzeuge und lange Standzeiten ist 11 kW ausreichend; 22 kW wird projektspezifisch geprüft.</p>
            <p class="wallbox-power-rule"><strong>Die tatsächliche Ladeleistung bestimmt immer das schwächste Glied:</strong> Fahrzeug · Kabel · Wallbox · Hausanschluss.</p>
            <a class="button button-dark" href="{{ $configuratorUrl }}">Ladeleistung prüfen <span>↗</span></a>
        </div>

        <div class="wallbox-power-panel" data-reveal data-reveal-delay="100">
            <article>
                <span class="service-pictogram wallbox-pictogram" aria-hidden="true">@include('services.partials.lighting-icon', ['icon' => 'wallbox'])</span>
                <small>Typischer Privatbereich</small>
                <strong>11 <em>kW</em></strong>
                <p>Für viele Elektroautos und das Laden über Nacht eine sinnvolle Größenordnung.</p>
                <i><b style="--charge: 55%"></b></i>
            </article>
            <article>
                <span class="service-pictogram wallbox-pictogram" aria-hidden="true">@include('services.partials.lighting-icon', ['icon' => 'power'])</span>
                <small>Nur wenn technisch nutzbar</small>
                <strong>22 <em>kW</em></strong>
                <p>Fahrzeugunterstützung, Anschlussreserve sowie Melde- und Genehmigungsanforderungen prüfen.</p>
                <i><b style="--charge: 100%"></b></i>
            </article>
            <div class="wallbox-power-factors">
                <span>Fahrzeug</span><i></i><span>Wallbox</span><i></i><span>Gebäude</span>
            </div>
        </div>

        <div class="wallbox-vehicle-notes" data-reveal>
            <article>
                <span class="service-pictogram wallbox-pictogram" aria-hidden="true">@include('services.partials.lighting-icon', ['icon' => 'plug-hybrid'])</span>
                <div><small>Elektroauto & Plug-in-Hybrid</small><h3>Beide laden an der Wallbox.</h3><p>Ein Plug-in-Hybrid nutzt für kurze Strecken seine Batterie, ein Elektroauto fährt ausschließlich elektrisch. Welche AC-Ladeleistung tatsächlich ankommt, bestimmt auch das jeweilige Fahrzeug.</p></div>
            </article>
            <article>
                <span class="service-pictogram wallbox-pictogram" aria-hidden="true">@include('services.partials.lighting-icon', ['icon' => 'battery'])</span>
                <div><small>Batterie & Ladezeit</small><h3>Fahrzeugdaten entscheiden.</h3><p>Batteriegröße, Ladezustand, Bordlader und Temperatur beeinflussen die Ladezeit. Die Wallbox stellt die Leistung sicher bereit; das Fahrzeug regelt die Aufnahme.</p></div>
            </article>
        </div>
    </div>
</section>

<section class="wallbox-energy section" id="wallbox-pv" aria-labelledby="wallbox-energy-title">
    <span id="so-funktioniert-es" aria-hidden="true"></span>
    <div class="section-shell wallbox-energy-shell">
        <div class="wallbox-energy-copy" data-reveal>
            <p class="eyebrow"><span></span> PV und Lastmanagement</p>
            <h2 id="wallbox-energy-title">Solarstrom ins Auto.</h2>
            <p>Die Photovoltaikanlage erzeugt Gleichstrom, der Wechselrichter macht ihn im Hausnetz nutzbar. Das Energiemanagement misst Erzeugung und Verbrauch und passt die Ladeleistung der Wallbox daran an.</p>
            <ul>
                <li><i aria-hidden="true">✓</i><span><strong>PV-Überschuss:</strong> Laden, wenn mehr Solarstrom entsteht als das Gebäude benötigt.</span></li>
                <li><i aria-hidden="true">✓</i><span><strong>Dynamische Last:</strong> Ladeleistung reduzieren, wenn andere große Verbraucher aktiv sind.</span></li>
                <li><i aria-hidden="true">✓</i><span><strong>Zeitsteuerung:</strong> Ladefenster und Mindestladung passend zum Alltag festlegen.</span></li>
            </ul>
        </div>

        <div class="wallbox-energy-map" data-service-motion data-reveal data-reveal-delay="120" aria-label="Solarstrom fließt von der Photovoltaikanlage über Wechselrichter und Hausverteilung zum Gebäude und zur Wallbox. Das Stromnetz kann Strom liefern oder Überschüsse aufnehmen. Das Energiemanagement misst Wechselrichter und Hausverteilung und steuert die Ladeleistung der Wallbox über separate Signalleitungen.">
            <div class="wallbox-map-top"><span><i></i> Energiefluss</span><span><i></i> Messung und Steuerung</span></div>
            <svg viewBox="0 0 1000 520" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                    <marker id="wallbox-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path d="M0 0L10 5 0 10z" fill="#94d4e9"/></marker>
                </defs>
                <g class="wallbox-energy-routes">
                    <path d="M175 248H275"/>
                    <path d="M435 248H505"/>
                    <path d="M665 248C735 248 750 120 810 120"/>
                    <path d="M665 248H810"/>
                    <path class="wallbox-grid-route" d="M665 248C735 248 750 378 810 378"/>
                </g>
                <g class="wallbox-control-routes">
                    <path d="M545 455C500 410 420 370 365 306"/>
                    <path d="M590 455C590 390 600 355 610 306"/>
                    <path d="M635 455C720 430 735 305 810 248"/>
                </g>
            </svg>
            <div class="wallbox-map-node node-pv"><span class="service-pictogram">@include('services.partials.lighting-icon', ['icon' => 'solar'])</span><strong>PV-Anlage</strong><small>erzeugt Energie</small></div>
            <div class="wallbox-map-node node-inverter"><span class="service-pictogram">@include('services.partials.lighting-icon', ['icon' => 'power'])</span><strong>Wechselrichter</strong><small>macht Strom nutzbar</small></div>
            <div class="wallbox-map-node node-board"><span class="service-pictogram">@include('services.partials.lighting-icon', ['icon' => 'distribution'])</span><strong>Hausverteilung</strong><small>verteilt Energie</small></div>
            <p class="wallbox-mobile-branch-label">Danach wird parallel verteilt:</p>
            <div class="wallbox-map-node node-home"><span class="service-pictogram">@include('services.partials.lighting-icon', ['icon' => 'home'])</span><strong>Gebäude</strong><small>wird mit Energie versorgt</small></div>
            <div class="wallbox-map-node node-car"><span class="service-pictogram">@include('services.partials.lighting-icon', ['icon' => 'solar-car'])</span><strong>Wallbox & Fahrzeug</strong><small>Ladeleistung geregelt</small></div>
            <div class="wallbox-map-node node-grid"><span class="service-pictogram">@include('services.partials.lighting-icon', ['icon' => 'grid'])</span><strong>Stromnetz</strong><small>Bezug &amp; Einspeisung</small></div>
            <div class="wallbox-map-node node-manager"><span class="service-pictogram">@include('services.partials.lighting-icon', ['icon' => 'controls'])</span><strong>Energiemanagement</strong><small>misst &amp; steuert Ladeleistung</small></div>
        </div>
    </div>
</section>

<section class="wallbox-use section" id="wallbox-einsatz" aria-labelledby="wallbox-use-title">
    <div class="section-shell">
        <div class="wallbox-use-head" data-reveal>
            <p class="eyebrow eyebrow-dark"><span></span> Einsatzbereiche</p>
            <h2 id="wallbox-use-title">Wer soll laden?</h2>
        </div>
        <div class="wallbox-use-grid">
            @foreach($wallboxUses as $use)
                <article data-reveal data-reveal-delay="{{ $loop->index * 65 }}">
                    <span class="service-pictogram wallbox-pictogram" aria-hidden="true">@include('services.partials.lighting-icon', ['icon' => $use['icon']])</span>
                    <small>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</small>
                    <h3>{{ $use['title'] }}</h3>
                    <p>{{ $use['text'] }}</p>
                </article>
            @endforeach
        </div>

        <aside class="wallbox-funding" data-reveal aria-label="Offizieller Informationsstand zur Luxemburger Wallbox-Förderung 2026">
            <div>
                <p>Luxemburger Förderung 2026</p>
                <h3>Private Ladepunkte und gemeinsames Lademanagement.</h3>
                <span>Guichet.lu nennt für förderfähige private Installationen 50 % der Nettokosten – mit unterschiedlichen Höchstbeträgen je nach Wallbox und Gebäude. Der Rechtsrahmen ist dort weiterhin als Entwurf gekennzeichnet.</span>
            </div>
            <div class="wallbox-funding-facts">
                <span><strong>750 €</strong><small>Standard-Wallbox maximal</small></span>
                <span><strong>1.200 €</strong><small>intelligente Wallbox maximal</small></span>
                <span><strong>1.400 €</strong><small>ISO 15118-20 im Jahr 2026 maximal</small></span>
                <span><strong>40.000 €</strong><small>gemeinsames Lademanagement maximal</small></span>
            </div>
            <a href="https://guichet.public.lu/de/citoyens/transport/transports-individuels/aides-financieres/installation-bornes-charges-privees-2026.html" target="_blank" rel="noopener">Offizielle Bedingungen prüfen <i aria-hidden="true">↗</i></a>
        </aside>

        @if($wallboxMultiUser->isNotEmpty())
            <div class="wallbox-multi-notes" data-reveal>
                @foreach($wallboxMultiUser->take(3) as $item)
                    <article><small>{{ $item['label'] }}</small><h3>{{ $item['title'] }}</h3><p>{{ $item['text'] }}</p></article>
                @endforeach
            </div>
        @endif
    </div>
</section>
