'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 SINCE 1989',
        //     bgImage: '/assets/img/home/banner/banner-1.webp',
        //     image: '/assets/img/all-images/hero/hero-img11.png',
        // },
        {
            title: "Grace moves with every beat <br />Tradition meets bass",
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
            bgImage: '/assets/img/home/banner/banner-2.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
        },
            {
            title: "Crafted with tradition’s hands <br />Feel the rhythm of our roots",
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
            bgImage: '/assets/img/home/banner/banner-3.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
        },
             {
            title: 'Lighting hearts across globe <br />A blend of sound & spirit',
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
            bgImage: '/assets/img/home/banner/banner-4.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
        },
             {
            title: ' Rooted in timeless wisdom <br />Echoes of legacy in drop',
            date: 'SERVING',
            location: 'WATERLOO – KITCHENER – CAMBRIDGE- GUELPH – BRANTFORD SINCE 1989',
            bgImage: '/assets/img/home/banner/banner-5.webp',
            image: '/assets/img/all-images/hero/hero-img12.png',
        },
    ];

    return (
        <Swiper
            modules={[Autoplay, Navigation, Pagination]}
            slidesPerView={1}
            loop={true}
            autoplay={{ delay: 2000 }}
            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">
                            <div className="row align-items-center">
                                <div className="col-lg-7">
                                    <div className="hero8-header">
                                        <h5>
                                            {/* <img src="/assets/img/icons/sub-logo1.svg" alt="" /> */}
                                            Where Culture Meets the Beat
                                        </h5>
                                        <div className="space16" />
                                        <h1 className="text-anime-style-3"dangerouslySetInnerHTML={{ __html: slide.title || ''}}></h1>
                                        <div className="space32" />
                                        <div className="btn-area1">
                                            <Link href="/contact" className="vl-btn9">
                                                <span className="demo">Buy Tickets Now!</span>
                                            </Link>
                                            {/* <Link href="/event-schedule" className="vl-btn9 btn2">
                                                <span className="demo">Schedules</span>
                                            </Link> */}
                                        </div>
                                    </div>
                                </div>
                                {/* <div className="col-lg-5">
                                    <div className="img1">
                                        <img src={slide.image} alt="" />
                                    </div>
                                </div> */}
                            </div>
                            <div className="row">
                                <div className="col-lg-12">
                                    <div className="timer-bg-area">
                                        <div className="row" >
                                            {/* <div className="col-lg-7">
                                                <div className="timer-btn-area">
                                                    <Countdown style={1} />
                                                </div>
                                            </div> */}
                                            <div className="col-lg-12 text-center">
                                                <div className="heading12">
                                                    <h3>{slide.date}</h3>
                                                    <div className="space16" />
                                                    <p>
                                                        <img src="/assets/img/icons/location1.svg" alt="" />
                                                        {slide.location}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </SwiperSlide>
            ))}
        </Swiper>
    );
}