@extends('layouts.app')

@section('title', $post->title . ' - Blog')

@section('content')

<!-- Reading Progress Bar -->
<div id="progress-container" class="fixed top-0 left-0 w-full h-1.5 z-50 bg-transparent">
    <div id="progress-bar" class="h-full bg-theme-900 w-0 transition-all duration-150 ease-out"></div>
</div>

<div class="bg-white min-h-screen pt-36 md:pt-44 pb-24">
    <!-- Post Header -->
    <header class="max-w-4xl mx-auto px-6 md:px-12 text-center mb-12">
        <a href="{{ route('blog.index') }}" class="inline-flex items-center gap-2 text-sm font-bold text-theme-600 hover:text-theme-900 transition-colors mb-8">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Back to Articles
        </a>
        
        @if($post->category)
            <div class="mb-6">
                <span class="inline-block bg-theme-50 text-theme-900 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest">
                    {{ $post->category->name }}
                </span>
            </div>
        @endif

        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold font-heading text-theme-900 leading-tight mb-6">
            {{ $post->title }}
        </h1>

        <div class="flex items-center justify-center gap-4 text-gray-500 text-sm font-medium">
            <span>{{ $post->created_at->format('M j, Y') }}</span>
            <span class="w-1.5 h-1.5 rounded-full bg-gray-300"></span>
            <span>By Hannah Arinaitwe</span>
        </div>
    </header>

    <!-- Featured Image -->
    @if($post->featured_image)
    <div class="max-w-5xl mx-auto px-6 mb-16">
        <div class="rounded-2xl overflow-hidden shadow-2xl aspect-[16/9] md:aspect-[21/9]">
            <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover">
        </div>
    </div>
    @endif

    <!-- Post Content -->
    <article class="max-w-3xl mx-auto px-6 md:px-12 relative z-10">
        <div class="prose prose-lg prose-theme max-w-none">
            {!! $post->body !!}
        </div>
        
        <!-- Share Section -->
        <div class="mt-16 pt-8 border-t border-gray-100 flex flex-col md:flex-row items-center justify-between gap-6">
            <h3 class="text-lg font-bold font-heading text-theme-900">Share this article</h3>
            <div class="flex gap-4">
                <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($post->title) }}" target="_blank" class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center text-gray-600 hover:bg-[#1DA1F2] hover:text-white transition-all hover:-translate-y-1">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
                </a>
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center text-gray-600 hover:bg-[#4267B2] hover:text-white transition-all hover:-translate-y-1">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg>
                </a>
                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(request()->url()) }}&title={{ urlencode($post->title) }}" target="_blank" class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center text-gray-600 hover:bg-[#0077b5] hover:text-white transition-all hover:-translate-y-1">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
                </a>
            </div>
        </div>
    </article>
</div>

<!-- Related Posts -->
@if(isset($relatedPosts) && $relatedPosts->count() > 0)
<section class="py-24 bg-theme-50">
    <div class="max-w-7xl mx-auto px-6 md:px-12">
        <h2 class="text-3xl font-bold font-heading text-theme-900 mb-12 text-center">More to Read</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($relatedPosts as $related)
                <div class="bg-white rounded-2xl shadow-sm border border-theme-100 overflow-hidden hover:shadow-xl transition-all duration-300 group">
                    <a href="{{ route('blog.show', $related->slug) }}" class="block aspect-video relative overflow-hidden bg-theme-100">
                        @if($related->featured_image)
                            <img src="{{ asset('storage/' . $related->featured_image) }}" alt="{{ $related->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                        @endif
                    </a>
                    <div class="p-6">
                        @if($related->category)
                            <span class="text-xs font-bold text-theme-600 uppercase tracking-wider mb-2 block">{{ $related->category->name }}</span>
                        @endif
                        <h3 class="text-xl font-bold font-heading text-theme-900 mb-3 line-clamp-2">
                            <a href="{{ route('blog.show', $related->slug) }}" class="hover:text-theme-600 transition-colors">{{ $related->title }}</a>
                        </h3>
                        <p class="text-gray-500 text-sm line-clamp-2">{{ strip_tags($related->body) }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Styles for Prose to match theme -->
<style>
    .prose-theme h1, .prose-theme h2, .prose-theme h3, .prose-theme h4 {
        font-family: var(--font-heading);
        color: var(--color-theme-900);
        font-weight: 700;
        letter-spacing: -0.025em;
    }
    .prose-theme h2 { margin-top: 2.5em; margin-bottom: 1em; }
    .prose-theme p {
        color: #4b5563;
        line-height: 1.8;
        margin-bottom: 1.5em;
        font-size: 1.125rem;
    }
    .prose-theme a {
        color: var(--color-theme-600);
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
        transition: color 0.2s;
    }
    .prose-theme a:hover {
        color: var(--color-theme-900);
    }
    .prose-theme blockquote {
        border-left: 4px solid var(--color-theme-300);
        background: var(--color-theme-50);
        padding: 1.5rem;
        border-radius: 0 1rem 1rem 0;
        font-style: italic;
        color: var(--color-theme-800);
        margin: 2em 0;
    }
    .prose-theme img {
        border-radius: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        margin: 2.5em auto;
    }
    .prose-theme ul, .prose-theme ol {
        margin-bottom: 1.5em;
        color: #4b5563;
        font-size: 1.125rem;
        line-height: 1.8;
    }
    .prose-theme li { margin-bottom: 0.5em; }
</style>

<!-- Script for Reading Progress Bar -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const progressBar = document.getElementById("progress-bar");
        const article = document.querySelector("article");
        
        if(article && progressBar) {
            window.addEventListener("scroll", () => {
                // Calculate scroll distance
                const scrollTop = window.scrollY;
                // Total scrollable height
                const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
                // Prevent divide by 0
                if(scrollHeight > 0) {
                    const scrollPercentage = (scrollTop / scrollHeight) * 100;
                    progressBar.style.width = scrollPercentage + "%";
                }
            });
        }
    });
</script>

@endsection