@extends('layouts.app')

@php
$article = \App\Models\NewsArticle::with('gallery')->published()->where('slug', $slug)->firstOrFail();
$recent = \App\Models\NewsArticle::published()->where('id', '!=', $article->id)->latest()->take(3)->get();
$gallery = $article->gallery;
@endphp

@section('title', $article->seo_title ?: $article->title . ' — Mangolê')
@section('description', $article->seo_description ?: strip_tags($article->excerpt ?: $article->title))
@if ($article->image)@section('og_image', asset('storage/' . $article->image))@endif

@section('content')
{{-- Hero --}}
@if ($article->image)
<section class="relative h-[50vh] min-h-[320px] overflow-hidden bg-gray-900">
    <img src="{{ asset('storage/' . $article->image) }}" alt="{{ $article->title }}" class="absolute inset-0 w-full h-full object-cover opacity-60">
    <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent"></div>
    <x-container class="relative h-full flex flex-col justify-end pb-12">
        <div class="max-w-3xl">
            <div class="flex items-center gap-3 text-sm text-white/70 mb-3">
                @if ($article->category)
                <span class="rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">{{ $article->category }}</span>
                @endif
                @if ($article->published_at)
                <span>{{ $article->published_at->format('d/m/Y') }}</span>
                @endif
                @if ($article->reading_time)
                <span>· {{ $article->reading_time }} min leitura</span>
                @endif
            </div>
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-white leading-tight">{{ $article->title }}</h1>
            @if ($article->author)
            <p class="mt-2 text-sm text-white/60">Por {{ $article->author }}</p>
            @endif
        </div>
    </x-container>
</section>
@else
<section class="bg-white py-16 lg:py-24">
    <x-container class="max-w-3xl">
        <div class="mb-8">
            <a href="{{ url('noticias') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-brand hover:text-brand-700 transition duration-150">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>
                Voltar para notícias
            </a>
        </div>
        <div class="flex items-center gap-3 text-sm text-gray-500 mb-4">
            @if ($article->category)
            <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-medium text-brand">{{ $article->category }}</span>
            @endif
            @if ($article->published_at)
            <span>{{ $article->published_at->format('d/m/Y') }}</span>
            @endif
            @if ($article->reading_time)
            <span>· {{ $article->reading_time }} min leitura</span>
            @endif
        </div>
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ $article->title }}</h1>
        @if ($article->author)
        <p class="mt-2 text-sm text-gray-500">Por {{ $article->author }}</p>
        @endif
    </x-container>
</section>
@endif

{{-- Article content --}}
<section class="bg-white pb-16 lg:pb-24 -mt-0">
    <x-container class="max-w-3xl">
        <div class="mb-8">
            <a href="{{ url('noticias') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-brand hover:text-brand-700 transition duration-150">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>
                Voltar para notícias
            </a>
        </div>

        <article>
            @if ($article->excerpt)
            <div class="text-lg text-gray-600 leading-relaxed border-l-4 border-brand pl-6 italic mb-8">
                {{ strip_tags($article->excerpt) }}
            </div>
            @endif

            <div class="prose prose-gray max-w-none leading-relaxed">
                {!! safe_html($article->content) !!}
            </div>
        </article>
    </x-container>
</section>

{{-- Gallery --}}
@if ($gallery->isNotEmpty())
@php
$galleryUrls = $gallery->map(fn($g) => asset('storage/' . $g->file_path))->values();
@endphp
<section x-data="{ current: 0 }" class="bg-gray-50 py-16 lg:py-24">
    <x-container>
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Galeria de Fotos</h2>
        <div class="relative rounded-2xl overflow-hidden bg-gray-900 aspect-[16/9] max-w-4xl mx-auto">
            <template x-for="(url, i) in {{ Js::from($galleryUrls) }}" :key="i">
                <img :src="url" :class="current === i ? 'block' : 'hidden'" class="absolute inset-0 w-full h-full object-contain bg-gray-900">
            </template>
            @if ($gallery->count() > 1)
            <button type="button" @click="current = Math.max(0, current - 1)" :disabled="current === 0" class="absolute left-4 top-1/2 -translate-y-1/2 p-3 rounded-full bg-white/20 text-white hover:bg-white/40 backdrop-blur-sm disabled:opacity-20 transition-all z-10">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
            </button>
            <button type="button" @click="current = Math.min({{ $gallery->count() - 1 }}, current + 1)" :disabled="current === {{ $gallery->count() - 1 }}" class="absolute right-4 top-1/2 -translate-y-1/2 p-3 rounded-full bg-white/20 text-white hover:bg-white/40 backdrop-blur-sm disabled:opacity-20 transition-all z-10">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 19.5 7.5-7.5-7.5-7.5"/></svg>
            </button>
            <div class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/60 text-white text-sm font-medium px-4 py-1.5 rounded-full backdrop-blur-sm z-10" x-text="`\${current + 1} / {{ $gallery->count() }}`"></div>
            @endif
        </div>
        <div class="mt-4 flex justify-center gap-2">
            @foreach ($galleryUrls as $i => $url)
            <button type="button" @click="current = {{ $i }}" class="w-16 h-12 rounded-lg overflow-hidden border-2 transition-all" :class="current === {{ $i }} ? 'border-brand opacity-100' : 'border-transparent opacity-60 hover:opacity-100'">
                <img src="{{ $url }}" alt="" class="w-full h-full object-cover">
            </button>
            @endforeach
        </div>
    </x-container>
</section>
@endif

{{-- Related --}}
@if ($recent->isNotEmpty())
<section class="bg-white py-16 lg:py-24">
    <x-container>
        <h2 class="text-2xl font-bold text-gray-900">Notícias recentes</h2>
        <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($recent as $related)
            <article class="group rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-100 hover:shadow-md hover:ring-brand/20 transition-all duration-200">
                @if ($related->image)
                <div class="-mx-6 -mt-6 mb-4 overflow-hidden rounded-t-2xl">
                    <img src="{{ asset('storage/' . $related->image) }}" alt="{{ $related->title }}" loading="lazy" class="h-40 w-full object-cover">
                </div>
                @endif
                <div class="flex items-center gap-2 text-xs text-gray-400">
                    @if ($related->category)
                    <span class="rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand">{{ $related->category }}</span>
                    @endif
                </div>
                <h3 class="mt-2 font-semibold text-gray-900 group-hover:text-brand">
                    <a href="{{ url('noticias/' . $related->slug) }}" class="no-underline">{{ $related->title }}</a>
                </h3>
            </article>
            @endforeach
        </div>
    </x-container>
</section>
@endif
@endsection