@extends('layouts.public')

@section('title', $program->name . ' | Vishwas Sanstha Mata Maharani Welfare')

@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('welfare') }}" class="hover:text-gold">समाज कल्याण प्रकोष्ठ</a>
            <span>/</span>
            <span class="text-navy font-semibold truncate max-w-xs">{{ $program->name }}</span>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- MAIN PROGRAM CONTENT -->
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white rounded-3xl p-6 sm:p-10 border border-gray-100 shadow-sm">
                    <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(str_replace('_', ' ', $program->category)) }}
                        </span>
                        <span class="text-xs text-emerald-700 bg-emerald-50 px-2.5 py-0.5 rounded font-bold">
                            सक्रिय सेवा प्रकल्प
                        </span>
                    </div>

                    <h1 class="text-2xl sm:text-4xl font-extrabold text-navy font-heading mb-4">
                        {{ $program->name }}
                    </h1>

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

                    <!-- IMPACT STATS STRIP -->
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 p-4 bg-gold/10 rounded-2xl border border-gold/30 mb-6 text-center">
                        <div>
                            <span class="text-xl sm:text-2xl font-extrabold text-navy">{{ number_format($program->beneficiaries_served) }}+</span>
                            <p class="text-[11px] text-gray-600 font-semibold">लाभान्वित नागरिक</p>
                        </div>
                        <div>
                            <span class="text-xl sm:text-2xl font-extrabold text-navy">{{ $program->location_area ?? 'समस्त अंचल' }}</span>
                            <p class="text-[11px] text-gray-600 font-semibold">कार्यक्षेत्र / स्थान</p>
                        </div>
                        <div class="col-span-2 sm:col-span-1">
                            <span class="text-xl sm:text-2xl font-extrabold text-emerald-700">100% निःशुल्क</span>
                            <p class="text-[11px] text-gray-600 font-semibold">सेवा स्वरूप</p>
                        </div>
                    </div>

                    <div class="prose max-w-none text-gray-700 leading-relaxed text-sm sm:text-base space-y-4">
                        <p class="font-medium text-navy text-lg">{{ $program->description }}</p>
                        
                        @if($program->detailed_notes)
                            <div class="mt-4 pt-4 border-t border-gray-100">
                                {!! nl2br(e($program->detailed_notes)) !!}
                            </div>
                        @else
                            <p>विश्वास संस्था माता महारानी की इस पहल का मुख्य उद्देश्य वनांचल, ग्रामीण एवं पिछड़े क्षेत्रों में मानवीय सहायता पहुंचाना है। हमारा दृष्टिकोण यह सुनिश्चित करना है कि कोई भी परिवार बुनियादी आवश्यकताओं एवं आपातकालीन सुविधाओं से वंचित न रहे।</p>
                        @endif
                    </div>

                    <div class="mt-10 pt-6 border-t border-gray-100 flex items-center justify-between flex-wrap gap-4">
                        <a href="{{ route('welfare.aid') }}" class="px-6 py-3 bg-navy hover:bg-gold hover:text-navy text-white text-sm font-bold rounded-xl transition shadow">
                            इस योजना में सहायता हेतु आवेदन करें <i class="fa-solid fa-hand-holding-heart ml-1.5"></i>
                        </a>
                        <a href="{{ route('welfare') }}" class="text-sm font-semibold text-navy hover:text-gold">
                            <i class="fa-solid fa-arrow-left mr-1"></i> सभी कल्याण प्रकल्प देखें
                        </a>
                    </div>
                </div>
            </div>

            <!-- SIDEBAR -->
            <div class="space-y-6">
                <!-- EMERGENCY HELPLINE -->
                <div class="bg-gradient-to-br from-navy to-royal text-white rounded-3xl 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">विश्वास संस्था माता महारानी</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-xl text-sm transition">
                        <i class="fa-solid fa-phone mr-1"></i> +91 9485877237
                    </a>
                </div>

                <!-- OTHER WELFARE PROGRAMS -->
                <div class="bg-white rounded-3xl 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-solid fa-hand-holding-heart text-gold"></i>
                    </h3>
                    <div class="space-y-4">
                        @foreach($otherPrograms as $other)
                            <a href="{{ route('welfare.detail', $other->slug) }}" class="block group">
                                <span class="text-[10px] text-gold font-bold uppercase tracking-wider">{{ ucfirst(str_replace('_', ' ', $other->category)) }}</span>
                                <h4 class="text-sm font-semibold text-gray-800 group-hover:text-gold transition line-clamp-1 mt-0.5">
                                    {{ $other->name }}
                                </h4>
                                <p class="text-xs text-gray-400 mt-0.5">{{ number_format($other->beneficiaries_served) }}+ लाभान्वित</p>
                            </a>
                        @endforeach
                    </div>
                </div>

                <!-- VOLUNTEER PROMPT -->
                <div class="bg-emerald-50 rounded-3xl p-6 border border-emerald-200 text-center">
                    <i class="fa-solid fa-hands-holding-child text-3xl text-emerald-600 mb-2"></i>
                    <h4 class="font-bold text-navy text-sm">समाज सेवा में हाथ बटाएं</h4>
                    <p class="text-xs text-gray-600 mt-1 mb-4">अपने खाली समय में सेवा कार्य करके समाज में वास्तविक बदलाव लाएं।</p>
                    <a href="{{ route('volunteer') }}" class="block w-full py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs transition">
                        स्वयंसेवक पंजीकरण करें
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection