@extends('theme-default::layouts.base')
@section('title', ($post->seo['title'] ?? $post->title) . ' — ' . AleshaSetting::get('site_name'))
@section('description', $post->seo['description'] ?? $post->excerpt ?? '')

@php
    $related = AleshaPost::ofType($post->content_type)
        ->published()
        ->where('id', '!=', $post->id)
        ->latest('published_at')
        ->take(3)
        ->get();
@endphp

@section('content')

@if($builderFullpage ?? false)
{{-- Full Page Builder mode: render builder only --}}
{!! $pageBuilderHtml !!}
@else

{{-- Hero --}}
<div class="bg-gray-950 text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 pt-16 pb-12" @if($post->getFirstMedia('featured')) style="padding-bottom: 8rem" @endif>
        <div class="mb-5 flex flex-wrap items-center gap-2">
            <a href="/post" class="tag bg-white/10 text-indigo-300 hover:bg-white/20 transition-colors">
                {{ ucfirst($post->content_type) }}
            </a>
            @foreach($post->taxonomies->where('type', 'category') as $cat)
            <a href="/category/{{ $cat->slug }}" class="tag bg-indigo-500/20 text-indigo-300 hover:bg-indigo-500/30 transition-colors">
                {{ $cat->name }}
            </a>
            @endforeach
            @if($post->published_at)
            <span class="text-sm text-gray-400">{{ $post->published_at->format('F d, Y') }}</span>
            @endif
        </div>
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight mb-6">
            {{ $post->title }}
        </h1>
        @if($post->excerpt)
        <p class="text-lg text-gray-300 leading-relaxed max-w-2xl">{{ $post->excerpt }}</p>
        @endif
        <div class="flex items-center gap-3 mt-8 pt-8 border-t border-white/10">
            <div class="w-10 h-10 rounded-full bg-indigo-500/30 flex items-center justify-center text-indigo-300 font-bold">
                {{ substr($post->author->name ?? 'A', 0, 1) }}
            </div>
            <div>
                <p class="text-sm font-semibold text-white">{{ $post->author->name ?? 'Admin' }}</p>
                @if($post->published_at)
                <p class="text-xs text-gray-400">Published {{ $post->published_at->diffForHumans() }}</p>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Featured Image --}}
@if($post->getFirstMedia('featured'))
<div class="max-w-4xl mx-auto px-4 sm:px-6 mb-10 relative z-10" style="margin-top: -6rem">
    <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $post->title }}"
         class="w-full rounded-2xl shadow-2xl object-cover max-h-[500px]">
</div>
@endif

{{-- Content --}}
<div class="max-w-3xl mx-auto px-4 sm:px-6 py-12">
    <div class="prose prose-lg">
        @if($pageBuilderHtml)
            {!! $pageBuilderHtml !!}
        @else
            {!! $post->content !!}
        @endif
    </div>

    {{-- Tags --}}
    @if($post->taxonomies->where('type', 'tag')->count())
    <div class="mt-10 pt-8 border-t border-gray-100 flex flex-wrap items-center gap-2">
        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider mr-1">Tags:</span>
        @foreach($post->taxonomies->where('type', 'tag') as $tag)
        <a href="/tag/{{ $tag->slug }}"
           class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 transition-colors">
            #{{ $tag->name }}
        </a>
        @endforeach
    </div>
    @endif

    {{-- Footer Meta --}}
    <div class="mt-8 pt-6 border-t border-gray-100 flex flex-wrap items-center justify-between gap-4">
        <a href="/post" class="btn-outline text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
            </svg>
            All {{ ucfirst($post->content_type) }}s
        </a>
        <div class="flex items-center gap-2 text-sm text-gray-400">
            <span>Share:</span>
            <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($post->title) }}"
               target="_blank" class="text-gray-400 hover:text-sky-500 transition-colors font-medium">Twitter</a>
            <span>·</span>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
               target="_blank" class="text-gray-400 hover:text-blue-600 transition-colors font-medium">Facebook</a>
        </div>
    </div>
</div>

{{-- Related Posts --}}
@if($related->count())
<section class="bg-gray-50 py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="flex items-center gap-3 mb-8">
            <h2 class="text-xl font-bold text-gray-900">Related Posts</h2>
            <div class="flex-1 h-px bg-gray-200"></div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
            @foreach($related as $rel)
            <article class="card group">
                @if($rel->getFirstMedia('featured'))
                <div class="overflow-hidden">
                    <img src="{{ $rel->getFirstMediaUrl('featured') }}" alt="{{ $rel->title }}"
                         class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300">
                </div>
                @else
                <div class="h-1.5 bg-gradient-to-r from-indigo-500 to-violet-500"></div>
                @endif
                <div class="p-5">
                    <p class="text-xs text-gray-400 mb-2">{{ $rel->published_at?->format('M d, Y') }}</p>
                    <h3 class="font-semibold text-gray-900 leading-snug group-hover:text-indigo-600 transition-colors">
                        <a href="/{{ $rel->content_type }}/{{ $rel->slug }}">{{ $rel->title }}</a>
                    </h3>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

@endif {{-- end fullpage check --}}

@endsection
