@extends('layouts.app')

@section('title', 'Intelligent modernisieren | Energietec-Plus Luxemburg')
@section('description', 'Elektroinstallation, Sicherheit, Komfort, altersgerechte Bedienung und Energieeffizienz bei der Modernisierung gemeinsam planen.')

@section('content')
    <section class="modernization-hero">
        <div class="modernization-hero-grid" aria-hidden="true"></div>
        <div class="section-shell modernization-hero-shell">
            <div class="modernization-hero-copy" data-reveal>
                <nav class="breadcrumb breadcrumb-light" aria-label="Brotkrumen"><a href="{{ route('home') }}">Start</a><span>/</span><a href="{{ route('services.index') }}">Leistungen</a><span>/</span><strong>Intelligent modernisieren</strong></nav>
                <p class="eyebrow"><span></span> Ratgeber für den Bestand</p>
                <h1>Intelligent<br><em>modernisieren.</em></h1>
                <p>Bei einer Renovierung werden Dächer, Wände, Böden und Sanitäranlagen erneuert. Die Elektroinstallation darf dabei nicht vergessen werden: Sie entscheidet mit über Sicherheit, Komfort, Energieverbrauch und die spätere Erweiterbarkeit des Gebäudes.</p>
                <div class="modernization-hero-actions">
                    <a class="button button-primary" href="#themenwelten">Thema auswählen <span>↓</span></a>
                    <a class="button button-ghost" href="{{ route('contact') }}">Modernisierung besprechen <span>↗</span></a>
                </div>
            </div>

            <div class="modernization-hero-visual" data-reveal data-reveal-delay="140">
                <img src="{{ asset('images/generated/elektropruefung.jpg') }}" alt="Elektrofachkraft prüft die modernisierte elektrische Verteilung eines Wohngebäudes" width="1600" height="1067">
                <div class="modernization-scan" aria-hidden="true"></div>
                <div class="modernization-hero-note"><span>Bestand</span><strong>prüfen</strong><i>→</i><span>Zukunft</span><strong>vorbereiten</strong></div>
            </div>
        </div>
    </section>

    <section class="modernization-intro section">
        <div class="section-shell modernization-intro-grid">
            <div data-reveal>
                <p class="eyebrow eyebrow-dark"><span></span> Warum jetzt mitdenken?</p>
                <h2>Mehr Technik.<br><em>Mehr Möglichkeiten.</em></h2>
            </div>
            <div class="modernization-intro-copy" data-reveal data-reveal-delay="90">
                <p>Heute nutzen wir deutlich mehr Elektrogeräte als früher. Gleichzeitig sollen Gebäude Energie sparen, im Alltag einfacher funktionieren und auch bei veränderten Lebenssituationen gut nutzbar bleiben. Eine modernisierte Elektroanlage schafft dafür die Grundlage.</p>
                <p>Die Lösung muss nicht alles gleichzeitig automatisieren. Wichtig ist, Leitungen, Verteilung, Schutz, Bedienung und Schnittstellen so zu planen, dass heutige Anforderungen erfüllt sind und spätere Ergänzungen möglich bleiben.</p>
            </div>
        </div>

        <div class="section-shell modernization-questions" data-reveal>
            @foreach([
                ['Steckdosen', 'Reichen Anschlüsse und Stromkreise für die heutigen Geräte?'],
                ['Bestand', 'Ist die vorhandene Elektroinstallation sicher und belastbar?'],
                ['Energie', 'Wo lassen sich Verbrauch und laufende Kosten sinnvoll senken?'],
                ['Alltag', 'Welche Funktionen erhöhen Komfort und Selbstständigkeit?'],
                ['Steuerung', 'Was soll vor Ort, automatisch oder mobil bedienbar sein?'],
                ['Schutz', 'Wie werden Einbruch, Brand und andere Gefahren erkannt?'],
            ] as $index => [$label, $question])
                <article><span>{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span><small>{{ $label }}</small><p>{{ $question }}</p></article>
            @endforeach
        </div>
    </section>

    <section class="modernization-worlds section" id="themenwelten">
        <div class="section-shell">
            <div class="section-heading" data-reveal>
                <div>
                    <p class="eyebrow"><span></span> Vier Themenwelten</p>
                    <h2>Was möchten Sie<br><em>verbessern?</em></h2>
                </div>
                <p>Jede Themenwelt führt zu konkreten Ratgebern. Dort werden Funktionen, Möglichkeiten und wichtige Planungsfragen verständlich erklärt.</p>
            </div>

            <div class="modernization-world-grid">
                @foreach($categories as $category)
                    <a class="modernization-world-card" href="{{ route('modernization.show', $category) }}" data-reveal data-reveal-delay="{{ ($loop->index % 2) * 90 }}">
                        <span class="modernization-world-image"><img src="{{ $category->imageUrl() }}" alt="Passendes Motiv zu {{ $category->title }}" width="1400" height="900"></span>
                        <span class="modernization-world-overlay"></span>
                        <span class="modernization-world-index">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <span class="modernization-world-icon">@include('services.partials.visual-icon', ['icon' => $category->icon])</span>
                        <span class="modernization-world-content">
                            <small>{{ $category->eyebrow }}</small>
                            <strong>{{ $category->title }}</strong>
                            <span>{{ $category->summary }}</span>
                            <i>{{ $category->children()->published()->count() }} Ratgeber öffnen ↗</i>
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <section class="modernization-links section">
        <div class="section-shell">
            <div class="modernization-links-head" data-reveal>
                <p class="eyebrow eyebrow-dark"><span></span> Direkt weiter</p>
                <h2>Planen. Auswählen. Umsetzen.</h2>
            </div>
            <div class="modernization-link-grid">
                <a href="{{ route('company') }}#partnerschaften" data-reveal>
                    <span>01</span><small>Systeme & Hersteller</small><strong>{{ $partners->count() }} veröffentlichte Partner und Technologien</strong><i>Partner ansehen ↗</i>
                </a>
                <a href="{{ route('posts.index') }}" data-reveal data-reveal-delay="70">
                    <span>02</span><small>News & Fachwissen</small><strong>Neue Lösungen, Hinweise und Entwicklungen</strong><i>News lesen ↗</i>
                </a>
                <a href="{{ route('contact') }}" data-reveal data-reveal-delay="140">
                    <span>03</span><small>Persönliche Beratung</small><strong>Bestand prüfen und nächste Schritte einordnen</strong><i>Kontakt aufnehmen ↗</i>
                </a>
            </div>
        </div>
    </section>
@endsection
