@extends('layouts.app')

@section('title', 'The Mikey Network - Saving Lives Through Heart Health Education')

@section('meta_description', 'The Mikey Network is dedicated to saving lives through heart health education, AED placement, and community support. Join us in our mission to create heart-safe communities.')

@section('content')
 <!-- Hero Banner -->
    <div class="hero-carousel carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item position-relative active">
                {{--<img src="./images/banner.jpg" class="w-100 h-100 object-fit-cover" alt="Banner 1">--}}
                <video src="https://player.vimeo.com/progressive_redirect/playback/1096022233/rendition/1080p/file.mp4?loc=external&signature=0e263459838ee9a42d59bdd60c0adfa5ad44664f7e2df23acfe9c1758f606b0d" class="w-100 h-100 object-fit-cover" autoplay muted loop></video>
                <div class="carousel-overlay"></div>
                <div class=" h-100">
                    <div class="hero-content">
                        <h1>When you need it most.</h1>
                        <h2>MIKEY IS HERE</h2>
                    </div>
                    <div class="hero-card">
                        <h6>CREATE A FUND IN HONOUR/MEMORY OF </h6>
                        <h3 class="mb-0">SOMEONE YOU LOVE</h3> 
                        <p class="mb-3">Get started with your own fund</p>
                        <button class="btn btn-mikey rounded-0 btn-sm">LEARN MORE</button>
                    </div>
                </div>
            </div>
            <div class="carousel-item position-relative">
                <img src="./images/banner-1.jpg" class="w-100 h-100 object-fit-cover" alt="Banner 2">
                <div class="carousel-overlay"></div>
                <div class=" h-100">
                    <div class="hero-content">
                        <h1>When you need it most.</h1>
                        <h2>MIKEY IS HERE</h2>
                    </div>
                    <div class="hero-card">
                        <h6 class="mb-2">CREATE A FUND IN HONOUR/MEMORY OF </h6>
                        <h3 class="mb-0">SOMEONE YOU LOVE</h3>
                        <p class="mb-3">Get started with your own fund</p> 
                        <button class="btn btn-mikey rounded-0 btn-sm">LEARN MORE</button>
                    </div>
                </div>
            </div>
            <div class="carousel-item position-relative">
                <img src="./images/banner-2.jpg" class="w-100 h-100 object-fit-cover" alt="Banner 3">
                <div class="carousel-overlay"></div>
                <div class=" h-100">
                    <div class="hero-content">
                        <h1>When you need it most.</h1>
                        <h2>MIKEY IS HERE</h2>
                    </div>
                    <div class="hero-card">
                        <h6 class="mb-2">CREATE A FUND IN HONOUR/MEMORY OF </h6>
                        <h3 class="mb-0">SOMEONE YOU LOVE</h3> 
                         <p class="mb-3">Get started with your own fund</p>
                        <button class="btn btn-mikey rounded-0 btn-sm">LEARN MORE</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-indicators">
            <button type="button" data-bs-target=".hero-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target=".hero-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target=".hero-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
    </div>

         <!-- Saved by a Mikey Section -->
    <!-- <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-7 px-0">
                    <img src="./images/feature-3.png" alt="Saved by a Mikey" class="img-fluid rounded-0">
                </div>
                <div class="col-md-5 bg-blue-light">
                    <div class="hero-cards px-3 pt-5 pb-3">
                        <h3 class="text-uppercase font-16 mt-5">When hearts stop beating,</h3>
                        <h2 class="section-title text-uppercase letter-space-1">MIKEYs save lives.</h2>
                        <p class="text-capitalize font=lato mb-md-5 mb-2 line-2">Young or old, it’s our hear t that keeps us
                            going. When that hear t suddenly stops or
                            skips a beat, the results can be life
                            threatening. But having a MIKEY close at
                            hand can make all the difference in the
                            world.
                            
                            Learn CPR and how to use an AED</p>

                            <div class="divider-bar w-100"></div>
                            <div class="row mt-3 align-items-center justify-content-between">
                                <div class="col-sm-6">
                                    <h5 class="text-uppercase">Educational </h5>
                        <button class="btn btn-mikey">LEARN MORE</button>
                                </div>
                                <div class="col-sm-6 d-flex justify-content-end">
                                    <img src="./images/mikey-young.png" alt="mikey-young" class="max-80 me-3 mb-md-0 img-fluid rounded-3" />
                                    <img src="./images/mikey-ae.png" alt="mikey-ae" class="max-80 img-fluid rounded-3" />
                                </div>
                            </div>
                            
                    </div>
                </div>
            </div>
        </div>
    </section> -->

     <section class="pt-5 pb-lg-4">
        <div class="container">
            <div class="row text-center">
                <div class="col-12 col-lg-8 offset-lg-2">
                    <p class="text-grey font-64 ubuntu-sans-400 mb-0">Through The Mikey Network,</p>
                    <p class="text-mikey-red font-64 ubuntu-sans-800 lh-1">The Beat Goes On</p>
                    <p class="pt-3 font-roboto-light font-18 letter-space-01 line-1-5">The Mikey Network is dedicated to creating public awareness and providing education about heart-healthy lifestyles, and to placing as many defibrillators as possible so those affected by Sudden Cardiac Arrest can have a second chance at life.</p>
                </div>
               
            </div>
        </div>
    </section>
    <section class="">
        <div class="container bg-safety-everyone">
            <div class="row w-100">
                <div class="col-8 offset-4 col-md-7 offset-md-5 col-lg-6 offset-lg-6 col-xxl-5 offset-xxl-6">
                    <img src="images/mikey-on-site.png" class="img-fluid mx-auto text-center d-block"/>
                        <h2 class="ubuntu-sans-400 font-38 text-grey pt-4">For the <span class="text-red">Safety</span> of Everyone  </h2>
                        <p class="font-18 font-roboto-light letter-space-01 line-1-5">At construction sites, safety is paramount—and with a MIKEY defibrillator on-site, everyone gains a powerful tool that can increase a person’s chance of survival by up to 50%. </p>
                        <p class="font-18 font-roboto-light letter-space-01 line-1-5 pt-xxl-3 pb-xxl-3">Hundreds of lives are saved each year through public access defibrillation, and the change is happening— we’re committed to seeing those numbers grow even higher.</p>
                        <button class="btn btn-mikey rounded-0">READ MORE</button>
                </div>
              
            </div>
        </div>
    </section>
    <section class="py-5">
        <div class="container bg-beige">
            <div class="row p-lg-5 p-4">
                <div class="col-12 col-lg-9">
                    <p class="text-grey font-52 ubuntu-sans-700 text-capitalize line-1-2 mb-4">Learn how to perform CPR and operate an AED </p>
                    <div class="row">
                        <div class="col-12 col-lg-5 border-right-red">
                            <p class="font-20 font-roboto-light letter-space-01 pe-lg-5"><b class="font-roboto-bold">Meet Kaley</b>, who at 19 years old saved a life using the information she learned by going through the Mikey Young At Heart Program.</p>
                            <img src="images/cpr-video-2.png" class="img-fluid"/>
                        </div>
                        <div class="col-12 col-lg-7 font-20 font-roboto-light letter-space-01 ps-lg-5">
                            <p>Performing CPR and operating an AED can be intimidating at first.  The Mikey Network has all of the educational information required for you to feel confident.</p>
                            <p>With the Mikey Young At Heart Program, high school students can earn volunteer hours by completing a couple of short, educational videos and quizzes.<br/><a href="/" class="text-underline font-roboto-semibold letter-space-01 text-black">Click here to learn more.</a></p>
                            <p>If you are not a student and would like to learn how to perform CPR and operate an AED <a href="/" class="text-underline font-roboto-semibold letter-space-01 text-black">click here.</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3">
                   <img src="images/cpr-video.png" class="img-fluid"/><br/>
                   <img src="images/mikey-young-s.png" class="img-fluid float-lg-end mt-3"/>
                </div>
            </div>
        </div>
    </section>
    <!-- Emergency Signs Section -->
    <section class="emergency-signs">
        <div class="container red-dark p-md-5 p-3">
            <div class="row">
                <div class="col-lg-5">
                    <h2 class="section-title">Emergency signs</h2>
                    <p class="font-roboto-light font-18 letter-space-01 line-1-5">Emergency signs of cardiac arrest include sudden collapse, loss of consciousness, and unresponsiveness. Additionally, a person may experience ineffective breathing or gasping for air, and may have no pulse.</p>
                    <button class="btn text-white rounded-0 border-white btn-outline-primary mt-3 px-4 letter-space-02 font-roboto-bold">LEARN MORE</button>
                </div>
                <div class="col-lg-7 align-self-center pt-md-0 pt-5">
                    <img src="./images/heart.png" alt="Emergency Signs" class="w-100 img-fluid">
                </div>
            </div>
        </div>
    </section>

    <!-- Make a Difference Section -->
    <section class="difference-section py-5">
        <div class="container">
            <div class="row">
              
                <div class="col-lg-5 px-0">
                    <div id="makeADifferenceCarousel" class="carousel slide content-carousel add-arrow bg-grey" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item text-white active">
                                <div class="content-slide">
                                    <h2 class="title">Mikey’s make a difference.</h2>
                                    <div class="icon">
                                        <img src="images/family-icon.png" alt="Family Icon" >
                                    </div>
                                    <div class="number">684</div>
                                    <p class="description">Numbers of Kids families <br/>with a Mikey</p>
                                </div>
                            </div>
                             <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Mikey’s make a difference.</h2>
                                    <div class="icon">
                                        <img src="images/uni-icon.png" alt="Family Icon" >
                                    </div>
                                    <div class="number">587</div>
                                    <p class="description">Number of schools<br/>with Mikey’s</p>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Mikey’s make a difference.</h2>
                                    <div class="icon">
                                        <img src="images/cpr-icon.png" alt="Family Icon" >
                                    </div>
                                    <div class="number">13,400</div>
                                    <p class="description">People trained <br/>on CPR/AED</p>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Mikey’s make a difference.</h2>
                                    <div class="icon">
                                        <img src="images/aed-icon.png" alt="Family Icon" >
                                    </div>
                                    <div class="number">3,225</div>
                                    <p class="description">Mikey’s/AED placed.</p>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Mikey’s make a difference.</h2>
                                    <div class="icon">
                                        <img src="images/team-icon.png" alt="Family Icon" >
                                    </div>
                                    <div class="number">44</div>
                                    <p class="description">People saved by Mikey!</p>
                                </div>
                            </div> 
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#makeADifferenceCarousel" data-bs-slide="prev">
                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M20 0H0v20h20zm-7.354 14.166-1.389 1.439-5.737-5.529 5.729-5.657 1.4 1.424-4.267 4.215z"/></svg>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#makeADifferenceCarousel" data-bs-slide="next">
                           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M20 0H0v20h20zM7.658 15.707l-1.414-1.414L10.537 10 6.244 5.707l1.414-1.414L13.365 10z"/></svg>
                        </button>
                        <div class="carousel-indicators squer-box">
                            <button type="button" data-bs-target="#makeADifferenceCarousel" data-bs-slide-to="0" class="active"></button>
                            <button type="button" data-bs-target="#makeADifferenceCarousel" data-bs-slide-to="1"></button>
                            <button type="button" data-bs-target="#makeADifferenceCarousel" data-bs-slide-to="2"></button>
                            <button type="button" data-bs-target="#makeADifferenceCarousel" data-bs-slide-to="3"></button>
                            <button type="button" data-bs-target="#makeADifferenceCarousel" data-bs-slide-to="4"></button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 px-0">
                    <div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="./images/difference-slider-1.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/difference-slider-2.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/difference-slider-3.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/difference-slider-4.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/difference-slider-5.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Saved by a Mikey Section -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 px-0">
                    <div id="imageCarousel2" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="./images/saved-by-mikey-1.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/saved-by-mikey-2.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/saved-by-mikey-3.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/saved-by-mikey-4.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/saved-by-mikey-5.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <!-- <div class="carousel-item">
                                <img src="./images/saved-by-mikey-6.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./images/saved-by-mikey-7.jpg" class="d-block w-100 img-fluid rounded" alt="">
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 bg-grey">
                    <div id="savedByMikeyCarousel" class="carousel slide content-carousel add-arrow" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item text-white active">
                                <div class="content-slide">
                                    <h2 class="title">Saved By a Mikey</h2>
                                    <p class="description1 px-lg-5">While nearing the finish of the Toronto Half Marathon, I collapsed. …  Two paramedics on bicycles arrived carrying a portable AED which had been provided by The Mikey Network...</p>
                                    <p class="description1 mb-0">Andrew Rosbrook</p>
                                    <p class="description1">Toronto Police Officer</p>
                                    <button class="btn btn-mikey rounded-0">READ MORE</button>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Saved By a Mikey</h2>
                                    <p class="description1 px-lg-5">My gym teacher saved my life! I really need to thank him for that. Now knowing I almost died, I’m going to try to live life even fuller.</p>
                                    <p class="description1 mb-0" style="font-weight:700">Ajethan Ramachandranathan</p>
                                    <p class="description1">High School Student Saved by A MIKEY</p>
                                    <button class="btn btn-mikey rounded-0">READ MORE</button>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Saved By a Mikey</h2>
                                    <p class="description1 px-lg-5">The [defibrillator] provided by The Mikey Network saved our baby son Archer along with CPR and rescue breaths on the side of the road.</p>
                                    <p class="description1 mb-0" style="font-weight:700">Sean Hackett</p>
                                    <p class="description1">Father of a Mikey’s Kids family</p>
                                    <button class="btn btn-mikey rounded-0">READ MORE</button>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Saved By a Mikey</h2>
                                    <p class="description1 px-lg-5">The Mikey Network is our trusted partner in caring for patients with heart rhythm disorders. The Mikey Team understands the needs of the family and of the medical team...</p>
                                    <p class="description1 mb-0" style="font-weight:700">Joel A. Kirsh, MD, FRCP(c)</p>
                                    <p class="description1">Cardiology & Critical Care, SickKids</p>
                                    <button class="btn btn-mikey rounded-0">READ MORE</button>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">Saved By a Mikey</h2>
                                    <p class="description1 px-lg-5">On behalf of the Toronto District School Board I want to express our sincere appreciation to The Mikey Network for your generous donation...</p>
                                    <p class="description1 mb-0" style="font-weight:700">Penny Mustin Employee</p>
                                    <p class="description1">Services, Toronto District School Board</p>
                                    <button class="btn btn-mikey rounded-0">READ MORE</button>
                                </div>
                            </div>                      
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#savedByMikeyCarousel" data-bs-slide="prev">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M20 0H0v20h20zm-7.354 14.166-1.389 1.439-5.737-5.529 5.729-5.657 1.4 1.424-4.267 4.215z"/></svg>
                          </button>
                          <button class="carousel-control-next" type="button" data-bs-target="#savedByMikeyCarousel" data-bs-slide="next">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M20 0H0v20h20zM7.658 15.707l-1.414-1.414L10.537 10 6.244 5.707l1.414-1.414L13.365 10z"/></svg>
                          </button>
                        <!-- <div class="carousel-indicators">
                            <button type="button" data-bs-target="#savedByMikeyCarousel" data-bs-slide-to="0" class="active"></button>
                            <button type="button" data-bs-target="#savedByMikeyCarousel" data-bs-slide-to="1"></button>
                            <button type="button" data-bs-target="#savedByMikeyCarousel" data-bs-slide-to="2"></button>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Get Involved Section -->
    <section class="invalved-section">
        <div class="container bg-invalved">
            <div class="row w-100">
                <div class="col-5 offset-7 col-md-4 offset-md-8 font-lato px-0">
                        <h2 class="section-title">Create a Fund</h2>
                        <p class="font-18 font-roboto-light letter-space-01 line-1-5">We make it easy for you to create your own Mikey Network Fundraising page. With just a few clicks, you can ask friends and family to donate.</p>
                        <button class="btn btn-mikey rounded-0">LEARN MORE</button>
                </div>
              
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="py-5">
        <div class="container">
            <div class="row">
             
                <div class="col-lg-5 bg-grey">
                    <div id="blogCarousel" class="carousel slide content-carousel add-arrow" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item text-white active">
                                <div class="content-slide px-lg-5">
                                    <h2 class="title">BLOG</h2>
                                    <h4 class="font-18 font-roboto-light letter-space-01 line-1-5">Here are some fun exercises
                                        you can do as a family
                                        </h4>
                                    <p class="font-18 font-roboto-light letter-space-01 line-1-5 pb-5">When thinking of the term
                                        “exercising” we often think of
                                        team sports, or something that
                                        we can do as an individual, like
                                        running. The thought of ‘family ’
                                        doesn’t really come to mind,
                                        but often our families are
                                        where we first learned the...</p>
                                    <button class="btn btn-mikey btn-sm rounded-0">READ MORE</button>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">COMMUNITY EVENTS</h2>
                                    <p class="font-18 font-roboto-light letter-space-01 line-1-5 pb-5">Join us for CPR training workshops this summer</p>
                                    <button class="btn btn-mikey rounded-0">LEARN MORE</button>
                                </div>
                            </div>
                            <div class="carousel-item text-white">
                                <div class="content-slide">
                                    <h2 class="title">SUCCESS STORIES</h2>
                                    <p class="font-18 font-roboto-light letter-space-01 line-1-5 pb-5">Meet the families whose lives have been touched by MIKEY</p>
                                    <button class="btn btn-mikey rounded-0">READ MORE</button>
                                </div>
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#blogCarousel" data-bs-slide="prev">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M20 0H0v20h20zm-7.354 14.166-1.389 1.439-5.737-5.529 5.729-5.657 1.4 1.424-4.267 4.215z"/></svg>
                          </button>
                          <button class="carousel-control-next" type="button" data-bs-target="#blogCarousel" data-bs-slide="next">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M20 0H0v20h20zM7.658 15.707l-1.414-1.414L10.537 10 6.244 5.707l1.414-1.414L13.365 10z"/></svg>
                          </button>
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#blogCarousel" data-bs-slide-to="0" class="active"></button>
                            <button type="button" data-bs-target="#blogCarousel" data-bs-slide-to="1"></button>
                            <button type="button" data-bs-target="#blogCarousel" data-bs-slide-to="2"></button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 p-0">
                    <img src="images/group.jpg" alt="Blog" class="img-fluid rounded-0">
                </div>
            </div>
        </div>
    </section>
    <script>
  // === First Carousel Pair ===
  const nextBtn1 = document.querySelector('#makeADifferenceCarousel .carousel-control-next');
  const prevBtn1 = document.querySelector('#makeADifferenceCarousel .carousel-control-prev');
  const contentCarousel1 = document.querySelector('#makeADifferenceCarousel');
  const imageCarousel1 = document.querySelector('#imageCarousel');

  nextBtn1.addEventListener('click', () => {
    const bsCarousel1 = bootstrap.Carousel.getInstance(imageCarousel1);
    bsCarousel1.next();
  });

  prevBtn1.addEventListener('click', () => {
    const bsCarousel1 = bootstrap.Carousel.getInstance(imageCarousel1);
    bsCarousel1.prev();
  });

  // === Second Carousel Pair ===
  const nextBtn2 = document.querySelector('#savedByMikeyCarousel .carousel-control-next');
  const prevBtn2 = document.querySelector('#savedByMikeyCarousel .carousel-control-prev');
  const contentCarousel2 = document.querySelector('#savedByMikeyCarousel');
  const imageCarousel2 = document.querySelector('#imageCarousel2');

  nextBtn2.addEventListener('click', () => {
    const bsCarousel2 = bootstrap.Carousel.getInstance(imageCarousel2);
    bsCarousel2.next();
  });

  prevBtn2.addEventListener('click', () => {
    const bsCarousel2 = bootstrap.Carousel.getInstance(imageCarousel2);
    bsCarousel2.prev();
  });
</script>


@endsection