@extends('layouts.app')

@section('title', $page->meta_title ?: $page->title.' | Energietec-Plus')
@section('description', $page->meta_description ?: $page->intro)
@if($page->slug === 'unternehmen')
    @section('og_image', $page->getFirstMediaUrl('hero') ?: asset('images/company/energietec-team-fuhrpark.jpg'))
@endif

@section('content')
    <section class="editorial-hero">
        <div class="section-shell editorial-hero-shell" data-reveal>
            <nav class="breadcrumbs" aria-label="Brotkrümelnavigation"><a href="{{ route('home') }}">Start</a><span>/</span><strong>{{ $page->title }}</strong></nav>
            <p class="eyebrow"><span></span> {{ $page->eyebrow }}</p>
            <h1>{{ $page->title }}</h1>
            <p>{{ $page->intro }}</p>
        </div>
    </section>
    @if($page->slug === 'unternehmen')
        @php($companyImage = $page->getFirstMediaUrl('hero'))
        <section class="company-portrait-section" aria-label="Energietec-Plus vor Ort">
            <div class="section-shell">
                <figure class="company-portrait" data-reveal>
                    @if($companyImage)
                        <img src="{{ $companyImage }}" alt="Team von Energietec-Plus vor den beschrifteten Servicefahrzeugen am Firmenstandort in Munsbach" width="1672" height="941" loading="eager" decoding="async">
                    @else
                        <picture>
                            <source media="(max-width: 720px)" srcset="{{ asset('images/company/energietec-team-fuhrpark-960.jpg') }}">
                            <img src="{{ asset('images/company/energietec-team-fuhrpark.jpg') }}" alt="Team von Energietec-Plus vor den beschrifteten Servicefahrzeugen am Firmenstandort in Munsbach" width="1672" height="941" loading="eager" decoding="async">
                        </picture>
                    @endif
                    <figcaption>
                        <span>Vor Ort in Luxemburg</span>
                        <strong>Ein Team für Planung, Installation und Service.</strong>
                    </figcaption>
                </figure>
            </div>
        </section>
    @endif
    <section class="editorial-section section">
        <div class="section-shell editorial-layout">
            @if($page->slug === 'unternehmen')
                <aside class="company-brand-card" data-reveal>
                    <img src="{{ asset('images/brand/energietec-plus-logo.png') }}" alt="Energietec-Plus" width="609" height="399" loading="lazy" decoding="async">
                    <p>Strom.<br>Smart.<br>Nachhaltig.</p>
                </aside>
            @else
                <aside data-reveal><span>et-+</span><p>Strom.<br>Smart.<br>Nachhaltig.</p></aside>
            @endif
            <article class="prose" data-reveal data-reveal-delay="80">{!! $page->body !!}</article>
        </div>
    </section>
    @if($page->slug === 'unternehmen')
        <section class="company-work-section section" aria-labelledby="company-work-title">
            <div class="section-shell">
                <header class="company-work-heading" data-reveal>
                    <div>
                        <p class="eyebrow"><span></span> Einblicke in unsere Arbeit</p>
                        <h2 id="company-work-title">Planen. Prüfen. Umsetzen.</h2>
                    </div>
                    <p>Vom vernetzten System bis zur sicheren Energieanlage: Entscheidend sind eine saubere Ausführung, nachvollziehbare Prüfung und zuverlässige Inbetriebnahme.</p>
                </header>
                <div class="company-work-gallery">
                    <figure class="company-work-main" data-reveal>
                        <img src="{{ asset('images/generated/knx-inbetriebnahme.jpg') }}" alt="Techniker bei der Inbetriebnahme einer vernetzten Elektro- und KNX-Verteilung" width="1792" height="1024" loading="lazy" decoding="async">
                        <figcaption><span>01</span><strong>Systeme in Betrieb nehmen</strong></figcaption>
                    </figure>
                    <figure data-reveal data-reveal-delay="70">
                        <img src="{{ asset('images/generated/elektropruefung.jpg') }}" alt="Elektrofachkraft bei einer Messung in einer Unterverteilung" width="1792" height="1024" loading="lazy" decoding="async">
                        <figcaption><span>02</span><strong>Elektrische Anlagen prüfen</strong></figcaption>
                    </figure>
                    <figure data-reveal data-reveal-delay="140">
                        <img src="{{ asset('images/service-details/pv-montage.jpg') }}" alt="Monteur bei der Montage von Photovoltaikmodulen auf einem Hausdach" width="500" height="333" loading="lazy" decoding="async">
                        <figcaption><span>03</span><strong>Energietechnik montieren</strong></figcaption>
                    </figure>
                </div>
            </div>
        </section>
        @include('partials.company-navigation')
        @include('partials.company-partners', ['partners' => $partners])
        @include('partials.contact-cta')
    @endif
@endsection
