
'use client'
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: 2500,
    //     disableOnInteraction: false,
    // },
    loop: true,

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

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



}

export default function Banner() {
    return (
        <>

            {/* Banner Section */}
            <section className="banner-section">
                <div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/main-slider/pattern-1.png)' }} ></div>
                <Swiper {...swiperOptions} className="main-slider-carousel ">

                    {/* Slide */}
                    <SwiperSlide>
                        <div className="slide">
                            <div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-1.webp)' }} ></div>
                            <div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-1.webp)' }} ></div>
                            <div className="auto-container">
                                <div className="row clearfix">

                                    {/* Content Column */}
                                    <div className="content-column col-lg-6 col-md-12 col-sm-12">
                                        <div className="inner-column">
                                            <h1><span className="first-letter">Sip. Savor. </span><span className="second-letter">Smile.</span></h1>
                                            <div className="text"> Welcome to Sixty5Street - where every bite brings you the vibrant taste of global street food. From fiery wings and loaded fries to shawarma, dosas, and milkshakes, we serve crave-worthy meals made fresh, fast, and full of attitude.</div>
                                            <div className="btns-box">
                                                <Link href="/about" className="theme-btn btn-style-one clearfix"><span className="icon"></span>Know Us</Link>
                                            </div>
                                            {/* <div className="icons-box">
                                                <img src="/assets/images/main-slider/icons.png" alt="" />
                                            </div> */}
                                        </div>
                                    </div>

                                    {/* Image Column */}
                                    <div className="image-column col-lg-6 col-md-12 col-sm-12">
                                        <div className="inner-column">
                                            <div className="icon-layer-three"
                                            // style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }} 
                                            ></div>
                                            <div className="image">
                                                <img src="/assets/images/banner/banner-1.webp" alt="Sixty5 Street banner with signature fusion dishes in Etobicoke" loading="lazy"/>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </SwiperSlide>

                    {/* Slide */}
                    <SwiperSlide>
                        <div className="slide">
                            <div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-2.webp)' }} ></div>
                            <div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-2.webp)' }} ></div>
                            <div className="auto-container">
                                <div className="row clearfix">

                                    {/* Content Column */}
                                    <div className="content-column col-lg-6 col-md-12 col-sm-12">
                                        <div className="inner-column">
                                            <h1><span className="first-letter">Big Street </span><span className="second-letter">Taste</span></h1>
                                            <div className="text">
                                                Sink your teeth into juicy wings and loaded combos that bring the heat. Pick your style - BBQ, Buffalo, Garlic Parm, Hot Honey  and level up your meal with fries and a pop.
                                            </div>
                                            <div className="btns-box">
                                                <Link href="/menu" className="theme-btn btn-style-one clearfix"><span className="icon"></span>View Menu</Link>
                                            </div>
                                            {/* <div className="icons-box">
                                                <img src="/assets/images/main-slider/icons.png" alt="" />
                                            </div> */}
                                        </div>
                                    </div>

                                    {/* Image Column */}
                                    <div className="image-column col-lg-6 col-md-12 col-sm-12">
                                        <div className="inner-column">
                                            <div className="icon-layer-three"
                                            // style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }}
                                            ></div>
                                            <div className="image">
                                                <img src="/assets/images/banner/banner-2.webp" alt="Street food fusion banner showcasing wings and shawarma combos" loading="lazy" />
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </SwiperSlide>
                    {/* Slide */}
                    <SwiperSlide>
                        <div className="slide style-two">
                            <div className="icon-layer-one" style={{ backgroundImage: 'url(/assets/images/banner/left-element-3.webp)' }} ></div>
                            <div className="icon-layer-two" style={{ backgroundImage: 'url(/assets/images/banner/right-element-3.webp)' }} ></div>
                            <div className="auto-container">
                                <div className="row clearfix">

                                    {/* Content Column */}
                                    <div className="content-column col-lg-6 col-md-12 col-sm-12">
                                        <div className="inner-column">
                                            <h1><span className="first-letter">Dosas to </span><span className="second-letter">Drinks</span></h1>
                                            <div className="text"> Pair your favorite street bites with crispy snacks and creamy milkshakes. Whether it’s a cheesy dosa, spicy kothu, or a chilled Badham Royal shake, the street never tasted so good.</div>
                                            <div className="btns-box">
                                                <Link href="/contact" className="theme-btn btn-style-one clearfix"><span className="icon"></span>Get In Touch</Link>
                                            </div>
                                            {/* <div className="icons-box">
                                                <img src="/assets/images/main-slider/icons.png" alt="" />
                                            </div> */}
                                        </div>
                                    </div>

                                    {/* Image Column */}
                                    <div className="image-column col-lg-6 col-md-12 col-sm-12">
                                        <div className="inner-column">
                                            <div className="icon-layer-three"
                                            // style={{ backgroundImage: 'url(/assets/images/main-slider/icon-3.png)' }} 
                                            ></div>
                                            <div className="image">
                                                <img src="/assets/images/banner/banner-3.webp" alt="Bold food banner featuring Sixty5 Street’s signature dosa fusion" loading="lazy"/>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </SwiperSlide>
                </Swiper>

            </section>
            {/* End Banner Section */}

        </>
    )
}
