@extends('layouts.app')

@section('title', ($blog->seo_metadata['title'] ?? $blog->title) . ' - Texora')
@section('meta_description', $blog->seo_metadata['description'] ?? $blog->excerpt)

@section('content')
<main class="txp-page" data-txp-page>
    <article>
        <header class="txp-hero txp-hero--dark" data-txp-hero>
            <div class="txp-shell">
                <a href="{{ route('blog.index') }}" class="txp-kicker txp-reveal">Back to insights</a>
                <div class="mb-5 flex flex-wrap items-center gap-3 text-xs font-black uppercase tracking-[0.16em] text-white/40 txp-reveal">
                    <span>{{ $blog->category?->name ?? 'Update' }}</span>
                    <span>/</span>
                    <span>{{ $blog->published_at?->format('F d, Y') ?? $blog->created_at->format('F d, Y') }}</span>
                    <span>/</span>
                    <span>{{ $blog->read_time ?? '5' }} min read</span>
                </div>
                <h1 class="txp-title txp-reveal">{{ $blog->title }}<span class="txp-dot">.</span></h1>
                @if($blog->excerpt)
                    <p class="txp-lede txp-reveal">{{ $blog->excerpt }}</p>
                @endif
            </div>
        </header>

        <section class="txp-section--tight" data-txp-section>
            <div class="txp-shell">
                <div class="aspect-[21/9] overflow-hidden bg-[#262626] txp-visual">
                    <img
                        src="{{ $blog->featured_image ? asset('storage/'.$blog->featured_image) : 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=1600&auto=format&fit=crop' }}"
                        alt="{{ $blog->title }}"
                        loading="lazy"
                        class="txp-image"
                    >
                </div>
            </div>
        </section>

        <section class="txp-section--tight" data-txp-section>
            <div class="txp-shell">
                <div class="mx-auto max-w-4xl">
                    <div class="mb-12 flex items-center gap-4 txp-reveal">
                        <img src="https://ui-avatars.com/api/?name={{ urlencode($blog->author->name ?? 'Texora Expert') }}&background=1710e6&color=fff" alt="{{ $blog->author->name ?? 'Texora Expert' }}" loading="lazy" class="h-14 w-14 rounded-full">
                        <div>
                            <small class="block text-xs font-black uppercase tracking-[0.18em] text-black/40">Written by</small>
                            <strong>{{ $blog->author->name ?? 'Texora Expert' }}</strong>
                        </div>
                    </div>

                    <div class="prose max-w-none prose-lg prose-headings:font-black prose-headings:tracking-tight prose-p:text-[#555] prose-p:leading-relaxed prose-a:text-[#1710e6] prose-strong:text-[#151515] txp-reveal">
                        {!! $blog->content !!}
                    </div>

                    @if($blog->tags->count() > 0)
                        <div class="mt-16 flex flex-wrap gap-3 border-t border-black/10 pt-8">
                            @foreach($blog->tags as $tag)
                                <span class="rounded-full border border-black/10 px-4 py-2 text-xs font-black uppercase tracking-widest text-black/45"># {{ $tag->name }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </section>
    </article>

    @if($relatedPosts->count() > 0)
        <section class="txp-section txp-dark" data-txp-section>
            <div class="txp-shell">
                <div class="txp-section-head">
                    <h2>More reads<span class="txp-dot">.</span></h2>
                    <p>Related Texora articles from the same category.</p>
                </div>
                <div class="txp-grid">
                    @foreach($relatedPosts as $post)
                        <a href="{{ route('blog.show', $post->slug) }}" class="txp-card">
                            <div class="-mx-4 -mt-4 mb-8 aspect-video overflow-hidden bg-[#262626] md:-mx-8 md:-mt-8">
                                <img
                                    src="{{ $post->featured_image ? asset('storage/'.$post->featured_image) : 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=900&auto=format&fit=crop' }}"
                                    alt="{{ $post->title }}"
                                    loading="lazy"
                                    class="txp-image"
                                >
                            </div>
                            <small>{{ $post->category?->name ?? 'Update' }}</small>
                            <h3>{{ $post->title }}</h3>
                            <p>{{ $post->excerpt ?? \Illuminate\Support\Str::limit(strip_tags($post->content), 95) }}</p>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</main>
@endsection