@php
    $firstImage = $story->firstImageSection();
    $ogImage = $firstImage 
        ? route('thumbnail', ['width' => 1200, 'height' => 630, 'path' => $firstImage->content]) 
        : asset('images/hero.png');

    $storyDesc = !empty($story->summary) 
        ? \Illuminate\Support\Str::limit($story->summary, 155) 
        : \Illuminate\Support\Str::limit(strip_tags($story->description ?? ''), 155);

    $storySchema = [
        '@context' => 'https://schema.org',
        '@type' => 'Article',
        'headline' => $story->name,
        'description' => $storyDesc,
        'datePublished' => $story->display_date ? $story->display_date->toDateString() : null,
        'image' => $ogImage,
        'url' => route('stories.show', $story->slug),
    ];
@endphp

<x-main-layout 
    :title="$story->name" 
    :description="$storyDesc" 
    :image="$ogImage" 
    type="article"
    :schema="$storySchema"
>
    <x-construction-banner />

    <article class="bg-[#0a0a0a] min-h-screen">
        <!-- Hero Header -->
        <header class="relative pt-32 pb-16 overflow-hidden flex items-center">
            <div class="absolute inset-0 bg-grunge opacity-20 pointer-events-none"></div>
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-[#0a0a0a] z-10"></div>
            
            <div class="relative z-20 max-w-5xl mx-auto px-4 text-center">
                <div class="inline-block px-4 py-1 bg-pink-600 text-white text-xs font-black rounded mb-8 tracking-widest uppercase italic">
                    {{ $story->display_date ? $story->display_date->format('F d, Y') : 'The Archives' }}
                </div>
                <h1 class="text-6xl md:text-6xl font-normal mb-3 uppercase tracking-tighter text-white leading-[0.85]">
                    {{ $story->name }}
                </h1>
                <p class="text-xl md:text-2xl text-white font-medium max-w-3xl mx-auto">
                    {{ $story->summary }}
                </p>

                @if($story->tags && $story->tags->isNotEmpty())
                    <div class="flex flex-wrap justify-center gap-2 mt-6">
                        @foreach($story->tags as $tag)
                            <a href="{{ route('stories.index', ['tag' => $tag->slug]) }}" class="px-3 py-1 bg-white/5 hover:bg-pink-600/30 text-pink-400 hover:text-white text-xs font-bold uppercase tracking-wider transition border border-white/10 hover:border-pink-500/40">
                                #{{ $tag->name }}
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </header>

        <!-- Content Body -->
        <div class="max-w-4xl mx-auto px-4 py-16">
            @if($story->description)
                <div class="mb-16 text-xl md:text-2xl text-white/90 font-medium leading-[1.6]">
                    {!! nl2br(e($story->description)) !!}
                </div>
            @endif

            <div class="space-y-24">
                @foreach($story->sections as $section)
                    <div class="section-container relative">
                        @if($section->type == 1)
                            <!-- Text/HTML Section -->
                            <div class="prose prose-invert prose-xl max-w-none text-gray-300 leading-relaxed font-medium [&_a]:text-pink-500 hover:[&_a]:text-pink-400 [&_a]:underline [&_a]:underline-offset-4 [&_a]:font-semibold transition">
                                {!! $section->content !!}
                            </div>
                        @elseif($section->type == 2)
                            <!-- Image Section -->
                            <div class="overflow-hidden border-1 border-white/5">
                                <img src="{{ Storage::url($section->content) }}" alt="Story Image" class="w-full h-auto object-cover">
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Footer Meta -->
            <footer class="mt-32 pt-16 border-t border-white/20 flex flex-col md:flex-row justify-between items-center gap-8">
                <a href="{{ route('stories.index') }}" class="text-white hover:text-pink-500 font-bold uppercase tracking-widest text-sm transition">
                    &larr; Back to Stories
                </a>

                <div class="text-center md:text-right">
                    <span class="block text-xs uppercase tracking-widest text-gray-500 font-black">Authored by</span>
                    <span class="text-white font-bold">{{ $story->author->first_name ?? 'The Archivist' }} {{ $story->author->last_name ?? '' }}</span>
                </div>
            </footer>
        </div>
    </article>
</x-main-layout>