import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";

export default function Banner1() {
    return (
        <Swiper
            modules={[Autoplay, Pagination]}
            slidesPerView={1}
            spaceBetween={0}
            loop={true}
            autoplay={{
                delay: 3000,
                disableOnInteraction: false,
            }}
            pagination={{ clickable: true }}
            className="banner-swiper"
        >
            {/* Banner 1 */}
            <SwiperSlide>
                <section className="single_banner style_one">
                    <div className="image_bg">
                        <img
                            src="/assets/images/slider/banner-single-4-bg.png"
                            className="img-fluid"
                            alt="img"
                        />
                    </div>
                    <div className="content_box">
                        <div className="large-container">
                            <div className="row align-items-center">
                                <div className="col-lg-5">
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title">Need it Moved Today?</h2>
                                            <h2
                                                className="title"
                                                style={{ color: "#ff6600" }}
                                            >
                                                Done!
                                            </h2>
                                        </div>
                                        <h3>
                                            Same day pick & delivery across <br />southern Ontario!
                                        </h3>
                                    </div>
                                </div>
                                <div className="col-lg-1" />
                                <div className="col-lg-6">
                                    <div className="image">
                                        <img
                                            src="/assets/images/home/banner/home-banner-1.webp"
                                            className="img-fluid"
                                            alt="img"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="section_title abso type_one">
                        <div className="title_whole">
                            <h2 className="title">#ZIPVan</h2>
                        </div>
                    </div>
                </section>
            </SwiperSlide>

            {/* Banner 2 */}
            <SwiperSlide>
                <section className="single_banner style_one">
                    <div className="image_bg">
                        <img
                            src="/assets/images/slider/banner-single-4-bg.png"
                            className="img-fluid"
                            alt="img"
                        />
                    </div>
                    <div className="content_box">
                        <div className="large-container">
                            <div className="row align-items-center">
                                <div className="col-lg-5">
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title">Packing Worries?</h2>
                                            <h2 className="title" style={{ color: "#ff6600" }}>
                                                Gone!
                                            </h2>
                                        </div>
                                        <h3>
                                            Professional packing and careful handling <br />so your items arrive safe & sound.
                                        </h3>
                                    </div>
                                </div>
                                <div className="col-lg-1" />
                                <div className="col-lg-6">
                                    <div className="image">
                                        <img
                                            src="/assets/images/home/banner/home-banner-2.webp"
                                            className="img-fluid"
                                            alt="img"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="section_title abso type_one">
                        <div className="title_whole">
                            <h2 className="title">#ZIPVan</h2>
                        </div>
                    </div>
                </section>
            </SwiperSlide>

            {/* Banner 3 */}
            <SwiperSlide>
                <section className="single_banner style_one">
                    <div className="image_bg">
                        <img
                            src="/assets/images/slider/banner-single-4-bg.png"
                            className="img-fluid"
                            alt="img"
                        />
                    </div>
                    <div className="content_box">
                        <div className="large-container">
                            <div className="row align-items-center">
                                <div className="col-lg-5">
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title">Worried About Cost?</h2>
                                            <h2 className="title" style={{ color: "#ff6600" }}>
                                                Don’t Be!
                                            </h2>
                                        </div>
                                        <h3>
                                            Transparent pricing, no hidden fees, <br />and flexible options for every move.
                                        </h3>
                                    </div>
                                </div>
                                <div className="col-lg-1" />
                                <div className="col-lg-6">
                                    <div className="image">
                                        <img
                                            src="/assets/images/home/banner/home-banner-3.webp"
                                            className="img-fluid"
                                            alt="img"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="section_title abso type_one">
                        <div className="title_whole">
                            <h2 className="title">#ZIPVan</h2>
                        </div>
                    </div>
                </section>
            </SwiperSlide>
        </Swiper>
    );
}