import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"

const swiperOptions = {
    modules: [Autoplay, Pagination, Navigation],
    slidesPerView: 3,
    spaceBetween: 30,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    loop: true,

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

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

    breakpoints: {
        320: {
            slidesPerView: 1,
            spaceBetween: 30,
        },
        575: {
            slidesPerView: 2,
            spaceBetween: 30,
        },
        767: {
            slidesPerView: 2,
            spaceBetween: 30,
        },
        991: {
            slidesPerView: 2,
            spaceBetween: 30,
        },
        1199: {
            slidesPerView: 3,
            spaceBetween: 30,
        },
        1350: {
            slidesPerView: 3,
            spaceBetween: 30,
        },
    }
}

export default function Offer1() {
    return (
        <>
            <section className="what-we-offer bg_light_4">
                {/*-============spacing==========-*/}
                <div className="pd_top_90" />
                {/*-============spacing==========-*/}
                <div className="container">
                    <div className="row align-items-end">
                        <div className="col-lg-12 col-md-12">
                            <div className="section_title type_four text-center">
                                <h4 className="sm_title">Smooth Journey</h4>
                                <div className="title_whole">
                                    <h2 className="title">How It Works</h2>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="service_post style_two position-relative position_one nav_false dot_false">
                                <Swiper {...swiperOptions} className="theme_carousel ">
                                    <SwiperSlide className="process_box  type_two hover_1_get color_two">
                                        <div className="image_box hover_1">
                                            <img src="/assets/images/process/1.png" alt="service" className="img-fluid" />
                                            <div className="oh ho_1" />
                                            <div className="oh ho_2" />
                                            <div className="oh ho_3" />
                                            <div className="oh ho_4" />
                                        </div>
                                        <div className="content">
                                            <div className="title_22">
                                                <h4 className="text-white">
                                                    Step 1: Don’t panic
                                                </h4>
                                            </div>
                                            <p className="trans">
                                                Found a deal on IKEA, Facebook Marketplace, or Kijiji?
                                                Skip the stress—we’ve got wheels.
                                            </p>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide className="process_box  type_two hover_1_get color_two">
                                        <div className="image_box hover_1">
                                            <img src="/assets/images/process/2.png" alt="service" className="img-fluid" />
                                            <div className="oh ho_1" />
                                            <div className="oh ho_2" />
                                            <div className="oh ho_3" />
                                            <div className="oh ho_4" />
                                        </div>
                                        <div className="content">
                                            <div className="title_22">
                                                <h4 className="text-white">
                                                    Step 2: Go to zipvan.ca/book
                                                </h4>
                                            </div>
                                            <p className="trans">
                                                Enter pickup & drop-off. See your instant, final price
                                                and pick a time—no surprises.
                                            </p>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide className="process_box  type_two hover_1_get color_two">
                                        <div className="image_box hover_1">
                                            <img src="/assets/images/process/3.png" alt="service" className="img-fluid" />
                                            <div className="oh ho_1" />
                                            <div className="oh ho_2" />
                                            <div className="oh ho_3" />
                                            <div className="oh ho_4" />
                                        </div>
                                        <div className="content">
                                            <div className="title_22">
                                                <h4 className="text-white">
                                                    Step 3: We handle it. You relax.
                                                </h4>
                                            </div>
                                            <p className="trans">
                                                We coordinate pickup, load with blankets & straps,
                                                deliver to your door. Track us live; pay on delivery.
                                            </p>
                                        </div>
                                    </SwiperSlide>
                                </Swiper>
                            </div>
                        </div>
                    </div>
                </div>
                {/*-============spacing==========-*/}
                <div className="pd_bottom_90" />
                {/*-============spacing==========-*/}
            </section>

        </>
    )
}