@extends('layouts.app')

@section('title', 'Leistungen | Energietec-Plus Luxemburg')
@section('description', 'Photovoltaik, Speicher, Wallbox, KNX Smart Home, Beleuchtung, Sicherheit und Elektroinstallation aus einer Hand.')

@section('content')
    <section class="page-hero page-hero-services">
        <div class="page-hero-grid" aria-hidden="true"></div>
        <div class="section-shell page-hero-shell">
            <div data-reveal>
                <p class="eyebrow"><span></span> Leistungen</p>
                <h1>Leistungen von Energietec-Plus.<br><em>Sieben Bereiche für moderne Gebäude.</em></h1>
                <p>Wählen Sie direkt das Thema, das zu Ihrem Gebäude passt. Wir betrachten jede Leistung einzeln – und die Schnittstellen zu allen anderen von Anfang an mit.</p>
            </div>
            <div class="page-hero-stat" data-reveal data-reveal-delay="100">
                <strong>{{ str_pad((string) $services->count(), 2, '0', STR_PAD_LEFT) }}</strong>
                <span>Leistungsbereiche<br>modular kombinierbar</span>
            </div>
        </div>
    </section>

    <section class="service-index-section section">
        <div class="section-shell service-index-grid">
            @foreach($services as $service)
                <a class="service-index-card {{ $service->imageUrl() ? 'has-image' : '' }}" href="{{ route('services.show', $service) }}" data-service="{{ $service->slug }}" data-reveal data-reveal-delay="{{ ($loop->index % 3) * 70 }}">
                    <div class="service-index-visual">
                        @if($service->imageUrl())
                            <img src="{{ $service->imageUrl() }}" alt="Passendes Motiv zum Bereich {{ $service->title }}" width="1200" height="700">
                        @else
                            <span class="service-index-pattern" aria-hidden="true"><i></i><i></i><i></i></span>
                        @endif
                        <span class="service-index-number">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                    </div>
                    <div class="service-index-copy">
                        <small>{{ $service->eyebrow }}</small>
                        <h2>{{ $service->title }}</h2>
                        <p>{{ $service->summary }}</p>
                        <span class="service-index-link"><span>Leistung ansehen</span><i>↗</i></span>
                    </div>
                </a>
            @endforeach

            <a class="service-index-card service-index-modernization" href="{{ route('modernization.index') }}" data-service="intelligent-modernisieren" data-reveal>
                <div class="service-index-visual">
                    <img src="{{ asset('images/generated/elektropruefung.jpg') }}" alt="Elektrofachkraft prüft eine moderne elektrische Verteilung" width="1200" height="700">
                    <span class="service-index-number">R</span>
                </div>
                <div class="service-index-copy">
                    <small>Ratgeber für Renovierung & Bestand</small>
                    <h2>Intelligent modernisieren</h2>
                    <p>Sicherheit, Komfort, altersgerechte Bedienung und Energieeffizienz bei der Renovierung von Anfang an mitdenken.</p>
                    <span class="service-index-link"><span>Ratgeber öffnen</span><i>↗</i></span>
                </div>
            </a>
        </div>
    </section>

    @include('partials.contact-cta')
@endsection
