@extends('layouts.frontend')

@section('title', $settings['site_name'] ?? 'সাংসদ পোর্টাল')

@section('content')
    <!-- Hero Section -->
    <section class="bg-bd-green-500 text-white py-16 md:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div>
                    <h1 class="text-3xl md:text-5xl font-bold mb-6 leading-tight">
                        উন্নয়ন ও অগ্রযাত্রায়<br>আপনার পাশে সর্বদা
                    </h1>
                    <p class="text-bd-green-100 mb-8 text-lg">
                        {{ $settings['welcome_message'] ?? 'আমাদের লক্ষ্য একটি সমৃদ্ধ ও স্মার্ট নির্বাচনী এলাকা গড়ে তোলা। আপনার সমস্যা ও পরামর্শ আমাদের জানাও, আমরা শুনছি।' }}
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="{{ route('grievance.form') }}"
                            class="px-6 py-3 bg-bd-red-500 text-white rounded-lg font-semibold hover:bg-bd-red-600 transition">
                            অভিযোগ জানান
                        </a>
                        <a href="{{ route('projects') }}"
                            class="px-6 py-3 border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-bd-green-500 transition">
                            উন্নয়ন দেখুন
                        </a>
                    </div>
                </div>
                <div class="flex justify-center">
                    <div class="relative">
                        @if (!empty($settings['mp_photo']))
                            <div class="w-64 h-64 md:w-80 md:h-80 rounded-full border-8 border-white/30 p-2">
                                <img src="{{ Storage::url($settings['mp_photo']) }}"
                                    alt="{{ $settings['mp_name'] ?? 'MP' }}"
                                    class="w-full h-full rounded-full object-cover">
                            </div>
                        @else
                            <div class="w-64 h-64 md:w-80 md:h-80 rounded-full border-8 border-white/30 p-2">
                                <div class="w-full h-full rounded-full bg-gray-200 flex items-center justify-center">
                                    <i class="fas fa-user text-6xl text-gray-400"></i>
                                </div>
                            </div>
                        @endif
                        <!-- Name Label -->
                        <div
                            class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-white rounded-full px-6 py-2 shadow-lg">
                            <p class="text-bd-green-500 font-semibold whitespace-nowrap">মাননীয় সংসদ সদস্য</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-12 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="text-center p-6 bg-bd-green-50 rounded-xl">
                    <div class="text-3xl md:text-4xl font-bold text-bd-green-500 mb-2">{{ $stats['total_projects'] }}</div>
                    <div class="text-gray-600">মোট প্রকল্প</div>
                </div>
                <div class="text-center p-6 bg-blue-50 rounded-xl">
                    <div class="text-3xl md:text-4xl font-bold text-blue-600 mb-2">{{ $stats['ongoing_projects'] }}</div>
                    <div class="text-gray-600">চলমান প্রকল্প</div>
                </div>
                <div class="text-center p-6 bg-green-50 rounded-xl">
                    <div class="text-3xl md:text-4xl font-bold text-green-600 mb-2">{{ $stats['completed_projects'] }}</div>
                    <div class="text-gray-600">সম্পন্ন প্রকল্প</div>
                </div>
                <div class="text-center p-6 bg-bd-red-50 rounded-xl">
                    <div class="text-3xl md:text-4xl font-bold text-bd-red-500 mb-2">{{ $stats['grievances_resolved'] }}
                    </div>
                    <div class="text-gray-600">সমাধানকৃত অভিযোগ</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Projects -->
    @if ($featuredProjects->count() > 0)
        <section class="py-12 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-10">
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">বিশেষ প্রকল্পসমূহ</h2>
                    <p class="text-gray-600">এলাকার উন্নয়নে গৃহীত প্রধান প্রকল্পসমূহ</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    @foreach ($featuredProjects as $project)
                        <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
                            @if ($project->image)
                                <img src="{{ Storage::url($project->image) }}" alt="{{ $project->title }}"
                                    class="w-full h-48 object-cover">
                            @else
                                <div class="w-full h-48 bg-bd-green-500 flex items-center justify-center">
                                    <i class="fas fa-project-diagram text-4xl text-white"></i>
                                </div>
                            @endif
                            <div class="p-6">
                                <span
                                    class="inline-block px-3 py-1 text-xs font-medium rounded-full {{ $project->status === 'completed' ? 'bg-green-100 text-green-700' : ($project->status === 'ongoing' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700') }}">
                                    {{ $project->status_label }}
                                </span>
                                <h3 class="text-lg font-bold text-gray-900 mt-3 mb-2">{{ $project->title }}</h3>
                                <p class="text-gray-600 text-sm mb-4">{{ Str::limit($project->description, 100) }}</p>
                                <div class="mb-4">
                                    <div class="flex justify-between text-sm text-gray-600 mb-1">
                                        <span>অগ্রগতি</span>
                                        <span>{{ $project->progress }}%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-bd-green-500 h-2 rounded-full"
                                            style="width: {{ $project->progress }}%"></div>
                                    </div>
                                </div>
                                <a href="{{ route('projects.show', $project) }}"
                                    class="text-bd-green-500 hover:text-bd-green-600 font-medium">
                                    বিস্তারিত দেখুন →
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="text-center mt-8">
                    <a href="{{ route('projects') }}"
                        class="inline-flex items-center px-6 py-3 bg-bd-green-500 text-white rounded-lg font-semibold hover:bg-bd-green-600 transition">
                        সকল প্রকল্প দেখুন
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>
    @endif

    <!-- Latest Notices -->
    @if ($notices->count() > 0)
        <section class="py-12 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-10">
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">সাম্প্রতিক নোটিশ</h2>
                    <p class="text-gray-600">গুরুত্বপূর্ণ ঘোষণা ও বিজ্ঞপ্তি</p>
                </div>
                <div class="space-y-4">
                    @foreach ($notices as $notice)
                        <div
                            class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition {{ $notice->isUrgent() ? 'border-l-4 border-red-500' : '' }}">
                            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-1">
                                        <span
                                            class="px-2 py-0.5 text-xs font-medium rounded {{ $notice->getTypeBadgeClass() }}">
                                            {{ $notice->type_label }}
                                        </span>
                                        <span
                                            class="text-xs text-gray-500">{{ $notice->published_at->format('d M, Y') }}</span>
                                    </div>
                                    <h3 class="font-semibold text-gray-900">{{ $notice->title }}</h3>
                                </div>
                                <a href="{{ route('notices.show', $notice) }}"
                                    class="text-bd-green-500 hover:text-bd-green-600 text-sm font-medium whitespace-nowrap">
                                    বিস্তারিত →
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="text-center mt-8">
                    <a href="{{ route('notices') }}" class="text-bd-green-500 hover:text-bd-green-600 font-medium">
                        সকল নোটিশ দেখুন →
                    </a>
                </div>
            </div>
        </section>
    @endif

    <!-- CTA Section -->
    <section class="py-16 bg-bd-green-500">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">কোনো সমস্যা বা অভিযোগ আছে?</h2>
            <p class="text-bd-green-100 mb-8">আপনার সমস্যা জানান, আমরা সমাধানে প্রতিশ্রুতিবদ্ধ</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="{{ route('grievance.form') }}"
                    class="px-8 py-4 bg-bd-red-500 text-white rounded-lg font-semibold hover:bg-bd-red-600 transition">
                    <i class="fas fa-paper-plane mr-2"></i>অভিযোগ দাখিল করুন
                </a>
                <a href="{{ route('grievance.track') }}"
                    class="px-8 py-4 border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-bd-green-500 transition">
                    <i class="fas fa-search mr-2"></i>অভিযোগ ট্র্যাক করুন
                </a>
            </div>
        </div>
    </section>
@endsection