@extends('layouts.app')

@section('title', ($page->meta_title ?: $page->title.' | Intelligent modernisieren'))
@section('description', $page->meta_description ?: $page->summary)

@section('content')
    <section class="modernization-category-hero">
        <div class="modernization-category-image"><img src="{{ $page->imageUrl() }}" alt="Passendes Motiv zu {{ $page->title }}" width="1800" height="1100"></div>
        <div class="modernization-category-shade"></div>
        <div class="section-shell modernization-category-shell" data-reveal>
            <nav class="breadcrumb breadcrumb-light" aria-label="Brotkrumen"><a href="{{ route('home') }}">Start</a><span>/</span><a href="{{ route('modernization.index') }}">Intelligent modernisieren</a><span>/</span><strong>{{ $page->title }}</strong></nav>
            <p class="eyebrow"><span></span> {{ $page->eyebrow }}</p>
            <h1>{{ $page->title }}.</h1>
            <p>{{ $page->summary }}</p>
            <a class="button button-primary" href="#ratgeber">Ratgeber auswählen <span>↓</span></a>
        </div>
    </section>

    <section class="modernization-category-intro section">
        <div class="section-shell modernization-category-intro-grid">
            <div data-reveal>
                <p class="eyebrow eyebrow-dark"><span></span> Verständlich eingeordnet</p>
                <h2>Worum geht es<br><em>konkret?</em></h2>
            </div>
            <div class="rich-copy modernization-rich-copy" data-reveal data-reveal-delay="80">{!! $page->body !!}</div>
        </div>
    </section>

    <section class="modernization-topic-section section" id="ratgeber">
        <div class="section-shell">
            <div class="modernization-topic-head" data-reveal>
                <div><p class="eyebrow"><span></span> Alle Themen</p><h2>{{ $page->children->count() }} Ratgeber.<br><em>Direkt erklärt.</em></h2></div>
                <label class="modernization-search"><span class="sr-only">Ratgeber durchsuchen</span><input type="search" placeholder="Thema suchen …" data-modernization-search><i aria-hidden="true">⌕</i></label>
            </div>

            <div class="modernization-topic-grid" data-modernization-topics>
                @foreach($page->children as $topic)
                    <a class="modernization-topic-card" href="{{ route('modernization.show', $topic) }}" data-modernization-topic data-search-text="{{ Str::lower($topic->title.' '.$topic->summary) }}" data-reveal data-reveal-delay="{{ ($loop->index % 3) * 45 }}">
                        <span class="modernization-topic-number">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <span class="modernization-topic-icon">@include('services.partials.visual-icon', ['icon' => $topic->icon])</span>
                        <strong>{{ $topic->title }}</strong>
                        <p>{{ $topic->summary }}</p>
                        <i>Ratgeber öffnen ↗</i>
                    </a>
                @endforeach
            </div>
            <p class="modernization-empty" data-modernization-empty hidden>Zu dieser Suche wurde kein Thema gefunden.</p>
        </div>
    </section>

    <section class="modernization-category-cta section">
        <div class="section-shell modernization-category-cta-inner" data-reveal>
            <div><p class="eyebrow"><span></span> Passende Umsetzung</p><h2>Vom Ratgeber<br><em>zum Projekt.</em></h2></div>
            <p>Sie müssen noch nicht wissen, welche Technik Sie benötigen. Beschreiben Sie Gebäude und Ziel – wir prüfen den Bestand und ordnen die sinnvollen nächsten Schritte ein.</p>
            <div><a class="button button-primary" href="{{ route('services.show', $page->related_service_slug) }}">Passende Leistung ansehen <span>↗</span></a><a class="button button-ghost" href="{{ route('contact', ['thema' => $page->related_service_slug]) }}">Projekt besprechen <span>↗</span></a></div>
        </div>
    </section>
@endsection
