'use client'
import React from 'react';
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper/modules"
import { Swiper, SwiperSlide } from "swiper/react"

const swiperOptions = {
    modules: [Autoplay, Pagination, Navigation],
    slidesPerView: 1,
    spaceBetween: 0,
    autoplay: {
        delay: 7000,
        disableOnInteraction: false,
    },
    loop: true,

    // Navigation
    navigation: {
        nextEl: '.h1n',
        prevEl: '.h1p',
    },

    // Pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },



}

export default function Banner() {
    return (
        <section className="banner-style-two p_relative">
            <Swiper {...swiperOptions} className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none">
                <SwiperSlide className="slide-item">
                    <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }}></div>
                    {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-1.webp" alt="" /></figure> */}
                    <div className="auto-container">
                        <div className="content-box">
                            <span className="upper-text">The Journey to Better Health Begins here</span>
                            <h2>Your Path to  <span>Recovery</span>  Starts Today</h2>
                            <p>Expert Physiotherapy in Mississauga Tailored for You.</p>
                            <p>
                                Our skilled team provides personalized physiotherapy in Mississauga Ontario to help you regain mobility and live pain-free. Compassionate care designed around your needs.</p>

                            <div className="btn-box mt-3">
                                <Link href="tel:+647-722-3434" className="theme-btn btn-one">
                                    <span>Book Your Appointment</span>
                                </Link>
                            </div>

                        </div>
                    </div>
                </SwiperSlide>
                {/* Repeat the above structure for each slide-item as needed */}
                <SwiperSlide className="slide-item">
                    <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-2.webp' }}></div>
                    {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-2.webp" alt="" /></figure> */}
                    <div className="auto-container">
                        <div className="content-box">
                            <span className="upper-text">Compassionate Care, Delivered with Expertise</span>
                            <h2>Healing Touch, <span>Fresh</span> Inner Strength</h2>
                            <p>Expert Hand Massage Techniques for Relief</p>
                            <p>
                                Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being.
                            </p>
                            <div className="btn-box mt-3">
                                <Link href="/contact" className="theme-btn btn-one"><span>Schedule a Massage</span></Link>
                            </div>
                        </div>
                    </div>
                </SwiperSlide>
                {/* Repeat the above structure for each slide-item as needed */}
                <SwiperSlide className="slide-item">
                    <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-3.webp' }}></div>
                    {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-3.webp" alt="" /></figure> */}
                    <div className="auto-container">
                        <div className="content-box">
                            <span className="upper-text">Your Path to Wellness Starts Here</span>
                            <h2>Local Physio <span>Experts </span> Near You</h2>
                            <p>Physiotherapy Etobicoke & Rehab Care.</p>
                            <p>
                                Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently.
                            </p>
                            <div className="btn-box mt-3">
                                <Link href="/etobicoke-treatment-service" className="theme-btn btn-one"><span>Explore Our Service</span></Link>
                            </div>
                        </div>
                    </div>
                </SwiperSlide>
                <SwiperSlide className="slide-item">
                    <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-4.webp' }}></div>
                    {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-4.webp" alt="" /></figure> */}
                    <div className="auto-container">
                        <div className="content-box">
                            <span className="upper-text">Healing Hands, Caring Hearts in Action</span>
                            <h2>Wellness <span>by the</span>Waterfront</h2>
                            <p>Waterfront Physio and Rehab Services.</p>
                            <p>Find peace and healing with our specialized waterfront physio and rehab programs designed for lasting wellness and a better quality of life.</p>
                            <div className="btn-box mt-3">
                                <Link href="/contact" className="theme-btn btn-one"><span>Visit Our Location</span></Link>
                            </div>
                        </div>
                    </div>
                </SwiperSlide>
            </Swiper>
        </section>
    );
};