@extends('layouts.main')

@section('title', $article->meta_title ?? $article->title . ' - UFG')
@section('meta_description', $article->meta_description ?? $article->excerpt ?? Str::limit(strip_tags($article->content), 160))

@push('styles')
<style>
    /* Remove body padding for this page to allow hero to start from top */
    body {
        padding-top: 0 !important;
    }
    
    /* News Detail Page Specific Styles */
    .news-detail-hero {
        background-image: 
            linear-gradient(135deg, rgba(3, 139, 185, 0.85) 0%, rgba(17, 107, 181, 0.75) 50%, rgba(5, 71, 128, 0.9) 100%), 
            url('{{ $article->featured_image_url }}');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        /* Start from absolute top to cover header */
        position: relative;
        top: 0;
        margin-top: 0;
        /* Ensure hero covers the header area */
        min-height: 100vh;
        /* Lower z-index so header content shows above it */
        z-index: 1;
    }
    
    /* Ensure header stays above hero background */
    .aufg-global-header {
        z-index: 9998 !important;
    }

    /* Missing Tailwind Classes */
    .bg-aufg-primary { background-color: #038BB9 !important; }
    .bg-aufg-primary-dark { background-color: #1169B5 !important; }
    .bg-aufg-primary\/10 { background-color: rgba(3, 139, 185, 0.1) !important; }
    .bg-aufg-bg-light { background-color: #F8F9FA !important; }
    .text-aufg-primary { color: #038BB9 !important; }
    .text-aufg-primary-dark { color: #1169B5 !important; }
    .text-aufg-text-primary { color: #112a3b !important; }
    .text-aufg-text-secondary { color: #7A7A7A !important; }
    .bg-aufg-gradient { background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%) !important; }
    
    /* Border Radius Classes */
    .rounded-3xl { border-radius: 1.5rem !important; }
    .rounded-full { border-radius: 9999px !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    
    /* Layout adjustment classes */
    .pt-\[160px\] { padding-top: 160px !important; }
    .pb-\[100px\] { padding-bottom: 100px !important; }

    /* Layout Classes */
    .flex { display: flex !important; }
    .flex-col { flex-direction: column !important; }
    .items-center { align-items: center !important; }
    .justify-center { justify-content: center !important; }
    .justify-between { justify-content: space-between !important; }
    .text-center { text-align: center !important; }
    .mb-16 { margin-bottom: 4rem !important; }
    
    /* Content Styling */
    .news-content {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #374151;
    }
    
    .news-content h1, .news-content h2, .news-content h3, .news-content h4 {
        color: #112a3b;
        font-weight: 600;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    
    .news-content h1 { font-size: 2rem; }
    .news-content h2 { font-size: 1.75rem; }
    .news-content h3 { font-size: 1.5rem; }
    .news-content h4 { font-size: 1.25rem; }
    
    .news-content p {
        margin-bottom: 1.5rem;
    }
    
    .news-content ul, .news-content ol {
        margin-bottom: 1.5rem;
        padding-left: 2rem;
    }
    
    .news-content li {
        margin-bottom: 0.5rem;
    }
    
    .news-content blockquote {
        border-left: 4px solid #038BB9;
        padding-left: 1rem;
        margin: 2rem 0;
        font-style: italic;
        color: #6B7280;
    }
    
    /* Tags */
    .tag {
        display: inline-block;
        background-color: rgba(3, 139, 185, 0.1);
        color: #038BB9;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    /* Animation Classes */
    .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endpush

@section('content')
<!-- Hero Section -->
<section class="news-detail-hero relative flex items-center justify-center">
    <!-- Additional brand color overlay for enhanced readability -->
    <div class="absolute inset-0" style="background: linear-gradient(135deg, rgba(3, 139, 185, 0.1) 0%, rgba(17, 107, 181, 0.2) 100%);"></div>
    <div class="container mx-auto px-6 relative z-10" style="padding-top: 160px; padding-bottom: 100px;">
        <div class="text-center text-white">
            <nav class="text-sm mb-6">
                <a href="{{ route('home') }}" class="text-white hover:text-blue-200 transition-colors">Home</a> 
                <span class="mx-2">•</span>
                <a href="{{ route('news') }}" class="text-white hover:text-blue-200 transition-colors">News</a>
                <span class="mx-2">•</span>
                <span class="text-blue-200">{{ $article->title }}</span>
            </nav>
            
            <div class="inline-block rounded-full px-4 py-2 mb-6" 
                 style="background-color: {{ $article->categoryModel->color ?? '#6B7280' }}; color: {{ $article->categoryModel->text_color ?? '#FFFFFF' }};">
                @if($article->categoryModel && $article->categoryModel->icon)
                    <i class="material-icons" style="font-size: 16px; vertical-align: middle; margin-right: 6px;">{{ $article->categoryModel->icon }}</i>
                @endif
                <span class="font-medium text-sm">{{ $article->categoryModel->name ?? ucfirst($article->category ?? 'General') }}</span>
            </div>
            
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight animate-fade-in-up">
                {{ $article->title }}
            </h1>
            
            @if($article->excerpt)
            <p class="text-xl md:text-2xl leading-relaxed mb-8 max-w-4xl mx-auto animate-fade-in-up opacity-90">
                {{ $article->excerpt }}
            </p>
            @endif
            
            <div class="flex items-center justify-center space-x-6 text-sm animate-fade-in-up">
                <div class="flex items-center">
                    <i class="fas fa-calendar-alt mr-2"></i>
                    {{ $article->published_at->format('F j, Y') }}
                </div>
                <div class="flex items-center">
                    <i class="fas fa-user mr-2"></i>
                    {{ $article->author->full_name ?? 'UFG Team' }}
                </div>
                <div class="flex items-center">
                    <i class="fas fa-clock mr-2"></i>
                    {{ ceil(str_word_count(strip_tags($article->content)) / 200) }} min read
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="bg-aufg-bg-light relative z-20 pt-20 pb-20">
    <div class="container mx-auto px-6">
        <div class="max-w-4xl mx-auto">
            <!-- Article Content -->
            <div class="bg-white rounded-3xl shadow-lg p-8 md:p-12 mb-12">
                <div class="news-content">
                    {!! $article->content !!}
                </div>
                
                <!-- Tags -->
                @if($article->tags && count($article->tags) > 0)
                <div class="border-t pt-8 mt-8">
                    <h4 class="text-lg font-semibold text-aufg-text-primary mb-4">Tags</h4>
                    <div class="flex flex-wrap">
                        @foreach($article->tags as $tag)
                        <span class="tag">{{ $tag }}</span>
                        @endforeach
                    </div>
                </div>
                @endif
                
                <!-- Share Buttons -->
                <div class="border-t pt-8 mt-8">
                    <h4 class="text-lg font-semibold text-aufg-text-primary mb-4">Share this article</h4>
                    <div class="flex space-x-4">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" 
                           target="_blank" 
                           class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                            <i class="fab fa-facebook-f mr-2"></i>Facebook
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($article->title) }}" 
                           target="_blank" 
                           class="bg-blue-400 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors">
                            <i class="fab fa-twitter mr-2"></i>Twitter
                        </a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}" 
                           target="_blank" 
                           class="bg-blue-800 text-white px-4 py-2 rounded-lg hover:bg-blue-900 transition-colors">
                            <i class="fab fa-linkedin-in mr-2"></i>LinkedIn
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Navigation -->
            <div class="flex justify-center mb-12">
                <a href="{{ route('news') }}" 
                   class="bg-aufg-gradient text-white px-8 py-4 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                    <i class="fas fa-arrow-left mr-2"></i>Back to News
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Related Articles -->
@if($relatedNews->isNotEmpty())
<section class="bg-white py-20">
    <div class="container mx-auto px-6">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-aufg-text-primary mb-4">
                Related Articles
            </h2>
            <p class="text-aufg-text-secondary text-lg max-w-2xl mx-auto">
                Discover more news and insights from UFG
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            @foreach($relatedNews as $related)
            <div class="bg-white rounded-3xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden">
                <img src="{{ $related->featured_image_url }}" 
                     alt="{{ $related->title }}" 
                     class="w-full h-48 object-cover">
                <div class="p-6">
                    <div class="inline-block rounded-full px-3 py-1 mb-3" 
                         style="background-color: {{ $related->categoryModel->color ?? '#6B7280' }}20; color: {{ $related->categoryModel->color ?? '#6B7280' }};">
                        @if($related->categoryModel && $related->categoryModel->icon)
                            <i class="material-icons" style="font-size: 14px; vertical-align: middle; margin-right: 4px;">{{ $related->categoryModel->icon }}</i>
                        @endif
                        <span class="font-medium text-sm">{{ $related->categoryModel->name ?? ucfirst($related->category ?? 'General') }}</span>
                    </div>
                    <h4 class="text-xl font-bold text-aufg-text-primary mb-3">
                        {{ Str::limit($related->title, 60) }}
                    </h4>
                    <p class="text-aufg-text-secondary mb-4 text-sm leading-relaxed">
                        {{ $related->excerpt ?? Str::limit(strip_tags($related->content), 100) }}
                    </p>
                    <div class="flex items-center justify-between">
                        <span class="text-aufg-text-secondary text-xs">{{ $related->published_at->format('M j, Y') }}</span>
                        <a href="{{ route('news.show', $related->slug) }}" 
                           class="text-aufg-primary font-semibold text-sm hover:text-aufg-primary-dark transition-colors">
                            Read More →
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection

@push('scripts')
<script>
// Smooth scroll animations
document.addEventListener('DOMContentLoaded', function() {
    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in-up');
            }
        });
    }, observerOptions);
    
    // Observe all sections
    document.querySelectorAll('section').forEach(section => {
        observer.observe(section);
    });
});
</script>
@endpush