@extends('layouts.guest-page')

@section('title', $post->title)
@section('meta_description', $post->excerpt ?? Str::limit(strip_tags($post->content), 160))
@section('meta_image', $post->image ?? asset('images/og-image.jpg'))
@section('meta_type', 'article')

@section('no-container')
@endsection

@section('content')
<main class="flex-grow pt-32 pb-20 relative w-full overflow-x-hidden">

    <!-- Background Elements -->
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -z-10 pointer-events-none"></div>

    <!-- Main Wrapper -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">

        <!-- Layout Container: Flexbox -->
        <div class="flex flex-col lg:flex-row gap-12 w-full">
            
            <!-- LEFT COLUMN: Article Content -->
            <!-- Using explicit width classes for stability -->
            <article class="w-full lg:w-[65%] flex-shrink-0">
                
                <!-- Article Header -->
                <header class="mb-10">
                   <div class="flex flex-wrap items-center gap-4 text-sm text-gray-400 mb-6">
                        <span class="bg-blue-500/10 text-blue-400 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider border border-blue-500/20">Article</span>
                        <div class="flex items-center gap-2">
                             <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            <time datetime="{{ $post->published_at->toIso8601String() }}">{{ $post->published_at->format('F d, Y') }}</time>
                        </div>
                        <div class="hidden sm:block w-1 h-1 rounded-full bg-gray-600"></div>
                        <div class="flex items-center gap-2">
                            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <span>{{ ceil(str_word_count(strip_tags($post->content)) / 200) }} min read</span>
                        </div>
                    </div>
                    
                    <h1 class="text-3xl md:text-5xl font-display font-bold text-white mb-6 leading-tight break-words">
                        {{ $post->title }}
                    </h1>
                    
                    @if($post->excerpt)
                        <p class="text-xl text-gray-300 leading-relaxed font-light border-l-4 border-blue-500 pl-6 italic mb-8">
                            {{ $post->excerpt }}
                        </p>
                    @endif
                </header>

                <!-- Featured Image -->
                @if($post->image)
                    <div class="mb-12">
                        <div class="aspect-video w-full overflow-hidden rounded-2xl border border-white/10 shadow-2xl shadow-blue-900/10 relative group">
                            <img src="{{ $post->image }}" alt="{{ $post->title }}" class="w-full h-full object-cover">
                        </div>
                    </div>
                @endif

                <!-- Content Body -->
                <!-- 'prose' class gives default styles. 'max-w-none' ensures it fills the container -->
                <div class="prose prose-lg prose-invert max-w-none w-full text-gray-300 
                    prose-headings:font-display prose-headings:font-bold prose-headings:text-white 
                    prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline
                    prose-strong:text-white prose-strong:font-bold
                    prose-blockquote:border-l-blue-500 prose-blockquote:bg-white/5 prose-blockquote:py-2 prose-blockquote:px-6 prose-blockquote:rounded-r-lg prose-blockquote:not-italic
                    prose-code:text-blue-300 prose-code:bg-blue-900/30 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
                    prose-img:rounded-xl prose-img:border prose-img:border-white/10">
                    
                    {!! nl2br(e($post->content)) !!}
                </div>
                <!-- Share -->
                <div class="bg-[#0E121A] border border-white/5 rounded-2xl p-6 mt-12">
                     <h3 class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-4">Share</h3>
                     <div class="flex gap-2">
                        <a href="https://twitter.com/intent/tweet?text={{ urlencode($post->title) }}&url={{ urlencode(route('blog.show', $post->slug)) }}" target="_blank" class="flex-1 py-2 bg-white/5 hover:bg-[#1DA1F2] hover:text-white text-gray-400 rounded-lg flex items-center justify-center transition-all">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.165-2.724 10.051 10.051 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.84 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                        </a>
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('blog.show', $post->slug)) }}" target="_blank" class="flex-1 py-2 bg-white/5 hover:bg-[#1877F2] hover:text-white text-gray-400 rounded-lg flex items-center justify-center transition-all">
                             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.791-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        </a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(route('blog.show', $post->slug)) }}&title={{ urlencode($post->title) }}" target="_blank" class="flex-1 py-2 bg-white/5 hover:bg-[#0A66C2] hover:text-white text-gray-400 rounded-lg flex items-center justify-center transition-all">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
                        </a>
                     </div>
                </div>
                <!-- Footer Nav -->
                 <div class="mt-12 pt-8 border-t border-white/5 flex justify-between items-center">
                    <a href="{{ route('blog.index') }}" class="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
                        <svg class="w-4 h-4 transform group-hover:-translate-x-1 transition-transform" 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 All Articles
                    </a>
                </div>
            </article>

            <!-- RIGHT COLUMN: Sidebar -->
            <!-- Explicit width for desktop, full width for mobile -->
            <aside class="w-full lg:w-[35%] flex-shrink-0 space-y-8">
                
                <!-- CTA Widget -->
                <div class="bg-gradient-to-br from-[#0E121A] to-[#131824] border border-blue-500/20 rounded-2xl p-6 sticky top-24">
                    <div class="mb-4 w-12 h-12 rounded-xl bg-blue-600/20 text-blue-500 flex items-center justify-center">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">Ready to start?</h3>
                    <p class="text-gray-400 text-sm mb-6 leading-relaxed">
                        Join thousands of traders using CheckMyAlgo to validate their strategies with institutional-grade data.
                    </p>
                    <a href="{{ route('pricing') }}" class="block w-full py-3 px-4 bg-blue-600 hover:bg-blue-500 text-white font-bold text-center rounded-xl transition-all shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40">
                        Start Free Trial
                    </a>
                    <p class="text-center text-xs text-gray-500 mt-4">No credit card required for free plan.</p>
                </div>

                <!-- Latest Posts -->
                @if(isset($latestPosts) && $latestPosts->count() > 0)
                <div class="bg-[#0E121A] border border-white/5 rounded-2xl p-6">
                    <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                        Latest Articles
                    </h3>
                    <div class="space-y-6">
                        @foreach($latestPosts as $latest)
                            <a href="{{ route('blog.show', $latest->slug) }}" class="group block">
                                <h4 class="text-gray-300 font-medium group-hover:text-blue-400 transition-colors line-clamp-2 mb-2">
                                    {{ $latest->title }}
                                </h4>
                                <div class="text-xs text-gray-500 flex items-center gap-2">
                                    <span>{{ $latest->published_at->format('M d') }}</span>
                                    <span>•</span>
                                    <span>{{ ceil(str_word_count(strip_tags($latest->content)) / 200) }} min read</span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
                @endif
                
                
            </aside>
        </div>
    </div>
</main>
@endsection

@section('scripts')
<script>
    window.onscroll = function() {
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrolled = (winScroll / height) * 100;
        document.getElementById("readingProgress").style.width = scrolled + "%";
    };
</script>
@endsection