@extends('layouts.public')
@section('title', __('Home'))
@section('content')
{{-- Hero Section --}}
<section class="bg-gradient-to-br from-green-700 to-green-900 text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">{{ __('Smart Family Card') }}</h1>
                <p class="text-lg text-green-100 mb-8">
                    @if(app()->getLocale() === 'bn')
                        দেশের দরিদ্র ও অসহায় পরিবারগুলোকে সরাসরি আর্থিক সহায়তা প্রদানের জন্য সরকারের উদ্ভাবনী উদ্যোগ। একটি পরিবার, একটি কার্ড — QR Code, NFC এবং চিপ প্রযুক্তির সমন্বয়ে তৈরি স্মার্ট কার্ড।
                    @else
                        The government's innovative initiative to provide direct financial assistance to poor and vulnerable families. One household, one card — a smart card built with QR Code, NFC, and chip technology.
                    @endif
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('public.status-check') }}" class="bg-white text-green-700 px-6 py-3 rounded-lg font-semibold hover:bg-green-50 transition">{{ __('Check Status') }}</a>
                    <a href="{{ route('public.features') }}" class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white/10 transition">{{ __('Features') }}</a>
                </div>
            </div>
            <div class="hidden md:flex justify-center">
                <div class="bg-white/10 backdrop-blur rounded-2xl p-8 w-80">
                    <div class="bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl p-6 shadow-2xl">
                        <div class="flex justify-between items-start mb-8">
                            <div>
                                <p class="text-xs opacity-80">{{ __('Government of Bangladesh') }}</p>
                                <p class="font-bold text-sm">{{ __('Smart Family Card') }}</p>
                            </div>
                            <svg class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                        </div>
                        <div class="mb-4">
                            <p class="text-xs opacity-80">{{ __('Card Number') }}</p>
                            <p class="font-mono text-lg tracking-wider">FC-010100001-00001</p>
                        </div>
                        <div class="flex justify-between text-xs">
                            <div>
                                <p class="opacity-80">{{ __('Name') }}</p>
                                <p>রাহেলা বেগম</p>
                            </div>
                            <div class="flex space-x-2 items-center">
                                <span class="bg-white/20 px-2 py-0.5 rounded text-xs">QR</span>
                                <span class="bg-white/20 px-2 py-0.5 rounded text-xs">NFC</span>
                                <span class="bg-white/20 px-2 py-0.5 rounded text-xs">CHIP</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Stats Section --}}
<section class="py-12 -mt-8">
    <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-4">
            @php
                $stats = [
                    ['value' => '৪ কোটি', 'label' => app()->getLocale() === 'bn' ? 'লক্ষ্য পরিবার' : 'Target Families', 'icon' => 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z'],
                    ['value' => '৪০,০০০', 'label' => app()->getLocale() === 'bn' ? 'প্রথম পর্যায়' : 'First Phase', 'icon' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'],
                    ['value' => '৮', 'label' => app()->getLocale() === 'bn' ? 'বিভাগ' : 'Divisions', 'icon' => 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'],
                    ['value' => '৬৪', 'label' => app()->getLocale() === 'bn' ? 'জেলা' : 'Districts', 'icon' => 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'],
                ];
            @endphp
            @foreach($stats as $stat)
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 text-center">
                    <svg class="h-8 w-8 mx-auto text-green-600 dark:text-green-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $stat['icon'] }}" />
                    </svg>
                    <p class="text-2xl font-bold text-green-700 dark:text-green-400">{{ $stat['value'] }}</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ $stat['label'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Features Quick Overview --}}
<section class="py-16 bg-gray-50 dark:bg-gray-800/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center mb-12">{{ __('Features') }}</h2>
        <div class="grid md:grid-cols-3 gap-8">
            @php
                $features = [
                    ['title' => app()->getLocale() === 'bn' ? 'কিউআর কোড' : 'QR Code', 'desc' => app()->getLocale() === 'bn' ? 'দ্রুত স্ক্যানিং ও যাচাইয়ের জন্য প্রতিটি কার্ডে ইউনিক কিউআর কোড' : 'Unique QR code on each card for quick scanning and verification', 'color' => 'green'],
                    ['title' => app()->getLocale() === 'bn' ? 'এনএফসি প্রযুক্তি' : 'NFC Technology', 'desc' => app()->getLocale() === 'bn' ? 'স্পর্শহীন কন্ট্যাক্টলেস পেমেন্ট ও স্বীকৃতির জন্য এনএফসি চিপ' : 'NFC chip for contactless payment and recognition', 'color' => 'blue'],
                    ['title' => app()->getLocale() === 'bn' ? 'চিপ নিরাপত্তা' : 'Chip Security', 'desc' => app()->getLocale() === 'bn' ? 'উন্নত নিরাপত্তার জন্য এমবেডেড মাইক্রোচিপ' : 'Embedded microchip for enhanced data security', 'color' => 'purple'],
                ];
            @endphp
            @foreach($features as $feature)
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition">
                    <div class="w-12 h-12 bg-{{ $feature['color'] }}-100 dark:bg-{{ $feature['color'] }}-900/30 rounded-lg flex items-center justify-center mb-4">
                        <svg class="h-6 w-6 text-{{ $feature['color'] }}-600 dark:text-{{ $feature['color'] }}-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                    </div>
                    <h3 class="font-bold text-lg mb-2">{{ $feature['title'] }}</h3>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">{{ $feature['desc'] }}</p>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-8">
            <a href="{{ route('public.features') }}" class="text-green-600 dark:text-green-400 font-semibold hover:underline">{{ __('Features') }} →</a>
        </div>
    </div>
</section>

{{-- Self Service Section --}}
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center mb-12">
            @if(app()->getLocale() === 'bn') সেবা সমূহ @else Self Services @endif
        </h2>
        <div class="grid md:grid-cols-4 gap-6">
            @php
                $services = [
                    ['route' => 'public.status-check', 'title' => __('Check Status'), 'desc' => app()->getLocale() === 'bn' ? 'জাতীয় পরিচয়পত্র নম্বর দিয়ে আবেদনের অবস্থা যাচাই' : 'Check application status with NID number', 'icon' => 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'],
                    ['route' => 'public.verify-card', 'title' => __('Verify Card'), 'desc' => app()->getLocale() === 'bn' ? 'কার্ড নম্বর দিয়ে কার্ডের সত্যতা যাচাই' : 'Verify card authenticity with card number', 'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['route' => 'public.grievance.submit', 'title' => __('Submit Grievance'), 'desc' => app()->getLocale() === 'bn' ? 'অভিযোগ বা সমস্যা জানান' : 'Report a complaint or issue', 'icon' => 'M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z'],
                    ['route' => 'public.grievance.track', 'title' => __('Track Grievance'), 'desc' => app()->getLocale() === 'bn' ? 'ট্র্যাকিং নম্বর দিয়ে অভিযোগের অবস্থা দেখুন' : 'Track grievance status with tracking number', 'icon' => 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'],
                ];
            @endphp
            @foreach($services as $service)
                <a href="{{ route($service['route']) }}" class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition group">
                    <svg class="h-10 w-10 text-green-600 dark:text-green-400 mb-4 group-hover:scale-110 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $service['icon'] }}" />
                    </svg>
                    <h3 class="font-bold mb-2">{{ $service['title'] }}</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ $service['desc'] }}</p>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endsection