TamilCulturalAssociation/components/home/HeroBanner.tsx

'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: "Grace moves with vibrant<br />Tradition meets bass",
            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: "Discover Harmony",
            buttonLink: "/about",
        },
        {
            title: "Crafted with tradition’s<br />Feel rhythm of roots",
            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: "Heritage Beats",
            buttonLink: "/upcoming-event",
        },
        {
            title: 'Lighting hearts across<br />A pure blend of spirit',
            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: "Radiant Spirit",
            buttonLink: "/community",
        },
        {
            title: 'Rooted in deep tradition <br />Echoes of true legacy',
            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: "Hear Echo",
            buttonLink: "/tamil-culture",
        },
    ];

    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">
                            <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={slide.buttonLink} className="vl-btn9">
                                                <span className="demo">{slide.buttonText}</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 d-flex justify-content-center align-items-center" >
                                            {/* <div className="col-lg-7">
                                                <div className="timer-btn-area">
                                                    <Countdown style={1} />
                                                </div>
                                            </div> */}
                                            <div className="col-lg-12 text-center d-flex justify-content-center align-items-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>
    );
}