@extends('layouts.app')

@section('title', 'About Us - Prettyaraab Foundation | Islamic Charity Mission & Vision')
@section('description', 'Learn about Prettyaraab Foundation\'s mission to serve humanity through Islamic values. Discover our vision for community development, education support, and humanitarian aid in Nigeria.')
@section('keywords', 'about Prettyaraab Foundation, Islamic charity mission, humanitarian organization Nigeria, charity vision, community development, Islamic values, foundation history, charity goals, nonprofit mission')
@section('og_title', 'About Prettyaraab Foundation - Islamic Charity Mission & Vision')
@section('og_description', 'Discover our mission to serve humanity through Islamic values, providing education, food distribution, and community development in Nigeria.')
@section('twitter_title', 'About Prettyaraab Foundation - Islamic Charity Mission')
@section('twitter_description', 'Learn about our Islamic charity mission, vision for community development and humanitarian aid in Nigeria.')

@section('content')
<!-- Page Header -->
<section class="bg-gradient-to-r from-primary-600 to-primary-800 text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">About Our Foundation</h1>
            <p class="text-xl max-w-2xl mx-auto">
                Learn about our mission, vision, and the people behind our impactful work
            </p>
        </div>
    </div>
</section>

<!-- Mission, Vision, Goals Section -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Mission -->
            <div class="text-center">
                <div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-bullseye text-primary-600 text-2xl"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h2>
                <p class="text-gray-600 leading-relaxed">
                    {{ $mission ?: 'To create sustainable positive change in communities worldwide through innovative projects, education, and collaborative partnerships that address critical needs and empower local populations.' }}
                </p>
            </div>

            <!-- Vision -->
            <div class="text-center">
                <div class="bg-secondary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-eye text-secondary-600 text-2xl"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Our Vision</h2>
                <p class="text-gray-600 leading-relaxed">
                    {{ $vision ?: 'A world where every community has access to the resources, opportunities, and support needed to thrive, creating a more equitable and sustainable future for all.' }}
                </p>
            </div>

            <!-- Goals -->
            <div class="text-center">
                <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-flag text-green-600 text-2xl"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Our Goals</h2>
                <p class="text-gray-600 leading-relaxed">
                    {{ $goals ?: 'To implement sustainable development projects, provide educational opportunities, support community-led initiatives, and build lasting partnerships that create measurable positive impact in the lives of those we serve.' }}
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Founder 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">Meet Our Founder</h2>
            <p class="text-lg text-gray-600">The visionary behind our foundation's mission</p>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/3">
                        @if($founderImage)
                            <img src="{{ asset('storage/' . $founderImage) }}" 
                                 alt="{{ $founderName ?: 'Founder' }}" 
                                 class="w-full h-64 md:h-full object-cover">
                        @else
                            <div class="w-full h-64 md:h-full bg-gray-200 flex items-center justify-center">
                                <i class="fas fa-user text-gray-400 text-6xl"></i>
                            </div>
                        @endif
                    </div>
                    <div class="md:w-2/3 p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">
                            {{ $founderName ?: 'Foundation Founder' }}
                        </h3>
                        <p class="text-gray-600 leading-relaxed">
                            {{ $founderBio ?: 'Our founder brings years of experience in community development, social impact, and sustainable change. With a passion for creating meaningful differences in people\'s lives, they established this foundation to address critical needs and build stronger, more resilient communities worldwide.' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Impact Statistics -->
<section class="py-16 bg-primary-600 text-white">
    <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 mb-4">Our Impact</h2>
            <p class="text-xl">Making a difference, one project at a time</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="text-4xl md:text-5xl font-bold mb-2">50+</div>
                <div class="text-lg">Projects Completed</div>
            </div>
            <div class="text-center">
                <div class="text-4xl md:text-5xl font-bold mb-2">10K+</div>
                <div class="text-lg">Lives Impacted</div>
            </div>
            <div class="text-center">
                <div class="text-4xl md:text-5xl font-bold mb-2">25+</div>
                <div class="text-lg">Communities Served</div>
            </div>
            <div class="text-center">
                <div class="text-4xl md:text-5xl font-bold mb-2">5+</div>
                <div class="text-lg">Years of Service</div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-16 bg-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 text-gray-900 mb-6">Join Our Mission</h2>
        <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
            Together, we can create lasting change and build a better future for communities in need.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="#" class="bg-primary-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-primary-700 transition-colors">
                Support Our Work
            </a>
            <a href="{{ route('contact') }}" class="bg-transparent border-2 border-primary-600 text-primary-600 px-8 py-3 rounded-lg text-lg font-semibold hover:bg-primary-600 hover:text-white transition-colors">
                Get in Touch
            </a>
        </div>
    </div>
</section>
@endsection