@extends('layouts.app')

@section('title', 'Mikey Kids Partner - Mikey Network')

@section('meta_description', 'Partner with The Mikey Network to support our Mikey Kids program and help protect children at risk of cardiac emergencies.')

@section('content')
<div class="banner-container position-relative text-center text-white">
    <!-- Banner Image -->
    <img src="{{ asset('images/kids-partner-banner.jpg') }}" class="img-fluid w-100" alt="Mikey Kids Partner Banner">

    <!-- Title at Bottom of Banner -->
    <div class="position-absolute bottom-0 start-50 translate-middle-x mb-4">
        <h1 class="display-5 fw-bold text-uppercase">Mikey Kids Partner</h1>
    </div>
</div>

<div class="container my-5">
    <div class="row">
        <div class="col-md-12">
            <div class="intro-section mb-5">
                <h2>Partner With Us</h2>
                <p class="lead">Join The Mikey Network as a partner in our Mikey Kids program and help protect children at risk of cardiac emergencies.</p>
            </div>

            <div class="partnership-benefits">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Why Partner With Us</h3>
                                <ul>
                                    <li>Make a direct impact on children's lives</li>
                                    <li>Support heart health education</li>
                                    <li>Enhance community safety</li>
                                    <li>Build brand awareness</li>
                                    <li>Create meaningful partnerships</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Partnership Opportunities</h3>
                                <ul>
                                    <li>Corporate sponsorship</li>
                                    <li>Event partnerships</li>
                                    <li>Educational programs</li>
                                    <li>Community initiatives</li>
                                    <li>Fundraising support</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="partnership-levels mt-5">
                <h2>Partnership Levels</h2>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Bronze Partner</h3>
                                <ul>
                                    <li>Basic program support</li>
                                    <li>Logo placement</li>
                                    <li>Newsletter mention</li>
                                    <li>Social media recognition</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Silver Partner</h3>
                                <ul>
                                    <li>Enhanced program support</li>
                                    <li>Featured logo placement</li>
                                    <li>Event participation</li>
                                    <li>Press release inclusion</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Gold Partner</h3>
                                <ul>
                                    <li>Comprehensive support</li>
                                    <li>Premium logo placement</li>
                                    <li>Exclusive event access</li>
                                    <li>Media coverage</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="success-stories mt-5">
                <h2>Partner Success Stories</h2>
                <div class="row">
                    <div class="col-md-6">
                        <div class="story-card">
                            <h4>Corporate Impact</h4>
                            <p>"Our partnership with The Mikey Network has allowed us to make a real difference in our community. We're proud to support such an important cause."</p>
                            <p class="text-muted">- Corporate Partner</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="story-card">
                            <h4>Community Support</h4>
                            <p>"Working with The Mikey Network has helped us expand our community outreach and provide vital support to families in need."</p>
                            <p class="text-muted">- Community Organization</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="get-involved-section mt-5 text-center">
                <h2>Become a Partner</h2>
                <p>Join us in our mission to protect children at risk of cardiac emergencies.</p>
                <div class="mt-4">
                    <a href="/contact" class="btn btn-primary btn-lg me-3">Partner With Us</a>
                    <a href="/get-involved" class="btn btn-outline-primary btn-lg">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection