'use client';

import Countdown from '@/components/elements/Countdown';
import Link from 'next/link';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function HomeHeroBanner() {
    const slideData = [
        // {
        //     title: 'World Music Events 2025',
        //     date: 'SERVING',
        //     location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
        //     bgImage: '/assets/img/home/banner/banner-1.webp',
        //     image: '/assets/img/all-images/hero/hero-img11.png',
        // },
        {
            // title: 'Tamil Cultural Nite 2025',
            // date: 'SERVING',
            // location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
            bgImage: '/assets/img/home/banner/banner.webp',
            // image: '/assets/img/all-images/hero/hero-img12.png',
            // buttonText: "Book Now",
            // buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
        },
        {
            title: 'Tamil Cultural Nite 2025',
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
            bgImage: '/assets/img/home/banner/hero-banner-3.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
            buttonText: "Book Now",
            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
        },
        {
            title: "Tamil Cultural Nite 2025",
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
            bgImage: '/assets/img/home/banner/hero-banner-1.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
            buttonText: "Book Now",
            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
        },
        {
            title: "Tamil Cultural Nite 2025",
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
            bgImage: '/assets/img/home/banner/hero-banner-2.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
            buttonText: "Book Now",
            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
        },

        {
            title: 'Tamil Cultural Nite 2025',
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD AND SURROUNDING AREAS SINCE 1989',
            bgImage: '/assets/img/home/banner/hero-banner-5.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
            buttonText: "Book Now",
            buttonLink: "/upcoming-event/tamil-cultural-nite-2025",
        },
    ];

    return (
        <Swiper
            modules={[Autoplay, Navigation, Pagination]}
            slidesPerView={1}
            loop={true}
            autoplay={{ delay: 5000 }}
            navigation
        // pagination={{ clickable: true }} 
        >
            {slideData.map((slide, index) => (
                <SwiperSlide key={index}>
                    <div
                        className="hero9-slider-area"
                        style={{
                            backgroundImage: `url(${slide.bgImage})`,
                            backgroundRepeat: 'no-repeat',
                            backgroundSize: 'cover',
                            backgroundPosition: 'center bottom',
                        }}
                    >
                        <div className="container" style={index === 0 ? { paddingTop: '180px' } : {}}>
                            <div className="row align-items-center">
                                <div className="col-lg-7">
                                    <div className="hero8-header">
                                        {slide.title && (
                                            <>
                                                <h5>
                                                    Where Culture Meets the Beat
                                                </h5>
                                                <div className="space16" />
                                                <h1 className="text-anime-style-3" dangerouslySetInnerHTML={{ __html: slide.title }}></h1>
                                            </>
                                        )}
                                        <div className="space32" />
                                        {slide.buttonLink && slide.buttonText && (
                                            <div className="btn-area1">
                                                <Link href={slide.buttonLink} className="vl-btn9">
                                                    <span className="demo">{slide.buttonText}</span>
                                                </Link>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                            {(slide.date || slide.location) && (
                                <div className="row">
                                    <div className="col-lg-12">
                                        <div className="timer-bg-area">
                                            <div className="row d-flex justify-content-center align-items-center" >
                                                <div className="col-lg-12 text-center d-flex justify-content-center align-items-center">
                                                    <div className="heading12">
                                                        {slide.date && <h3>{slide.date}</h3>}
                                                        {slide.location && (
                                                            <p>
                                                                <img src="/assets/img/icons/location1.svg" alt="" />
                                                                {slide.location}
                                                            </p>
                                                        )}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </SwiperSlide>
            ))}
        </Swiper>
    );
}