@extends('layouts.public')

@section('title', $item->title . ' | Vishwas Bank News')

@section('content')
<section class="bg-gray-50 py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- BREADCRUMB -->
        <nav class="flex items-center space-x-2 text-xs text-gray-500 mb-6">
            <a href="{{ route('home') }}" class="hover:text-gold">होम</a>
            <span>/</span>
            <a href="{{ route('news') }}" class="hover:text-gold">समाचार एवं घोषणाएं</a>
            <span>/</span>
            <span class="text-navy font-semibold truncate max-w-xs">{{ $item->title }}</span>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- MAIN ARTICLE -->
            <article class="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6 sm:p-10">
                <div class="flex items-center gap-3 mb-4 flex-wrap">
                    <span class="bg-navy text-gold text-xs font-semibold px-3 py-1 rounded-full border border-gold/30">
                        {{ ucfirst($item->category ?? 'Notice') }}
                    </span>
                    <span class="text-xs text-gray-500 flex items-center gap-1.5">
                        <i class="fa-regular fa-calendar text-gold"></i>
                        {{ \Carbon\Carbon::parse($item->published_at)->format('d F, Y') }}
                    </span>
                    @if($item->is_ticker)
                        <span class="bg-amber-100 text-amber-800 text-xs font-bold px-2.5 py-0.5 rounded">
                            महत्वपूर्ण सूचना
                        </span>
                    @endif
                </div>

                <h1 class="text-2xl sm:text-4xl font-extrabold text-navy font-heading mb-6 leading-tight">
                    {{ $item->title }}
                </h1>

                @if($item->image_url)
                    <div class="rounded-xl overflow-hidden mb-8 border border-gray-200">
                        <img src="{{ asset($item->image_url) }}" alt="{{ $item->title }}" class="w-full h-auto max-h-[420px] object-cover">
                    </div>
                @endif

                @if($item->summary)
                    <div class="p-4 bg-gold/10 border-l-4 border-gold rounded-r-lg mb-6 text-navy font-medium italic">
                        {{ $item->summary }}
                    </div>
                @endif

                <div class="prose max-w-none text-gray-700 leading-relaxed space-y-4 text-base">
                    {!! nl2br(e($item->content)) !!}
                </div>

                <div class="mt-10 pt-6 border-t border-gray-100 flex items-center justify-between flex-wrap gap-4">
                    <div class="flex items-center space-x-2 text-xs text-gray-500">
                        <span>साझा करें:</span>
                        <a href="https://api.whatsapp.com/send?text={{ urlencode($item->title . ' ' . url()->current()) }}" target="_blank" class="h-8 w-8 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center hover:bg-emerald-600 hover:text-white transition">
                            <i class="fa-brands fa-whatsapp"></i>
                        </a>
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="h-8 w-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center hover:bg-blue-600 hover:text-white transition">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                    </div>
                    <a href="{{ route('news') }}" class="text-sm font-semibold text-navy hover:text-gold">
                        <i class="fa-solid fa-arrow-left mr-1"></i> सभी समाचार देखें
                    </a>
                </div>
            </article>

            <!-- SIDEBAR -->
            <div class="space-y-6">
                <!-- EMERGENCY CONTACT CARD -->
                <div class="bg-gradient-to-br from-navy to-royal text-white rounded-2xl p-6 border border-gold/30">
                    <div class="flex items-center space-x-3 mb-3">
                        <div class="h-10 w-10 rounded-full bg-gold/20 flex items-center justify-center text-gold">
                            <i class="fa-solid fa-headset text-lg"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-white text-base">हेल्पलाइन केंद्र</h3>
                            <p class="text-xs text-gold">24x7 ग्राहक सहायता</p>
                        </div>
                    </div>
                    <p class="text-xs text-gray-300 mb-4">किसी भी प्रश्न या सहायता के लिए हमारे आधिकारिक हेल्पलाइन नंबर पर संपर्क करें।</p>
                    <a href="tel:+919485877237" class="block w-full text-center py-2.5 bg-gold hover:bg-gold-dark text-navy font-bold rounded-lg text-sm transition">
                        <i class="fa-solid fa-phone mr-1"></i> +91 9485877237
                    </a>
                </div>

                <!-- RECENT NEWS -->
                <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
                    <h3 class="text-base font-bold text-navy mb-4 border-b pb-2 flex items-center justify-between">
                        <span>हालिया समाचार</span>
                        <i class="fa-regular fa-newspaper text-gold"></i>
                    </h3>
                    <div class="space-y-4">
                        @forelse($recentNews as $recent)
                            <a href="{{ route('news.detail', $recent->slug) }}" class="block group">
                                <p class="text-xs text-gray-400">{{ \Carbon\Carbon::parse($recent->published_at)->format('d M, Y') }}</p>
                                <h4 class="text-sm font-semibold text-gray-800 group-hover:text-gold transition line-clamp-2 mt-0.5">
                                    {{ $recent->title }}
                                </h4>
                            </a>
                        @empty
                            <p class="text-xs text-gray-500">कोई अन्य समाचार नहीं है।</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection