@extends('layouts.main')

@section('title', 'News - UFG')

@push('styles')
<style>
    /* News Page Specific Styles */
    .news-hero {
        background-image: linear-gradient(rgba(3, 139, 185, 0.3), rgba(17, 107, 181, 0.3)), url('{{ asset("assets/2025/08/2d798430fc0e6ab7087749eab6eaa37312a3da9e-scaled.png") }}');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    /* 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; }
    .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; }
    .from-blue-200 { --tw-gradient-from: #dbeafe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 234, 254, 0)) !important; }
    .to-blue-100 { --tw-gradient-to: #dbeafe !important; }
    .bg-clip-text { background-clip: text !important; -webkit-background-clip: text !important; }
    .text-transparent { color: transparent !important; }
    .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
    .animate-bounce { animation: bounce 2s infinite; }
    
    /* Border Radius Classes */
    .rounded-3xl { border-radius: 1.5rem !important; }
    .rounded-full { border-radius: 9999px !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    
    /* Negative Margin Classes */
    .-mt-\[123px\] { margin-top: -123px !important; }
    .pt-\[200px\] { padding-top: 200px !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; }
    .mb-6 { margin-bottom: 1.5rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mb-3 { margin-bottom: 0.75rem !important; }
    .mb-12 { margin-bottom: 3rem !important; }
    .mt-12 { margin-top: 3rem !important; }
    .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .p-6 { padding: 1.5rem !important; }
    .p-8 { padding: 2rem !important; }
    .p-12 { padding: 3rem !important; }
    .max-w-7xl { max-width: 80rem !important; }
    .max-w-6xl { max-width: 72rem !important; }
    .max-w-3xl { max-width: 48rem !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .w-6 { width: 1.5rem !important; }
    .h-6 { height: 1.5rem !important; }
    .w-full { width: 100% !important; }
    .h-48 { height: 12rem !important; }
    .h-64 { height: 16rem !important; }
    .h-full { height: 100% !important; }
    .min-h-screen { min-height: 100vh !important; }
    .transform { transform: var(--tw-transform) !important; }
    .-translate-x-1\/2 { --tw-translate-x: -50% !important; transform: translateX(-50%) !important; }
    .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
    .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .transition-shadow { transition-property: box-shadow !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .duration-300 { transition-duration: 300ms !important; }
    .absolute { position: absolute !important; }
    .relative { position: relative !important; }
    .left-1\/2 { left: 50% !important; }
    .bottom-8 { bottom: 2rem !important; }
    .z-10 { z-index: 10 !important; }
    .bg-white { background-color: white !important; }
    .bg-green-100 { background-color: #dcfce7 !important; }
    .bg-purple-100 { background-color: #f3e8ff !important; }
    .text-green-600 { color: #16a34a !important; }
    .text-purple-600 { color: #9333ea !important; }
    .inline-block { display: inline-block !important; }
    .self-start { align-self: flex-start !important; }
    .font-semibold { font-weight: 600 !important; }
    .font-bold { font-weight: 700 !important; }
    .font-medium { font-weight: 500 !important; }
    .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
    .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
    .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
    .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .text-white { color: white !important; }
    .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
    .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
    .leading-relaxed { line-height: 1.625 !important; }
    .leading-tight { line-height: 1.25 !important; }
    .overflow-hidden { overflow: hidden !important; }
    .object-cover { object-fit: cover !important; }
    .grid { display: grid !important; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .gap-8 { gap: 2rem !important; }
    .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .hover\:scale-105:hover { transform: scale(1.05) !important; }
    .hover\:-translate-y-2:hover { transform: translateY(-0.5rem) !important; }
    .hover\:text-aufg-primary-dark:hover { color: #1169B5 !important; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0 !important; }
    .opacity-10 { opacity: 0.1 !important; }
    .backdrop-blur-\[1px\] { backdrop-filter: blur(1px) !important; }

    /* Responsive Classes */
    @media (min-width: 768px) {
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
        .md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
        .md\:flex { display: flex !important; }
        .md\:w-1\/2 { width: 50% !important; }
        .md\:p-12 { padding: 3rem !important; }
        .md\:h-full { height: 100% !important; }
        .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    }

    @media (min-width: 1024px) {
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
        .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    }

    @keyframes fadeInUp {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes bounce {
        0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
        40%, 43% { transform: translateY(-10px); }
        70% { transform: translateY(-5px); }
        90% { transform: translateY(-2px); }
    }
</style>
@endpush

@section('content')
<!-- News Hero Section -->
<section class="news-hero relative min-h-screen flex items-center justify-center overflow-hidden bg-cover bg-center bg-fixed -mt-[123px] pt-[200px] pb-[100px]">
    <!-- Glass Effect Overlay -->
    <div class="absolute inset-0 bg-gradient-to-br from-aufg-primary/30 via-aufg-primary-dark/20 to-aufg-primary-darker/30 backdrop-blur-[1px]"></div>
    
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
    </div>
    
    <!-- Content -->
    <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white font-poppins leading-tight animate-fade-in-up">
            News <span class="bg-gradient-to-r from-blue-200 to-blue-100 bg-clip-text text-transparent">Center</span>
        </h1>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
    </div>
</section>

<!-- News Section -->
<section id="news" class="py-20 bg-aufg-bg-light">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <div class="inline-block bg-aufg-primary/10 rounded-full px-6 py-2 mb-4">
                <span class="text-aufg-primary font-semibold">Latest Updates</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-bold text-aufg-text-primary mb-6">
                News Center
            </h2>
            <p class="text-xl text-aufg-text-secondary max-w-3xl mx-auto">
                Stay updated with the latest announcements, press releases, and company news from UFG.
            </p>
        </div>

        <!-- Featured News -->
        @if($featuredNews->isNotEmpty())
        <div class="mb-16">
            @foreach($featuredNews->take(1) as $featured)
            <div class="bg-white rounded-3xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2">
                        <img src="{{ $featured->featured_image_url }}" 
                             alt="{{ $featured->title }}" 
                             class="w-full h-64 md:h-full object-cover">
                    </div>
                    <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                        <div class="inline-block bg-aufg-primary/10 rounded-full px-4 py-1 mb-4 self-start">
                            <span class="text-aufg-primary font-medium text-sm">Featured</span>
                        </div>
                        <h3 class="text-2xl md:text-3xl font-bold text-aufg-text-primary mb-4">
                            {{ $featured->title }}
                        </h3>
                        <p class="text-aufg-text-secondary mb-6 leading-relaxed">
                            {{ $featured->excerpt ?? Str::limit(strip_tags($featured->content), 150) }}
                        </p>
                        <div class="flex items-center justify-between">
                            <span class="text-aufg-text-secondary text-sm">{{ $featured->published_at->format('F j, Y') }}</span>
                            <a href="{{ route('news.show', $featured->slug) }}" 
                               class="bg-aufg-gradient text-white px-6 py-3 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                                Read More
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        <!-- News Grid -->
        <div id="news-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($news as $index => $article)
            <div class="news-item bg-white rounded-3xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden {{ $index >= 6 ? 'hidden' : '' }}">
                <img src="{{ $article->featured_image_url }}" 
                     alt="{{ $article->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: {{ $article->categoryModel->color ?? '#6B7280' }}20; color: {{ $article->categoryModel->color ?? '#6B7280' }};">
                        @if($article->categoryModel && $article->categoryModel->icon)
                            <i class="material-icons" style="font-size: 14px; vertical-align: middle; margin-right: 4px;">{{ $article->categoryModel->icon }}</i>
                        @endif
                        <span class="font-medium text-sm">{{ $article->categoryModel->name ?? ucfirst($article->category ?? 'General') }}</span>
                    </div>
                    <h4 class="text-xl font-bold text-aufg-text-primary mb-3">
                        {{ Str::limit($article->title, 60) }}
                    </h4>
                    <p class="text-aufg-text-secondary mb-4 text-sm leading-relaxed">
                        {{ $article->excerpt ?? Str::limit(strip_tags($article->content), 100) }}
                    </p>
                    <div class="flex items-center justify-between">
                        <span class="text-aufg-text-secondary text-xs">{{ $article->published_at->format('M j, Y') }}</span>
                        <a href="{{ route('news.show', $article->slug) }}" 
                           class="text-aufg-primary font-semibold text-sm hover:text-aufg-primary-dark transition-colors">
                            Read More →
                        </a>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-full text-center py-12">
                <div class="text-aufg-text-secondary">
                    <h4 class="text-xl font-semibold mb-2">No news articles found</h4>
                    <p>Check back later for the latest updates from UFG.</p>
                </div>
            </div>
            @endforelse
        </div>

        <!-- Load More Button -->
        @if($news->count() > 6)
        <div class="flex justify-center mt-12">
            <button id="load-more-btn" 
                    class="bg-aufg-gradient text-white px-8 py-4 rounded-lg font-semibold hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex items-center gap-3">
                <span>View More News</span>
                <svg class="w-5 h-5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
        </div>
        
        <div class="justify-center mt-6" id="show-less-container" style="display: none;">
            <button id="show-less-btn" 
                    class="bg-white border-2 border-aufg-primary text-aufg-primary px-8 py-4 rounded-lg font-semibold hover:bg-aufg-primary hover:text-white transition-all duration-300 transform hover:scale-105 flex items-center gap-3">
                <span>Show Less</span>
                <svg class="w-5 h-5 transition-transform duration-300 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
        </div>
        @endif
    </div>
</section>
@endsection

@push('scripts')
<script>
function scrollToSection(sectionId) {
    const element = document.getElementById(sectionId);
    if (element) {
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    }
}

// 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);
    });
    
    // Load More / Show Less functionality
    const loadMoreBtn = document.getElementById('load-more-btn');
    const showLessBtn = document.getElementById('show-less-btn');
    const showLessContainer = document.getElementById('show-less-container');
    const newsItems = document.querySelectorAll('.news-item');
    
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', function() {
            // Show all hidden news items with animation
            const hiddenItems = document.querySelectorAll('.news-item.hidden');
            
            hiddenItems.forEach((item, index) => {
                setTimeout(() => {
                    item.classList.remove('hidden');
                    item.style.opacity = '0';
                    item.style.transform = 'translateY(20px)';
                    
                    // Animate in
                    setTimeout(() => {
                        item.style.transition = 'all 0.5s ease-out';
                        item.style.opacity = '1';
                        item.style.transform = 'translateY(0)';
                    }, 50);
                }, index * 100); // Stagger the animations
            });
            
            // Hide "Load More" button and show "Show Less" button
            setTimeout(() => {
                loadMoreBtn.parentElement.style.display = 'none';
                showLessContainer.style.display = 'flex';
                
                // Scroll to show the newly revealed content
                setTimeout(() => {
                    document.querySelector('.news-item:nth-child(7)')?.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }, 300);
            }, hiddenItems.length * 100 + 200);
        });
    }
    
    if (showLessBtn) {
        showLessBtn.addEventListener('click', function() {
            // Hide items beyond the first 6
            const itemsToHide = Array.from(newsItems).slice(6);
            
            itemsToHide.forEach((item, index) => {
                setTimeout(() => {
                    item.style.transition = 'all 0.3s ease-out';
                    item.style.opacity = '0';
                    item.style.transform = 'translateY(-20px)';
                    
                    setTimeout(() => {
                        item.classList.add('hidden');
                        item.style.opacity = '';
                        item.style.transform = '';
                        item.style.transition = '';
                    }, 300);
                }, index * 50);
            });
            
            // Show "Load More" button and hide "Show Less" button
            setTimeout(() => {
                showLessContainer.style.display = 'none';
                loadMoreBtn.parentElement.style.display = 'flex';
                
                // Scroll back to the beginning of the news grid
                document.getElementById('news-grid').scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }, itemsToHide.length * 50 + 300);
        });
    }
});
</script>
@endpush