@extends('layouts.app')

@section('title', 'Prettyaraab Foundation - Islamic Charity & Humanitarian Aid in Nigeria')
@section('description', 'Prettyaraab Foundation is a leading Islamic charity organization in Nigeria providing food distribution, education support, shelter, and Zakat services to communities in need. Join us in serving humanity with compassion and Islamic values.')
@section('keywords', 'Islamic charity Nigeria, humanitarian aid, food distribution, education support, Zakat, Islamic foundation, charity organization, community development, poverty alleviation, orphan care, Nigeria NGO, Islamic values, compassionate giving, Muslim charity, halal charity')
@section('og_title', 'Prettyaraab Foundation - Islamic Charity & Humanitarian Aid in Nigeria')
@section('og_description', 'Leading Islamic charity in Nigeria providing food, education, shelter & Zakat services. Serving humanity with Islamic values and compassion.')
@section('twitter_title', 'Prettyaraab Foundation - Islamic Charity Nigeria')
@section('twitter_description', 'Islamic charity providing humanitarian aid, food distribution, education & Zakat services in Nigeria.')

@section('content')
<!-- Hero Section -->
<section class="relative bg-gradient-to-r from-primary-600 to-primary-800 text-white">
    <div class="absolute inset-0 bg-black opacity-20"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">
                {{ $heroTitle ?: 'Making a Difference Together' }}
            </h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
                {{ $heroSubtitle ?: 'Join us in creating positive change in communities around the world through sustainable development and impactful projects.' }}
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('projects.index') }}" class="bg-secondary-500 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-secondary-600 transition-colors">
                    View Projects
                </a>
                <a href="{{ route('contact') }}" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors">
                    Get Involved
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Introduction Section -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-4xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">About Our Foundation</h2>
            <p class="text-lg text-gray-600 leading-relaxed">
                {{ $introText ?: 'Our foundation is dedicated to creating lasting positive change in communities worldwide. Through innovative projects, sustainable development initiatives, and community partnerships, we work tirelessly to address critical needs and build a better future for all.' }}
            </p>
        </div>
    </div>
</section>

<!-- Impact Statistics Section -->
@php
    $impacts = \App\Models\Impact::active()->ordered()->get();
@endphp
@if($impacts->count() > 0)
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Impact</h2>
            <p class="text-lg text-gray-600">See the difference we're making in communities</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($impacts as $impact)
                <div class="bg-white rounded-lg shadow-lg p-6 text-center hover:shadow-xl transition-shadow">
                    <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="{{ $impact->icon }} text-primary-600 text-2xl"></i>
                    </div>
                    <div class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">{{ $impact->number }}</div>
                    <div class="text-lg font-semibold text-gray-700 mb-2">{{ $impact->unit }}</div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ $impact->title }}</h3>
                    <p class="text-gray-600 text-sm">{{ $impact->description }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Featured Projects Section -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Latest Projects</h2>
            <p class="text-lg text-gray-600">Discover our most recent initiatives making a difference</p>
        </div>

        @if($featuredProjects->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($featuredProjects as $project)
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                        @if($project->firstImage())
                            <img src="{{ asset('storage/' . $project->firstImage()->image_path) }}" 
                                 alt="{{ $project->title }}" 
                                 class="w-full h-48 object-cover">
                        @else
                            <div class="w-full h-48 bg-gray-200 flex items-center justify-center">
                                <i class="fas fa-image text-gray-400 text-4xl"></i>
                            </div>
                        @endif
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ $project->title }}</h3>
                            <p class="text-gray-600 mb-4">{{ Str::limit($project->description, 120) }}</p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ $project->project_date->format('M d, Y') }}</span>
                                <a href="{{ route('projects.show', $project) }}" 
                                   class="text-primary-600 hover:text-primary-800 font-semibold">
                                    Learn More →
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-12">
                <i class="fas fa-folder-open text-gray-400 text-6xl mb-4"></i>
                <p class="text-gray-600 text-lg">No featured projects available at the moment.</p>
            </div>
        @endif

        <div class="text-center mt-12">
            <a href="{{ route('projects.index') }}" 
               class="bg-primary-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-primary-700 transition-colors">
                View All Projects
            </a>
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section class="py-16 bg-primary-600 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Make a Difference?</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto">
            Join us in our mission of creating positive change in communities worldwide.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('projects.index') }}" class="bg-secondary-500 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-secondary-600 transition-colors">
                View Our Work
            </a>
            <a href="{{ route('contact') }}" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors">
                Get Involved
            </a>
        </div>
    </div>
</section>
@endsection