<?php include 'includes/header.php'; ?>

<!-- Donate Hero -->
<section class="internal-hero" style="background-image: linear-gradient(rgba(31, 134, 147, 0.6), rgba(31, 134, 147, 0.9)), url('home banner image.webp');">
    <div class="container py-5 text-center">
        <h1 class="display-3 fw-bold mb-3 text-white">Support Our Mission</h1>
        <p class="lead opacity-95 max-w-2xl mx-auto text-white">Your generosity fuels our impact. Join us in making a difference for families in need.</p>
    </div>
</section>

<!-- Donation Cards -->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="text-center mb-5">
            <span class="text-orange fw-bold small text-uppercase tracking-wider">MAKE A CONTRIBUTION</span>
            <h2 class="display-5 fw-bold mt-2">Donation Tiers</h2>
            <p class="text-muted max-w-2xl mx-auto">Every contribution, no matter the size, helps us reach our goals and support those who need it most.</p>
        </div>

        <div class="row g-4 justify-content-center">
            <!-- Tier 1 -->
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden text-center">
                    <div class="card-body p-5">
                        <div class="mb-4">
                            <span class="display-4 fw-bold text-teal">£10</span>
                        </div>
                        <h5 class="fw-bold mb-3">Community Support</h5>
                        <p class="text-muted mb-4">Can provide a warm meal and immediate support for a family in need within our community.</p>
                        <a href="contact.php" class="btn btn-primary w-100 py-3 fw-bold rounded-pill">Contact for Donation <i class="fas fa-envelope ms-2"></i></a>
                    </div>
                </div>
            </div>

            <!-- Tier 2 - Featured -->
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-lg rounded-4 overflow-hidden text-center position-relative" style="border: 2px solid #f16522 !important;">
                    <div class="position-absolute top-0 start-50 translate-middle-x bg-orange text-white px-3 py-1 rounded-bottom-4 small fw-bold" style="background-color: #f16522;">MOST POPULAR</div>
                    <div class="card-body p-5">
                        <div class="mb-4 mt-2">
                            <span class="display-4 fw-bold text-teal">£50</span>
                        </div>
                        <h5 class="fw-bold mb-3">Empowerment Fund</h5>
                        <p class="text-muted mb-4">Helps fund community education, youth empowerment projects, and long-term skill building.</p>
                        <a href="contact.php" class="btn btn-primary w-100 py-3 fw-bold rounded-pill">Contact for Donation <i class="fas fa-envelope ms-2"></i></a>
                    </div>
                </div>
            </div>

            <!-- Tier 3 -->
            <div class="col-xl-4 col-lg-4 col-md-6">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden text-center">
                    <div class="card-body p-5">
                        <div class="mb-4">
                            <span class="display-4 fw-bold text-teal">£100</span>
                        </div>
                        <h5 class="fw-bold mb-3">Global Impact</h5>
                        <p class="text-muted mb-4">Contributes significantly to international development projects and emergency relief efforts.</p>
                        <a href="contact.php" class="btn btn-primary w-100 py-3 fw-bold rounded-pill">Contact for Donation <i class="fas fa-envelope ms-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Impact Section -->
<section class="py-5 bg-light">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="text-teal fw-bold small text-uppercase tracking-wider">YOUR IMPACT</span>
                <h2 class="display-5 fw-bold mt-2 mb-4">Where Your Money Goes</h2>
                <p class="text-muted mb-4">Transparency is at the heart of everything we do. 100% of your public donations go directly towards our charitable projects.</p>
                
                <div class="row g-4 mt-2">
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-3">
                            <div class="bg-white p-3 rounded-3 shadow-sm text-teal">
                                <i class="fas fa-hand-holding-heart fa-2x"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Direct Aid</h6>
                                <p class="text-sm text-muted mb-0">Food, water, and shelter for those in crisis.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-3">
                            <div class="bg-white p-3 rounded-3 shadow-sm text-teal">
                                <i class="fas fa-graduation-cap fa-2x"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Education</h6>
                                <p class="text-sm text-muted mb-0">Scholarships and school supplies for children.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="rounded-4 overflow-hidden shadow">
                    <img src="Upazilla No-Ka Bais event picture.webp" class="img-fluid" alt="Charity Impact">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 position-relative overflow-hidden" style="background-image: url('greenbackgorund.webp'); background-size: cover; background-position: center;">
    <div class="container py-5 text-center position-relative z-1">
        <h2 class="display-4 fw-bold text-white mb-3">Sponsor a Team?</h2>
        <p class="text-white opacity-90 mb-5 max-w-2xl mx-auto fs-5">Increase your impact by sponsoring one of our racing teams or event activities. Get in touch for corporate partnership opportunities.</p>
        
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <a href="contact.php" class="btn btn-outline-light px-5 py-3 rounded-pill fw-bold"><i class="fas fa-handshake me-2"></i> Partner With Us</a>
        </div>
    </div>
</section>

<?php include 'includes/footer.php'; ?>
