@extends('layouts.app')

@section('title', $post->title . ' - Frantyapp Insights')
@section('meta_description', Str::limit(strip_tags($post->excerpt), 155))

@section('content')
<div class="bg-black text-white py-14 border-b border-neutral-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center space-x-2 text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">
            <a href="{{ route('home') }}" class="hover:text-white">Home</a>
            <span>/</span>
            <a href="{{ route('blog.index') }}" class="hover:text-white">Insights</a>
            <span>/</span>
            <span class="text-white font-bold">{{ $post->category }}</span>
        </div>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl text-white leading-tight">{{ $post->title }}</h1>
        <div class="flex items-center space-x-4 text-xs text-gray-400 font-light mt-4">
            <span>Published: {{ $post->published_at->format('F d, Y') }}</span>
            <span>•</span>
            <span>Author: {{ $post->author }}</span>
        </div>
    </div>
</div>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
    <div class="border border-gray-200 bg-white p-8 sm:p-12 space-y-8">
        <div class="h-80 sm:h-[450px] overflow-hidden bg-black">
            <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover">
        </div>

        <div class="prose max-w-none text-gray-700 leading-relaxed text-base font-light space-y-4">
            <p class="text-xl font-serif-heading font-bold text-black leading-relaxed">{{ $post->excerpt }}</p>
            <hr class="border-gray-100 my-6">
            <div class="whitespace-pre-line">{{ $post->content }}</div>
        </div>

        <div class="pt-8 border-t border-gray-100 flex items-center justify-between">
            <a href="{{ route('blog.index') }}" class="text-xs font-bold uppercase tracking-widest text-black hover:underline">&larr; Back to all reports</a>
            <a href="https://wa.me/2348031234567?text=Hello%20Frantyapp,%20I%20read%20your%20report:%20{{ urlencode($post->title) }}" target="_blank" class="px-5 py-2.5 bg-black text-white text-xs font-bold uppercase tracking-widest hover:bg-neutral-800">
                Discuss With Advisor
            </a>
        </div>
    </div>
</div>
@endsection
