@extends('layout')

@section('title', $article->seo_title ?? $article->title . ' — SoulSize')
@section('description', $article->seo_description ?? $article->excerpt)
@section('og_type', 'article')

@section('schema')
{!! (new \App\Http\Resources\Schema\ArticleSchemaResource($article))->toScript() !!}
@endsection

@section('content')

    {{-- Breadcrumb --}}
    <div class="max-w-4xl mx-auto px-8 pt-8">
        @include('partials.breadcrumbs', ['article' => $article])
    </div>

    {{-- Affiliate Disclaimer --}}
    @if($article->affiliateLinks->count())
        @include('partials.affiliate-disclaimer')
    @endif

    {{-- Article Image --}}
    @if($article->image)
        <div class="max-w-4xl mx-auto px-8 pt-8">
            <div class="rounded-xl overflow-hidden h-64 md:h-96">
                <img src="{{ $article->image }}" alt="{{ $article->title }}" class="w-full h-full object-cover">
            </div>
        </div>
    @endif

    {{-- Article Header + Content --}}
    <article class="article-content">
    <header class="max-w-4xl mx-auto px-8 pt-12 pb-10">
        <div class="flex items-center gap-4 mb-6 flex-wrap">
            <a href="{{ url($article->category->slug) }}" class="text-[11px] uppercase tracking-widest bg-surface-container-high px-4 py-1.5 rounded-full text-primary hover:bg-surface-container-highest transition-colors no-underline">
                {{ $article->category->name }}
            </a>
            <span class="text-[11px] text-on-surface-variant uppercase tracking-widest">{{ $article->published_at?->format('d. M Y') }}</span>
            @if($article->reading_time ?? false)
                <span class="text-[11px] text-outline uppercase tracking-widest flex items-center gap-1">
                    <span class="material-symbols-outlined text-xs">schedule</span>
                    {{ $article->reading_time }} Min. Lesezeit
                </span>
            @endif
            @if($article->is_gift)
                <a href="/geschenke" class="inline-flex items-center gap-1.5 bg-primary text-on-primary text-[11px] font-bold px-3 py-1.5 rounded-full hover:bg-primary-fixed transition-colors no-underline shadow-sm">
                    <span class="material-symbols-outlined" style="font-size:14px">redeem</span>
                    Auch als Geschenk perfekt
                </a>
            @endif
        </div>
        <h1 class="font-headline text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-tight">{{ $article->title }}</h1>
    </header>

    {{-- Article Content --}}
    <div class="max-w-4xl mx-auto px-8 pb-16">
        <div class="prose prose-invert max-w-none
            font-body text-on-surface/90 leading-relaxed text-base
            [&>h2]:font-headline [&>h2]:text-2xl [&>h2]:font-bold [&>h2]:text-primary [&>h2]:mt-12 [&>h2]:mb-4
            [&>h3]:font-headline [&>h3]:text-xl [&>h3]:font-bold [&>h3]:text-on-surface [&>h3]:mt-8 [&>h3]:mb-3
            [&>p]:mb-5 [&>p]:text-on-surface-variant
            [&>ul]:text-on-surface-variant [&>ul]:mb-5 [&>ul]:pl-5 [&>ul]:list-disc
            [&>ol]:text-on-surface-variant [&>ol]:mb-5 [&>ol]:pl-5 [&>ol]:list-decimal
            [&>blockquote]:border-l-2 [&>blockquote]:border-primary-container [&>blockquote]:pl-6 [&>blockquote]:italic [&>blockquote]:text-on-surface-variant/80 [&>blockquote]:my-8
            [&_a]:text-primary [&_a]:underline [&_a]:hover:text-primary-fixed [&_a]:transition-colors
            [&>img]:rounded-xl [&>img]:my-8">
            {{-- SECURITY: Unescaped output - content comes from trusted seeders only.
                 Install HTMLPurifier (mews/purifier) before enabling user-generated content. --}}
            {!! $article->content !!}
        </div>

        {{-- Newsletter Signup --}}
        @include('partials.newsletter-box')

        {{-- Affiliate Box --}}
        @if($article->affiliateLinks && $article->affiliateLinks->count())
            <div class="mt-16 bg-surface-container rounded-xl p-8 md:p-10">
                <div class="flex items-center gap-3 mb-6">
                    <span class="material-symbols-outlined text-2xl text-primary">shopping_bag</span>
                    <h3 class="font-headline text-xl font-bold text-on-surface">Unsere Empfehlungen</h3>
                </div>
                <div class="flex flex-wrap gap-3">
                    @foreach($article->affiliateLinks as $link)
                        <a href="{{ $link->url }}" target="_blank" rel="nofollow sponsored"
                           aria-label="{{ $link->label }}{{ $link->partner ? ' bei ' . $link->partner : '' }} — öffnet in neuem Tab"
                           data-affiliate="{{ $link->partner }}" data-article="{{ $article->slug }}"
                           class="inline-flex items-center gap-2 bg-primary-container text-on-primary-container px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-primary transition-all duration-300 transform hover:scale-105 no-underline">
                            {{ $link->label }}
                            @if($link->partner)
                                <span class="text-on-primary-container/60 text-xs" aria-hidden="true">({{ $link->partner }})</span>
                            @endif
                            <span class="material-symbols-outlined text-sm" aria-hidden="true">open_in_new</span>
                        </a>
                    @endforeach
                </div>
                <p class="text-[11px] text-outline mt-4">* Affiliate-Links. Bei einem Kauf erhalten wir eine kleine Provision.</p>

                @if($article->is_gift)
                {{-- Geschenkservice-Hinweis --}}
                <div class="mt-6 pt-6 border-t border-outline-variant/30">
                    <div class="flex items-center gap-2 mb-4">
                        <span class="material-symbols-outlined text-lg text-primary">redeem</span>
                        <h4 class="font-headline text-base font-bold text-on-surface">Als Geschenk bestellen?</h4>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="flex items-start gap-3 bg-surface-container-high rounded-lg p-4">
                            <span class="material-symbols-outlined text-primary flex-shrink-0">redeem</span>
                            <div>
                                <p class="font-semibold text-sm text-on-surface mb-1">Geschenkverpackung (+2–3 €)</p>
                                <p class="text-xs text-on-surface-variant">Beim Checkout im Shop nach der Geschenkverpackungs-Option suchen — oft direkt auswählbar.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3 bg-surface-container-high rounded-lg p-4">
                            <span class="material-symbols-outlined text-primary flex-shrink-0">mail</span>
                            <div>
                                <p class="font-semibold text-sm text-on-surface mb-1">Grußkarte beilegen</p>
                                <p class="text-xs text-on-surface-variant">Viele Shops ermöglichen eine persönliche Nachricht direkt bei der Bestellung — kostenlos oder günstig.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="/geschenke" class="inline-flex items-center gap-2 text-primary text-sm font-semibold hover:text-primary-fixed transition-colors no-underline">
                            <span class="material-symbols-outlined text-base">arrow_forward</span>
                            Mehr Geschenk-Ideen unter 15 Euro entdecken
                        </a>
                    </div>
                </div>
                @endif
            </div>
        @endif
    </div>

    {{-- Related Articles --}}
    @php
        $related = $article->category?->articles?->where('id', '!=', $article->id)->take(3);
    @endphp
    @include('partials.related-articles', ['relatedArticles' => $related])

    </article>

@endsection