@extends('layouts.app')

@section('title', 'Home')
@section('description', 'Transform Corporate Social Responsibility from one-off sponsorships into year-round engagement with measurable impact.')

@section('content')
    <!-- Hero Section -->
    <section class="hero-gradient text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="text-center">
                <h1 class="text-4xl md:text-6xl font-bold mb-6">
                    Nigeria's <span class="text-yellow-300">CSR Co-Pilot</span>
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-gray-100 max-w-3xl mx-auto">
                    Transform Corporate Social Responsibility from one-off sponsorships into year-round engagement with measurable impact.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('projects.index') }}" class="bg-white text-csr-blue px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                        Browse Projects
                    </a>
                    <a href="{{ route('register') }}" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-csr-blue transition-colors">
                        Get Started
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
                <div>
                    <div class="text-3xl font-bold text-csr-blue mb-2">₦50M+</div>
                    <div class="text-gray-600">Total Funding Raised</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-csr-green mb-2">150+</div>
                    <div class="text-gray-600">Projects Funded</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-csr-blue mb-2">25+</div>
                    <div class="text-gray-600">Corporate Partners</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-csr-green mb-2">10K+</div>
                    <div class="text-gray-600">Lives Impacted</div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="bg-gray-50 py-16">
        <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 font-bold text-gray-900 mb-4">How CSRise Works</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                    Connect corporations with youth-led initiatives aligned with Sustainable Development Goals
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-lg shadow-sm card-hover">
                    <div class="w-12 h-12 bg-csr-blue rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-lightbulb text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">1. Submit Projects</h3>
                    <p class="text-gray-600">
                        Youth-led initiatives submit their projects with detailed descriptions, budgets, and impact metrics.
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-lg shadow-sm card-hover">
                    <div class="w-12 h-12 bg-csr-green rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-handshake text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">2. Get Funded</h3>
                    <p class="text-gray-600">
                        Corporations browse and fund projects that align with their CSR goals and values.
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-lg shadow-sm card-hover">
                    <div class="w-12 h-12 bg-csr-blue rounded-lg flex items-center justify-center mb-6">
                        <i class="fas fa-chart-line text-white text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4">3. Measure Impact</h3>
                    <p class="text-gray-600">
                        Track progress, generate reports, and measure real impact with our comprehensive tools.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Projects -->
    <section class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center mb-8">
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">Featured Projects</h2>
                    <p class="text-gray-600">Discover impactful initiatives making a difference</p>
                </div>
                <a href="{{ route('projects.index') }}" class="text-csr-blue hover:text-blue-600 font-semibold">
                    View All Projects →
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Project Card 1 -->
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden card-hover">
                    <div class="h-48 bg-gradient-to-br from-green-400 to-blue-500 relative">
                        <div class="absolute top-4 right-4 bg-white px-2 py-1 rounded text-sm font-semibold text-csr-green">
                            Featured
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">SDG 4</span>
                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded ml-2">Education</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Digital Literacy for Rural Schools</h3>
                        <p class="text-gray-600 mb-4">
                            Providing computer training and digital skills to students in rural communities across Nigeria.
                        </p>
                        <div class="mb-4">
                            <div class="flex justify-between text-sm mb-1">
                                <span>₦2.5M raised</span>
                                <span>75%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-csr-green h-2 rounded-full" style="width: 75%"></div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Lagos, Nigeria</span>
                            <a href="#" class="text-csr-blue hover:text-blue-600 font-semibold">Learn More →</a>
                        </div>
                    </div>
                </div>

                <!-- Project Card 2 -->
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden card-hover">
                    <div class="h-48 bg-gradient-to-br from-yellow-400 to-orange-500 relative">
                        <div class="absolute top-4 right-4 bg-white px-2 py-1 rounded text-sm font-semibold text-csr-green">
                            Trending
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">SDG 2</span>
                            <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded ml-2">Agriculture</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Sustainable Farming Initiative</h3>
                        <p class="text-gray-600 mb-4">
                            Empowering farmers with modern agricultural techniques and sustainable farming practices.
                        </p>
                        <div class="mb-4">
                            <div class="flex justify-between text-sm mb-1">
                                <span>₦1.8M raised</span>
                                <span>60%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-csr-green h-2 rounded-full" style="width: 60%"></div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Kano, Nigeria</span>
                            <a href="#" class="text-csr-blue hover:text-blue-600 font-semibold">Learn More →</a>
                        </div>
                    </div>
                </div>

                <!-- Project Card 3 -->
                <div class="bg-white border border-gray-200 rounded-lg overflow-hidden card-hover">
                    <div class="h-48 bg-gradient-to-br from-purple-400 to-pink-500 relative">
                        <div class="absolute top-4 right-4 bg-white px-2 py-1 rounded text-sm font-semibold text-csr-green">
                            New
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">SDG 3</span>
                            <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded ml-2">Healthcare</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Community Health Outreach</h3>
                        <p class="text-gray-600 mb-4">
                            Providing free health screenings and medical care to underserved communities.
                        </p>
                        <div class="mb-4">
                            <div class="flex justify-between text-sm mb-1">
                                <span>₦3.2M raised</span>
                                <span>90%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-csr-green h-2 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Port Harcourt, Nigeria</span>
                            <a href="#" class="text-csr-blue hover:text-blue-600 font-semibold">Learn More →</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="bg-csr-dark text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold mb-4">Ready to Make an Impact?</h2>
            <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                Join thousands of corporations and youth initiatives creating positive change across Nigeria.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('register') }}?role=corporate" class="bg-csr-blue text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
                    Join as Corporate
                </a>
                <a href="{{ route('register') }}?role=project_owner" class="bg-csr-green text-white px-8 py-4 rounded-lg font-semibold hover:bg-green-600 transition-colors">
                    Submit Project
                </a>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="bg-gray-50 py-16">
        <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 font-bold text-gray-900 mb-4">What Our Partners Say</h2>
                <p class="text-xl text-gray-600">Success stories from our community</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-lg shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-csr-blue rounded-full flex items-center justify-center">
                            <span class="text-white font-semibold">JD</span>
                        </div>
                        <div class="ml-4">
                            <h4 class="font-semibold">John Doe</h4>
                            <p class="text-gray-600 text-sm">CEO, TechCorp Nigeria</p>
                        </div>
                    </div>
                    <p class="text-gray-600">
                        "CSRise has transformed how we approach corporate social responsibility. The transparency and impact measurement tools are game-changing."
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-lg shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-csr-green rounded-full flex items-center justify-center">
                            <span class="text-white font-semibold">SJ</span>
                        </div>
                        <div class="ml-4">
                            <h4 class="font-semibold">Sarah Johnson</h4>
                            <p class="text-gray-600 text-sm">Project Lead, Youth Initiative</p>
                        </div>
                    </div>
                    <p class="text-gray-600">
                        "Thanks to CSRise, we've been able to secure funding and scale our educational programs to reach more communities."
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-lg shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-csr-blue rounded-full flex items-center justify-center">
                            <span class="text-white font-semibold">MK</span>
                        </div>
                        <div class="ml-4">
                            <h4 class="font-semibold">Michael Kalu</h4>
                            <p class="text-gray-600 text-sm">CSR Manager, BankCorp</p>
                        </div>
                    </div>
                    <p class="text-gray-600">
                        "The platform makes it easy to find and fund projects that align with our sustainability goals. Highly recommended!"
                    </p>
                </div>
            </div>
        </div>
    </section>
@endsection