'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: 5,
    spaceBetween: 0,
    // 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: 1,
            // spaceBetween: 30,
        },
        767: {
            slidesPerView: 2,
            // spaceBetween: 30,
        },
        991: {
            slidesPerView: 3,
            // spaceBetween: 30,
        },
        1199: {
            slidesPerView: 3,
            // spaceBetween: 30,
        },
        1350: {
            slidesPerView: 5,
            // spaceBetween: 30,
        },
    }



}

export default function Gallery() {
    
    return (
        <>
        {/* Gallery Section */}
            <section className="gallery-section">
                <div className="outer-container">
                    <Swiper {...swiperOptions} className="gallery-carousel ">
                        
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton1" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton2" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/5.jpg" alt="Sixty5 Street kitchen and staff in Brampton ON" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/5.jpg"  alt="Sixty5 Street kitchen and staff in Brampton ON1" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton3" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/1.jpg" alt="Delicious street food served at Sixty5 Street Brampton4" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario2" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/2.jpg" alt="Sixty5 Street restaurant interior Brampton Ontario3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton2" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/3.jpg" alt="Customer dining experience at Sixty5 Street Brampton3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant2" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/4.jpg" alt="Signature dishes at Sixty5 Street Brampton restaurant3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                        {/* Gallery Block */}
                        <SwiperSlide>
                        <div className="gallery-block">
                            <div className="inner-box">
                                <figure className="image-box">
                                    <img src="/assets/images/gallery/5.jpg" alt="Sixty5 Street kitchen and staff in Brampton ON2" loading="lazy"/>
                                    {/* Overlay Box */}
                                    <div className="overlay-box">
                                        <div className="overlay-inner">
                                            <div className="content">
                                                <Link href="/assets/images/gallery/5.jpg" alt="Sixty5 Street kitchen and staff in Brampton ON3" data-fancybox="gallery" data-caption="" className="icon flaticon-plus"></Link>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                        </SwiperSlide>
                    </Swiper>
                </div>
            </section>
            {/* End Gallery Section */}
        </>
    )
}