Shivasakthi-Restarunt/components/home/HeroBanner.js

import { useState } from "react";
import Link from "next/link";
import Slider from "react-slick";
import { sliderProps } from "@/utility/sliderProps";

const heroSlides = [
    {
        subtitle: "Welcome to Shiva Sakthi Restaurant",
        title: "Taste the <br/> &amp; Tradition On Weekdays",
        description:
            "At Shiva Sakthi, we serve more than just food — we serve memories. Taste the heritage of South India in every bite, lovingly prepared with spices that tell a story.",
        buttonText: "Order now",
        buttonLink: "https://gosnappy.io/owa/r/shiva-sakthi-restaurant/5921/menu_655/",
        leftImage: "/assets/images/home/shiva-sakthi-web-banner.webp",
        rightImage: "/assets/images/home/shiva-sakthi-web-banner.webp",
    },
    {
        subtitle: "Welcome to Shiva Sakthi Restaurant",
        title: "Unlimited Thali On Weeekends By Reservation Only",
        description:
            "Enjoy the comfort of home-style cooking blended with restaurant excellence. At Shiva Sakthi, every meal is crafted with love and served with joy.",
        buttonText: "Book now",
        buttonLink: "https://gosnappy.io/reservation/?storeId=5921&returnUrl=https:%2F%2Fgosnappy.io%2Fowa%2Fr%2Fshiva-sakthi-restaurant%2F5921%2Fmenu_655%2F",
        leftImage: "/assets/images/home/left-5.webp",
        rightImage: "/assets/images/home/right-5.webp",
    },
    {
        subtitle: "Authentic Flavors. Timeless Traditions.",
        title: "SOUTH INDIAN SOUL ON EVERY PLATE",
        description:
            "At Shiva Sakthi, we serve more than just food — we serve memories. Taste the heritage of South India in every bite, lovingly prepared with spices that tell a story.",
        buttonText: "Explore Menu",
        buttonLink: "/menu",
        leftImage: "/assets/images/home/left-2.webp",
        rightImage: "/assets/images/home/right-2.webp",
    },
    {
        subtitle: "Pure Veg & Non-Veg Cuisine Inspired by Tradition",
        title: "YOUR TASTE OF TAMIL HERITAGE",
        description:
            "Celebrate Tamil culinary roots with our rich variety of dishes. From hearty curries to crisp dosas, every plate is a tribute to South Indian hospitality.",
        buttonText: "Explore Menu",
        buttonLink: "/menu",
        leftImage: "/assets/images/home/left-1.webp",
        rightImage: "/assets/images/home/right-1.webp",
    },
    {
        subtitle: "Wholesome Dishes with a Homemade Touch",
        title: "MADE WITH LOVE, SERVED WITH PRIDE",
        description:
            "Enjoy the comfort of home-style cooking blended with restaurant excellence. At Shiva Sakthi, every meal is crafted with love and served with joy.",
        buttonText: "Explore Menu",
        buttonLink: "/menu",
        leftImage: "/assets/images/home/left-3.webp",
        rightImage: "/assets/images/home/right-3.webp",
    },
];


const HeroBanner = () => {
    const [currentSlide, setCurrentSlide] = useState(0);

    const handleBeforeChange = (_, next) => {
        setCurrentSlide(next);
    };

    const settings = {
        ...sliderProps.heroBanner,
        beforeChange: handleBeforeChange,
    };

    const activeSlide = heroSlides[currentSlide];

    return (
        <section
            className="hero-area-five bgs-cover pt-150 rpt-105 pb-100 rel z-1"
            style={{ backgroundImage: "url(/assets/images/background/hero.jpg)" }}
        >
            {/* Dynamic Content Slider */}
            <Slider {...settings} className="hero-slider container">
                {heroSlides.map((slide, index) => (
                    <div key={index}>
                        <div
                            className="hero-content-four style-two  rpt-0 text-center text-white"
                            data-aos="fade-up"
                            data-aos-duration={1500}
                            data-aos-offset={50}
                        >
                            <span className="sub-title">{slide.subtitle}</span>
                            <h1 dangerouslySetInnerHTML={{ __html: slide.title }}></h1>
                            <p>{slide.description}</p>
                            <Link href={slide.buttonLink} className="theme-btn mt-25"
                            target={slide.buttonLink.startsWith("http") && index < 2 ? "_blank" : undefined} >
                                {slide.buttonText} <i className="far fa-arrow-alt-right" />
                            </Link>
                        </div>
                    </div>
                ))}
            </Slider>

            {/* Static and Dynamic Shapes */}
            <div className="hero-shapes">
                {/* Static shapes */}
                {/* <div className="shape one">
                    <img src="/assets/images/shapes/hero-shape1.png" alt="Shape" />
                </div> */}
                <div className="shape two">
                    <img src="/assets/images/shapes/hero-shape2.png" alt="Shape" />
                </div>
                <div className="shape five">
                    <img src="/assets/images/shapes/hero-shape5.png" alt="Shape" />
                </div>

                {/* Dynamic left/right shape images based on slide */}
                <div
                    className="hero-left"
                    data-aos="zoom-in"
                    data-aos-delay={50}
                    data-aos-duration={1500}
                    data-aos-offset={50}
                >
                    <img src={activeSlide.leftImage} alt="Hero Left Shape" />
                </div>
                <div
                    className="hero-right"
                    data-aos="zoom-in"
                    data-aos-delay={100}
                    data-aos-duration={1500}
                    data-aos-offset={50}
                >
                    <img src={activeSlide.rightImage} alt="Hero Right Shape" />
                </div>
            </div>
        </section>
    );
};

export default HeroBanner;