@extends('layouts.app')

@section('page_title', $post->title)
@section('page_subtitle', 'Published on ' . $post->created_at->format('M d, Y'))

@section('content')
<section class="section">
    <div class="container">
        <article class="post-detail">
            <div class="post-header">
                <a href="{{ route('blog') }}" style="color: #00bcd4; text-decoration: none; font-weight: 700; margin-bottom: 20px; display: inline-block;">← Back to Stories</a>
                <div style="color: #999; font-size: 0.95rem; font-weight: 600;">
                    Published on {{ $post->created_at->format('F d, Y') }}
                </div>
            </div>

            @if($post->image_path)
                <div class="post-featured-image">
                    <img src="{{ asset('storage/' . $post->image_path) }}" alt="{{ $post->title }}">
                </div>
            @endif

            @if($post->excerpt)
                <div style="font-size: 1.5rem; color: #666; font-style: italic; margin-bottom: 40px; line-height: 1.6; border-left: 4px solid #00bcd4; padding-left: 30px;">
                    {{ $post->excerpt }}
                </div>
            @endif

            <div class="post-body">
                {!! nl2br(e($post->content)) !!}
            </div>

            <div style="margin-top: 80px; padding-top: 40px; border-top: 1px solid #eee; text-align: center;">
                <h3 style="margin-bottom: 20px;">Share this story</h3>
                <p style="color: #888;">Help us spread the word about our impact.</p>
                <div style="margin-top: 30px;">
                    <a href="{{ route('blog') }}" class="button button-secondary">View More Stories</a>
                </div>
            </div>
        </article>
    </div>
</section>
@endsection