@extends('front.layout.pages-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle : 'Magicpotter')

@php $slides = get_slides(); @endphp
@if ($slides->count())
    @push('preload')
        @php $firstSlide = '/images/slides/' . $slides->first()->image; $firstSrcset = image_srcset($firstSlide); @endphp
        <link rel="preload" as="image" href="{{ webp_or_original($firstSlide) }}" fetchpriority="high"
            @if ($firstSrcset) imagesrcset="{{ $firstSrcset }}" imagesizes="(min-width: 1200px) 730px, (min-width: 992px) 610px, (min-width: 768px) 690px, (min-width: 576px) 510px, calc(100vw - 30px)" @endif>
    @endpush
@endif

@section('content')

    <div class="row">
        <div class="col-lg-8 mb-5 mb-lg-0">

            <header class="home-intro mb-4">
                <h1 class="h2 mb-2">Fitness verständlich erklärt: Muskelaufbau, Abnehmen &amp; Ernährung</h1>
                <p class="lead mb-0">Praxisnahe Guides ohne Mythen – mit Rechenbeispielen, Trainingsplänen und ehrlichen Empfehlungen
                    für Einsteiger und Fortgeschrittene.</p>
            </header>

            @if ($slides->count())
                <div class="mb-5">
                    {{-- Eigener, schlanker Slider: erstes Bild ist sofort sichtbar (schneller LCP), kein jQuery/Slick nötig --}}
                    <div class="post-slider hero-slider" role="region" aria-roledescription="Karussell" aria-label="Highlights">
                        @foreach ($slides as $slide)
                            @php $slidePath = '/images/slides/' . $slide->image; $slideSize = image_size($slidePath); $srcset = image_srcset($slidePath); @endphp
                            <div class="slider-item{{ $loop->first ? ' is-active' : '' }}" role="group" aria-roledescription="Folie"
                                aria-label="{{ $loop->iteration }} von {{ $loop->count }}" @unless ($loop->first) aria-hidden="true" inert @endunless>
                                <img src="{{ webp_or_original($slidePath) }}" class="img-fluid"
                                    @if ($srcset) srcset="{{ $srcset }}" sizes="(min-width: 1200px) 730px, (min-width: 992px) 610px, (min-width: 768px) 690px, (min-width: 576px) 510px, calc(100vw - 30px)" @endif
                                    alt="{{ $slide->heading }}"
                                    @if ($slideSize) width="{{ $slideSize['width'] }}" height="{{ $slideSize['height'] }}" @endif
                                    @if ($loop->first) fetchpriority="high" @else loading="lazy" fetchpriority="low" @endif decoding="async">
                                <div class="slider-content">
                                    @if ($slide->link)
                                        <a href="{{ $slide->link }}">
                                            <p class="h2">{{ $slide->heading }}</p>
                                        </a>
                                    @else
                                        <p class="h2">{{ $slide->heading }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        @if ($slides->count() > 1)
                            <button type="button" class="prevArrow slick-arrow" aria-label="Vorherige Folie"><i class="ti-angle-left" aria-hidden="true"></i></button>
                            <button type="button" class="nextArrow slick-arrow" aria-label="Nächste Folie"><i class="ti-angle-right" aria-hidden="true"></i></button>
                        @endif
                    </div>
                </div>
            @endif

            @if ($featured)
                <article class="mb-5 featured-post">
                    <span class="badge badge-primary mb-2">Neu</span>
                    <h2 class="h3">
                        <a class="post-title" href="{{ route('read_post', $featured->slug) }}">{{ $featured->title }}</a>
                    </h2>
                    <ul class="list-inline post-meta mb-3">
                        <li class="list-inline-item"><i class="ti-calendar mr-1"></i>
                            <time datetime="{{ $featured->created_at->toDateString() }}">{{ date_formatter($featured->created_at) }}</time>
                        </li>
                        @if ($featured->post_category)
                            <li class="list-inline-item"><i class="ti-folder mr-1"></i><a
                                    href="{{ route('category_posts', $featured->post_category->slug) }}">{{ $featured->post_category->name }}</a>
                            </li>
                        @endif
                        <li class="list-inline-item"><i class="ti-timer mr-1"></i>
                            {{ readDuration($featured->title, $featured->content) }} Min. Lesezeit
                        </li>
                    </ul>
                    <p>{{ $featured->meta_description ? seo_description($featured->meta_description, 220) : \Illuminate\Support\Str::ucfirst(words($featured->content, 45)) }}</p>
                    <a href="{{ route('read_post', $featured->slug) }}" class="btn btn-primary">Artikel lesen<span class="sr-only">: {{ $featured->title }}</span></a>
                </article>
            @endif

            <section id="home__latest-posts" aria-labelledby="latest-title">
                <h2 id="latest-title" class="h4 mb-4 section-heading">Neueste Artikel</h2>
                @foreach ($posts as $post)
                    @include('front.partials.post-list-item', ['post' => $post, 'headingTag' => 'h3'])
                @endforeach

                @if ($postCount > $posts->count() + 1)
                    <p class="text-center">
                        <a href="{{ route('all_posts') }}" class="btn btn-outline-primary">Alle {{ $postCount }} Artikel ansehen</a>
                    </p>
                @endif
            </section>

        </div>

        @include('front.partials.sidebar')
    </div>
@endsection