@extends('layouts.app')
@section('title','{{ $post->title }} - Journey of Life GCC')
@section('content')
<section style="background:#e0f2fe;padding:3rem 0">
  <div class="container">
    <a href="{{ route('blog.index') }}" style="color:#3b82f6;text-decoration:none">← Back to Blog</a>
    <h1 style="font-size:2.5rem;font-weight:800;color:#1e3a8a;margin-top:1rem">{{ $post->title }}</h1>
    <p style="color:#6b7280;margin-top:0.5rem">{{ $post->published_at?->format('F d, Y') }} | {{ $post->getReadingTime() }} min read</p>
  </div>
</section>
<section style="padding:4rem 0;background:white">
  <div class="container" style="max-width:800px">
    @if($post->featured_image)
    <img src="/storage/{{ $post->featured_image }}" alt="{{ $post->title }}" style="width:100%;border-radius:12px;margin-bottom:2rem" onerror="this.style.display='none'">
    @endif
    <div style="line-height:1.9;color:#374151;font-size:1.05rem">{!! nl2br(e($post->content)) !!}</div>
  </div>
</section>
@endsection