@extends('layouts.app')

@section('title', 'Save the Helpless - Home')
@section('description', 'Save the Helpless mobilizes donations for street children, blood donors, orphanages, and helpless families in Bangladesh. Join us in building hope.')

@push('styles')
    <style>
        .project-card {
            min-height: 310px;
        }

        .stat-card {
            border-left: 4px solid #0d6efd;
        }

        .testimonial {
            background: #0d6efd10;
            border-radius: 1rem;
            padding: 1.5rem;
        }

        @media (max-width: 768px) {
            .hero {
                padding: 3rem 0;
            }
        }
    </style>
@endpush

@section('content')
    <section class="hero text-white text-center">
        <div class="container">
            <h1 class="display-5 fw-bold">Save the Helpless</h1>
            <p class="lead mb-4">Donate quickly to empower street children, support orphanages, back blood drives, and protect helpless families.</p>
            <a href="{{ route('donations') }}" class="btn btn-light btn-lg me-2">Donate Now</a>
            <a href="{{ route('volunteer') }}" class="btn btn-outline-light btn-lg">Join as Volunteer</a>
        </div>
    </section>

    <section class="py-5">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2>About Save the Helpless</h2>
                <p>We are a volunteer-led initiative operating from Mirpur, Dhaka, committed to providing food, shelter, education, and medical help where it is needed most. Our mission is to stand beside the marginalized and give them a reason to dream again.</p>
                <a href="{{ route('contact') }}" class="btn btn-primary me-2">Contact Us</a>
                <a href="{{ route('donations') }}" class="btn btn-outline-primary">Donate Now</a>
            </div>
            <div class="col-lg-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5>Why Donate?</h5>
                        <ul class="list-unstyled mb-0">
                            <li>✔ Transparent fund allocation</li>
                            <li>✔ Rapid response to emergency needs</li>
                            <li>✔ Empowerment through education & medical aid</li>
                            <li>✔ A community of long-term supporters</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2>Running Projects</h2>
                <p class="text-muted mb-0">Current drives that need your support.</p>
            </div>
            <a href="{{ route('donation-projects') }}" class="btn btn-primary">Donate to Projects</a>
        </div>
        <div class="row g-4">
            @foreach($projects as $project)
                <div class="col-md-4">
                    <div class="card project-card h-100 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <h5>{{ $project->title }}</h5>
                            <p class="flex-grow-1 text-muted">{{ \Illuminate\Support\Str::limit($project->description, 120) }}</p>
                            <div class="mb-2"><strong>Goal:</strong> ৳{{ number_format($project->goal_amount,2) }}</div>
                            <a href="{{ route('donations') }}" class="btn btn-sm btn-primary mt-auto">Donate Now</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="py-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Upcoming Events</h2>
            <a href="{{ route('events') }}" class="btn btn-outline-primary">See All Events</a>
        </div>
        <div class="row g-4">
            @foreach($featuredEvents as $event)
                <div class="col-md-4">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <h5>{{ $event->title }}</h5>
                            <p class="text-muted mb-1">{{ $event->event_date?->format('M d, Y') }} | {{ $event->location ?? 'Online' }}</p>
                            <p>{{ \Illuminate\Support\Str::limit($event->description, 140) }}</p>
                            <a href="{{ route('donations') }}" class="btn btn-sm btn-primary">Donate for Event</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="py-5 bg-light">
        <h2 class="mb-4">Donation Statistics</h2>
        <div class="row g-3">
            @foreach([
                ['label' => 'Total Donated (৳)', 'value' => number_format($stats['totalDonations'],2)],
                ['label' => 'Active Regular Pledges', 'value' => $stats['regularDonations']],
                ['label' => 'Upcoming Events', 'value' => $stats['events']],
                ['label' => 'Volunteers', 'value' => $stats['volunteers']],
            ] as $stat)
                <div class="col-md-3">
                    <div class="card stat-card shadow-sm h-100">
                        <div class="card-body text-center">
                            <h6 class="text-uppercase text-muted">{{ $stat['label'] }}</h6>
                            <h3 class="fw-bold">{{ $stat['value'] }}</h3>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="py-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Latest Gallery</h2>
            <a href="{{ route('gallery') }}" class="btn btn-outline-primary">View Gallery</a>
        </div>
        <div class="row g-3">
            @foreach($latestGallery as $gallery)
                <div class="col-sm-6 col-lg-3">
                    <div class="card h-100">
                        <img src="{{ $gallery->image_url }}" alt="{{ $gallery->title }}" class="card-img-top">
                        <div class="card-body">
                            <h6>{{ $gallery->title }}</h6>
                            <p class="small text-muted">{{ $gallery->type }}</p>
                            <a href="{{ route('donations') }}" class="btn btn-sm btn-primary">Donate</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="py-5 bg-light">
        <h2 class="mb-4">Testimonials</h2>
        <div class="row g-4">
            @foreach($testimonials as $item)
                <div class="col-md-4">
                    <div class="testimonial h-100">
                        <p>"{{ $item['quote'] }}"</p>
                        <p class="fw-bold mb-0">{{ $item['name'] }}</p>
                        <small class="text-muted">{{ $item['role'] }}</small>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection