@extends('layouts.frontend')

@section('title', $post->meta_title ?? $post->title . ' - Blog')
@section('meta_description', $post->meta_description ?? $post->excerpt)

@section('content')
<article class="pt-32 pb-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <header class="text-center mb-12">
            @if($post->category)
            <a href="{{ route('blog.category', $post->category->slug) }}" class="inline-block px-4 py-1 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-sm font-medium rounded-full mb-4 hover:bg-primary-200 transition-colors">
                {{ $post->category->name }}
            </a>
            @endif
            
            <h1 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
                {{ $post->title }}
            </h1>
            
            <div class="flex items-center justify-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                <span>{{ $post->published_at->format('F d, Y') }}</span>
                <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
                <span>{{ $post->reading_time }}</span>
                <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
                <span>{{ number_format($post->views) }} views</span>
            </div>
        </header>
        
        <!-- Featured Image -->
        @if($post->featured_image)
        <div class="mb-12 rounded-2xl overflow-hidden">
            <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-auto">
        </div>
        @endif
        
        <!-- Content -->
        <div class="prose prose-lg dark:prose-invert max-w-none mb-12">
            {!! $post->content !!}
        </div>
        
        <!-- Tags -->
        @if($post->tags->count() > 0)
        <div class="flex flex-wrap items-center gap-2 mb-12 pb-12 border-b border-gray-200 dark:border-gray-800">
            <span class="text-sm text-gray-500 dark:text-gray-400">Tags:</span>
            @foreach($post->tags as $tag)
            <a href="{{ route('blog.tag', $tag->slug) }}" class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm rounded-full hover:bg-primary-100 hover:text-primary-600 dark:hover:bg-primary-900/30 dark:hover:text-primary-400 transition-colors">
                {{ $tag->name }}
            </a>
            @endforeach
        </div>
        @endif
        
        <!-- Author -->
        <div class="flex items-center p-6 bg-gray-50 dark:bg-gray-800 rounded-2xl mb-12">
            <img src="{{ asset('images/profile.png') }}" alt="{{ $post->author->name }}" class="w-16 h-16 rounded-full mr-4">
            <div>
                <h4 class="font-semibold text-gray-900 dark:text-white">{{ $post->author->name }}</h4>
                <p class="text-sm text-gray-500 dark:text-gray-400">Technology Executive & Data Engineering Leader</p>
            </div>
        </div>
        
        <!-- Share -->
        <div class="flex items-center justify-center space-x-4 mb-12">
            <span class="text-sm text-gray-500 dark:text-gray-400">Share:</span>
            <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($post->title) }}" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                <i class="fab fa-x-twitter"></i>
            </a>
            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($post->title) }}" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                <i class="fab fa-facebook-f"></i>
            </a>
        </div>
    </div>
    
    <!-- Related Posts -->
    @if($relatedPosts->count() > 0)
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h3 class="font-display text-2xl font-bold text-gray-900 dark:text-white mb-8">Related Articles</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($relatedPosts as $related)
            <article class="card-hover bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-sm">
                @if($related->featured_image)
                <img src="{{ asset('storage/' . $related->featured_image) }}" alt="{{ $related->title }}" class="w-full h-40 object-cover">
                @else
                <div class="w-full h-40 bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
                    <i class="fas fa-newspaper text-white text-3xl opacity-50"></i>
                </div>
                @endif
                <div class="p-5">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">
                        <a href="{{ route('blog.show', $related->slug) }}" class="hover:text-primary-500 transition-colors">
                            {{ $related->title }}
                        </a>
                    </h4>
                    <span class="text-sm text-gray-500 dark:text-gray-400">{{ $related->published_at->format('M d, Y') }}</span>
                </div>
            </article>
            @endforeach
        </div>
    </div>
    @endif
</article>
@endsection