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

const HeroBanner = () => {
    const heroSlides = [
        {
            title: "Welcome to Shivas Dosa Restaurant",
            subtitle: "Start price Only $25",
            description:
                "Truly Authentic South Indian Cuisine",
            image: "/assets/images/banner/4.webp",
            btnText: "Know More"
        },
        {
            title: "Quality Food and Dinning Experience",
            subtitle: "Burger combo only $15",
            description:
                "Taking you back to Home",
            image: "/assets/images/banner/2.webp",
            btnText: "Dine in Menu"
        },
        {
            title: "Weekend Specials",
            subtitle: "Pizza deals from $10",
            description:
                "Our Extensive South Indian Menu",
            image: "/assets/images/banner/3.webp",
            btnText: "Dine in Menu"
        },
        {
            title: "Real Taste, Real South Cuisine",
            subtitle: "Pizza deals from $10",
            description:
                "More than 125 Menu Items - Special options for Veg, Non-veg, Vegan, Jain, Halal and Svami Narayan Foods",
            image: "/assets/images/banner/1.webp",
            btnText: "Dine in Menu"
        },
        {
            title: "Undertake Customize Catering Orders",
            subtitle: "Pizza deals from $10",
            description:
                "Customize Menu items as per Customer's Request",
            image: "/assets/images/banner/5.webp",
            btnText: "Contact Us"
        },
    ];

    return (
        <section
            className="hero-area hero-banner bgs-cover pt-180 rpt-150 pb-100 rel z-1"
            style={{
                backgroundImage: "url(/assets/images/background/hero.jpg)"
            }}
        >
            <Slider {...sliderProps.heroBanner} className="hero-slider container">
                {heroSlides.map((slide, idx) => (
                    <div className="row align-items-center d-flex" key={idx}>
                        <div className="col-lg-6">
                            <div
                                className="hero-content text-white"
                                data-aos="fade-left"
                                data-aos-duration={1500}
                                data-aos-offset={50}
                            >
                                {/* <span className="sub-title mb-35">
                                    <i className="far fa-hamburger" /> {slide.subtitle}
                                </span> */}
                                <h1>{slide.title}</h1>
                                <p>{slide.description}</p>
                                <Link href="/menu" className="theme-btn">
                                    View All Menu <i className="far fa-arrow-alt-right" />
                                </Link>
                            </div>
                        </div>
                        <div
                            className="col-lg-6"
                            data-aos="fade-right"
                            data-aos-duration={1500}
                            data-aos-offset={50}
                        >
                            <div className="hero-images rmt-60">
                                <img src={slide.image} alt="Hero" />

                            </div>
                        </div>
                    </div>
                ))}
            </Slider>

            {/* Static Background Shapes */}
            <div className="hero-shapes">
                {/* <div className="shape one">
                    <img src="/assets/images/shapes/hero-shape1.png" alt="Shape 1" />
                </div> */}
                <div className="shape two">
                    <img src="/assets/images/shapes/hero-shape2.png" alt="Shape 2" />
                </div>
                <div className="shape three">
                    <img src="/assets/images/shapes/hero-shape3.png" alt="Shape 3" />
                </div>
                <div className="shape four">
                    <img src="/assets/images/shapes/hero-shape4.png" alt="Shape 4" />
                </div>
                <div className="shape five">
                    <img src="/assets/images/shapes/hero-shape5.png" alt="Shape 5" />
                </div>
            </div>
        </section>
    );
};

export default HeroBanner;