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

@php
    $featuredPath = post_image($post);
    $featuredFull = webp_or_original($featuredPath);
    $featuredSize = image_size($featuredFull);
    // 800-px-Version für Handys (wird beim ersten Aufruf einmalig erzeugt)
    $featuredSmall = ($featuredSize['width'] ?? 0) > 900 ? image_variant($featuredPath, 800) : null;
    $featuredSrcset = $featuredSmall && $featuredSmall !== $featuredFull ? $featuredSmall . ' 800w, ' . $featuredFull . ' ' . $featuredSize['width'] . 'w' : '';
    $featuredSizes = '(min-width: 1200px) 730px, (min-width: 992px) 610px, (min-width: 768px) 690px, (min-width: 576px) 510px, calc(100vw - 30px)';
    $postUrl = route('read_post', $post->slug);
    $updated = $post->updated_at && $post->updated_at->gt($post->created_at->copy()->addDay()) ? $post->updated_at : null;
@endphp
@push('preload')
    <link rel="preload" as="image" href="{{ $featuredFull }}" fetchpriority="high"
        @if ($featuredSrcset) imagesrcset="{{ $featuredSrcset }}" imagesizes="{{ $featuredSizes }}" @endif>
@endpush

@section('content')

    <div class="row">
        <div class="col-lg-8 mb-5 mb-lg-0">
            @include('front.partials.breadcrumbs', ['items' => array_filter([
                ['Start', url('/')],
                $post->post_category ? [$post->post_category->name, route('category_posts', $post->post_category->slug)] : null,
                [$post->title, null],
            ])])

            <article class="mb-4">
                <header class="mb-3">
                    <h1 class="mb-3">{{ $post->title }}</h1>
                    <ul class="list-inline post-meta">
                        @if ($post->author)
                            <li class="list-inline-item"><i class="ti-user mr-1"></i>Von <a
                                    href="{{ route('author_posts', $post->author->username) }}">{{ $post->author->name }}</a>
                            </li>
                        @endif
                        <li class="list-inline-item"><i class="ti-calendar mr-1"></i>
                            <time datetime="{{ $post->created_at->toW3CString() }}">{{ date_formatter($post->created_at) }}</time>
                        </li>
                        @if ($updated)
                            <li class="list-inline-item">Aktualisiert:
                                <time datetime="{{ $updated->toW3CString() }}">{{ date_formatter($updated) }}</time>
                            </li>
                        @endif
                        @if ($post->post_category)
                            <li class="list-inline-item"><i class="ti-folder mr-1"></i><a
                                    href="{{ route('category_posts', $post->post_category->slug) }}">{{ $post->post_category->name }}</a>
                            </li>
                        @endif
                        <li class="list-inline-item"><i class="ti-timer mr-1"></i>
                            {{ readDuration($post->title, $post->content) }} Min. Lesezeit
                        </li>
                    </ul>
                </header>

                <figure class="mb-3">
                    <img src="{{ $featuredFull }}" alt="{{ $post->title }}"
                        @if ($featuredSrcset) srcset="{{ $featuredSrcset }}" sizes="{{ $featuredSizes }}" @endif
                        @if ($featuredSize) width="{{ $featuredSize['width'] }}" height="{{ $featuredSize['height'] }}" @endif
                        fetchpriority="high" decoding="async" class="img-fluid rounded-lg">
                </figure>

                @if ($hasAffiliate || count($recommendations))
                    <p class="affiliate-notice">
                        <strong>{{ config('affiliate.label') }}:</strong> Dieser Artikel enthält Affiliate-Links (mit * markiert).
                        Kaufst du darüber ein, erhalte ich eine kleine Provision – der Preis bleibt für dich gleich.
                        <a href="{{ route('affiliate_hinweis') }}">Mehr dazu</a>
                    </p>
                @endif

                @if (count($toc))
                    <nav class="toc" aria-labelledby="toc-title">
                        <p id="toc-title" class="toc__title">Inhalt</p>
                        <ol class="toc__list">
                            @foreach ($toc as $entry)
                                <li><a href="#{{ $entry['id'] }}">{{ $entry['text'] }}</a></li>
                            @endforeach
                            @if (count($faq))
                                <li><a href="#faq">Häufige Fragen</a></li>
                            @endif
                        </ol>
                    </nav>
                @endif

                <div class="content">
                    {!! $content !!}
                </div>

                @if (count($faq))
                    <section id="faq" class="faq mt-5" aria-labelledby="faq-title">
                        <h2 id="faq-title">Häufige Fragen</h2>
                        @foreach ($faq as $item)
                            <details class="faq__item" @if ($loop->first) open @endif>
                                <summary class="faq__q">{{ $item['question'] }}</summary>
                                <div class="faq__a">{!! nl2br(e($item['answer'])) !!}</div>
                            </details>
                        @endforeach
                    </section>
                @endif

                @include('front.partials.affiliate-recommendations', ['items' => $recommendations])

                <!-- SHARE BUTTONS -->
                <div class="share-buttons mt-4">
                    <span class="title-color">Teilen: </span>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($postUrl) }}"
                        target="_blank" rel="noopener nofollow" class="btn-facebook" aria-label="Auf Facebook teilen">
                        <i class="ti-facebook"></i>
                    </a>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode($postUrl) }}&text={{ urlencode($post->title) }}"
                        target="_blank" rel="noopener nofollow" class="btn-twitter" aria-label="Auf X teilen">
                        <i class="ti-twitter-alt"></i>
                    </a>
                    <a href="https://www.pinterest.com/pin/create/button?url={{ urlencode($postUrl) }}&media={{ urlencode(url($featuredPath)) }}&description={{ urlencode($post->title) }}"
                        target="_blank" rel="noopener nofollow" class="btn-pinterest" aria-label="Auf Pinterest merken">
                        <i class="ti-pinterest"></i>
                    </a>
                    <a href="https://api.whatsapp.com/send?text={{ urlencode($post->title . ' ' . $postUrl) }}"
                        target="_blank" rel="noopener nofollow" class="btn-whatsapp" aria-label="Per WhatsApp teilen">
                        <i class="ti-comment"></i>
                    </a>
                    <a href="mailto:?subject={{ rawurlencode('Schau dir das an: ' . $post->title) }}&body={{ rawurlencode('Schau dir diesen Artikel an: ' . $postUrl) }}"
                        class="btn-email" aria-label="Per E-Mail teilen">
                        <i class="ti-email"></i>
                    </a>
                </div>
                <!-- SHARE BUTTONS -->
            </article>

            @if ($post->author)
                <aside class="author-box mt-4 mb-4" aria-label="Über den Autor">
                    @if ($post->author->picture)
                        <img src="{{ $post->author->picture }}" alt="{{ $post->author->name }}" width="72" height="72" loading="lazy" class="author-box__img">
                    @endif
                    <div>
                        <p class="author-box__name mb-1">Über {{ $post->author->name }}</p>
                        <p class="small mb-1">{{ $post->author->bio ?: 'Schreibt auf Magicpotter über Training, Ernährung und Regeneration – verständlich und ohne Mythen.' }}</p>
                        <a class="small" href="{{ route('author_posts', $post->author->username) }}">Alle Artikel von {{ $post->author->name }}</a>
                    </div>
                </aside>
            @endif

            <div class="prev-next-posts mt-3 mb-3">
                <div class="row justify-content-between p-4">
                    <div class="col-md-6 mb-2">
                        @if ($prevPost)
                            <div>
                                <p class="h6">&laquo; Vorheriger Artikel</p>
                                <a href="{{ route('read_post', $prevPost->slug) }}" rel="prev">{{ $prevPost->title }}</a>
                            </div>
                        @endif
                    </div>
                    <div class="col-md-6 mb-2 text-md-right">
                        @if ($nextPost)
                            <div>
                                <p class="h6">Nächster Artikel &raquo;</p>
                                <a href="{{ route('read_post', $nextPost->slug) }}" rel="next">{{ $nextPost->title }}</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            @if ($relatedPosts->count())
                <section aria-labelledby="related-title">
                    <h2 id="related-title" class="h4">Das könnte dich auch interessieren</h2>
                    <hr>
                    @foreach ($relatedPosts as $related)
                        @include('front.partials.post-list-item', ['post' => $related, 'headingTag' => 'h3', 'words' => 28])
                    @endforeach
                </section>
            @endif

        </div>

        @include('front.partials.sidebar', ['exceptId' => $post->id])
    </div>
@endsection

@push('scripts')
    <script>
        // Teilen-Buttons im kleinen Popup öffnen (ohne jQuery, da Skripte jetzt per defer laden)
        document.addEventListener('click', function (e) {
            var a = e.target.closest('.share-buttons > a:not(.btn-email)');
            if (!a) return;
            e.preventDefault();
            if (typeof gtag === 'function') {
                gtag('event', 'share', { method: a.className.replace('btn-', ''), item_id: location.pathname });
            }
            window.open(a.href, '', 'height=450,width=450,top=' + (window.innerHeight / 2 - 275) +
                ',left=' + (window.innerWidth / 2 - 225) + ',toolbar=0,location=0,menubar=0,directories=0,scrollbars=0');
        });
    </script>
@endpush