@extends('layouts.public')

@section('title', 'समाचार एवं घोषणाएं | Latest News & Announcements - Vishwas Bank')

@section('content')
<!-- HERO BANNER -->
<section class="bg-gradient-to-r from-navy via-royal to-navy text-white py-16 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#C6A15B_1px,transparent_1px)] [background-size:16px_16px]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <span class="inline-block bg-gold/20 text-gold border border-gold/40 text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-3">
            मीडिया एवं जनसंपर्क
        </span>
        <h1 class="text-3xl sm:text-5xl font-extrabold font-heading text-white mb-4">
            समाचार एवं नवीनतम घोषणाएं
        </h1>
        <p class="text-gold-light max-w-2xl mx-auto text-base sm:text-lg">
            विश्वास बैंक और विश्वास संस्था माता महारानी की ताज़ा गतिविधियां, ब्याज दर सूचनाएं व सामाजिक कल्याण के समाचार।
        </p>
    </div>
</section>

<!-- MAIN NEWS LIST -->
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($newsList->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($newsList as $item)
                    <article class="bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col overflow-hidden group">
                        <div class="relative h-48 bg-navy-light/10 overflow-hidden">
                            @if($item->image_url)
                                <img src="{{ asset($item->image_url) }}" alt="{{ $item->title }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                            @else
                                <div class="w-full h-full bg-gradient-to-br from-navy to-royal flex items-center justify-center p-6 text-center">
                                    <i class="fa-solid fa-bullhorn text-4xl text-gold/60"></i>
                                </div>
                            @endif
                            <div class="absolute top-3 left-3">
                                <span class="bg-navy/90 backdrop-blur text-gold text-xs font-semibold px-2.5 py-1 rounded-full border border-gold/30">
                                    {{ ucfirst($item->category ?? 'Announcement') }}
                                </span>
                            </div>
                            @if($item->is_ticker)
                                <div class="absolute top-3 right-3">
                                    <span class="bg-amber-500 text-white text-[10px] font-bold px-2 py-0.5 rounded uppercase tracking-wider animate-pulse">
                                        महत्वपूर्ण
                                    </span>
                                </div>
                            @endif
                        </div>

                        <div class="p-6 flex-1 flex flex-col justify-between">
                            <div>
                                <div class="flex items-center text-xs text-gray-400 mb-2 space-x-2">
                                    <i class="fa-regular fa-calendar text-gold"></i>
                                    <span>{{ \Carbon\Carbon::parse($item->published_at)->format('d M, Y') }}</span>
                                    <span>•</span>
                                    <span>{{ $item->type === 'news' ? 'समाचार' : 'आधिकारिक सूचना' }}</span>
                                </div>
                                <h2 class="text-lg font-bold text-navy hover:text-gold transition mb-2 line-clamp-2">
                                    <a href="{{ route('news.detail', $item->slug) }}">
                                        {{ $item->title }}
                                    </a>
                                </h2>
                                <p class="text-sm text-gray-600 line-clamp-3 mb-4">
                                    {{ $item->summary ?? Str::limit(strip_tags($item->content), 120) }}
                                </p>
                            </div>

                            <div class="pt-4 border-t border-gray-100 flex items-center justify-between">
                                <a href="{{ route('news.detail', $item->slug) }}" class="inline-flex items-center text-sm font-semibold text-navy group-hover:text-gold transition">
                                    विस्तार से पढ़ें <i class="fa-solid fa-arrow-right ml-1.5 text-xs"></i>
                                </a>
                                <span class="text-xs text-gray-400">विश्वास बैंक मीडिया सेल</span>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="mt-10">
                {{ $newsList->links() }}
            </div>
        @else
            <div class="text-center py-16 bg-white rounded-2xl border border-gray-200">
                <i class="fa-solid fa-newspaper text-5xl text-gray-300 mb-3"></i>
                <h3 class="text-lg font-bold text-navy">फिलहाल कोई नया समाचार उपलब्ध नहीं है</h3>
                <p class="text-sm text-gray-500 mt-1">शीघ्र ही नई जानकारी यहां प्रकाशित की जाएगी।</p>
            </div>
        @endif
    </div>
</section>
@endsection