@extends('layouts.app')

@section('title', 'News | Energietec-Plus')
@section('description', 'Aktuelle Informationen zu Photovoltaik, Förderung, Smart Home, Sicherheit und moderner Elektrotechnik in Luxemburg.')

@section('content')
    <section class="editorial-hero">
        <div class="section-shell editorial-hero-shell" data-reveal>
            <p class="eyebrow"><span></span> Technik · Förderung · Gebäudelösungen</p>
            <h1>News.<br><em>Technik &amp; Energie.</em></h1>
            <p>Förderungen, technische Entwicklungen und praktische Orientierung – wir veröffentlichen nur Themen mit echtem Nutzen.</p>
        </div>
    </section>
    <section class="article-index section">
        <div class="section-shell article-grid{{ $posts->count() === 1 ? ' article-grid--single' : '' }}">
            @forelse($posts as $post)
                <article data-reveal data-reveal-delay="{{ ($loop->index % 3) * 60 }}">
                    @if($post->cardImageUrl())
                        <a class="article-index-image" href="{{ $post->publicUrl() }}" aria-label="{{ $post->title }} öffnen">
                            <img src="{{ $post->cardImageUrl() }}" alt="{{ $post->cardImageAlt() }}" width="1672" height="941" loading="eager">
                            <span>{{ $post->category }}</span>
                        </a>
                    @endif
                    <div class="article-index-content">
                        <span class="news-tag">{{ $post->category }}</span>
                        <h2><a href="{{ $post->publicUrl() }}">{{ $post->title }}</a></h2>
                        <p>{{ $post->excerpt }}</p>
                        <footer><time datetime="{{ $post->published_at?->toDateString() }}">{{ $post->published_at?->translatedFormat('d. F Y') }}</time><a href="{{ $post->publicUrl() }}">Mehr erfahren <span>↗</span></a></footer>
                    </div>
                </article>
            @empty
                <p>Momentan sind keine Beiträge veröffentlicht.</p>
            @endforelse
        </div>
        <div class="section-shell pagination">{{ $posts->links() }}</div>
    </section>
@endsection
