@extends('layouts.main-app')

@section('content')

@section('meta_title', 'Prime Hospital and Medical Center')
@section('meta_description', 'Prime Hospital is a dynamic pillar of the community, delivering compassionate care and advanced medical expertise. With proactive innovation and modern practices, it provides exemplary, up-to-date care tailored to meet every patient’s needs')
@section('meta_keywords', '
    "Prime"
    "Hospital"
    "Compassionate"
    "Care"
    "Innovation"
    "Modern"
    "Exemplary"
    "Community"
    "Wellness"
    "Quality"
    "Expertise"
    "Dynamic"
    "Proactive"
    "Patients"
    "Advanced"
    "Relevant"
    "Excellence"
')


@include('layouts.navbar', [
        'headerTitle' => '<span class="text-bold"></span> <span class="text-[#0b5cb5] font-black">
            Your Health,</span> <br> <span class="text-bold">Our Prime Commitment</span>',
    'headerDescription' => "Compassionate care and advanced medical expertise for every step of your wellness journey",
    'isHomepage' => true  
])


<div class="swiper bannerSwiper">
    <div class="swiper-wrapper">
        @foreach($banners as $banner)
        <div class="swiper-slide">
            <img src="{{ asset($banner->image) }}" alt="Healthcare" class="w-full h-[400px] sm:h-[600px] object-cover">
        </div>
        @endforeach

    </div>
    <div class="swiper-pagination"></div>
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />


<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".bannerSwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>

<style>
    .bannerSwiper {
        width: 100%;
        height: 100%;
    }
    .swiper-button-next,
    .swiper-button-prev {
        color: white;
        background: rgba(0, 0, 0, 0.3);
        padding: 30px;
        border-radius: 50%;
    }
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    .swiper-pagination-bullet {
        background: white;
        opacity: 0.5;
    }
    .swiper-pagination-bullet-active {
        opacity: 1;
    }
</style>



@include('frontend.components.healthcareservice.healthcareservice')
@include('frontend.components.about.about')
@include('frontend.components.providing')
@include('frontend.components.doctors.doctors')
@include('frontend.components.testimonial.testimonial')
@include('frontend.components.newsudpate.news')






@endsection