import Link from "next/link";
import Counter from "../Counter";

const AboutSection = ({
    productImage = "/assets/images/home/left-side-image.webp",
    title = "Dosa",
    product = "Dosa",
}) => {
    return (
        <section className="about-us-area pt-100 rpt-60 pb-30 rel z-1">
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-lg-6">
                        <div
                            className="about-image-part style-two mb-30 rmb-55"
                            data-aos="fade-left"
                            data-aos-duration={1500}
                            data-aos-offset={50}
                        >
                            <img src={productImage} alt={`About ${product}`} loading="lazy" />
                            {/* <div
                                className="quality-food"
                                style={{
                                    backgroundImage:
                                        "url(assets/images/shapes/about-star-yellow.png)",
                                }}
                            >
                                <span className="for-border" />
                                <span className="text">
                                    quality <br />
                                    food
                                </span>
                            </div> */}
                        </div>
                    </div>
                    <div className="col-lg-6">
                        <div
                            className="about-us-content"
                            data-aos="fade-right"
                            data-aos-delay={150}
                            data-aos-duration={1500}
                            data-aos-offset={50}
                        >
                            <div className="section-title mb-25">
                                <span className="sub-title mb-5">Real . authentic . South Indian</span>
                                <h2> Welcome to  Shiva Sakthi Restaurant</h2>
                            </div>
                            <p>
                                Your new favorite destination for authentic South Indian cuisine, now in the Greater Toronto Area (GTA). Enjoy dine-in, take-out, and full-service catering tailored to your needs. We also offer a spacious party hall for your special occasions.
                            </p>
                            <div className="about-btn-author pt-5 mb-60">
                                <Link href="/about" className="theme-btn style-two">
                                    learn more us <i className="far fa-arrow-alt-right" />
                                </Link>
                                <Link href="/menu" className="read-more">
                                    Explore popular menu <i className="far fa-arrow-alt-right" />
                                </Link>
                            </div>
                            {/* <div className="row">
                                <div className="col-sm-4 col-6">
                                    <div className="counter-item style-two counter-text-wrap">
                                        <span
                                            className="count-text k-plus"
                                            data-speed={3000}
                                            data-stop={34}
                                        >
                                            <Counter end={34} />
                                        </span>
                                        <span className="counter-title">Organic Planting</span>
                                    </div>
                                </div>
                                <div className="col-sm-4 col-6">
                                    <div className="counter-item style-two counter-text-wrap">
                                        <span
                                            className="count-text plus"
                                            data-speed={3000}
                                            data-stop={356}
                                        >
                                            <Counter end={356} />
                                        </span>
                                        <span className="counter-title">Passionate Chef’s</span>
                                    </div>
                                </div>
                                <div className="col-sm-4 col-6">
                                    <div className="counter-item style-two counter-text-wrap">
                                        <span
                                            className="count-text plus"
                                            data-speed={3000}
                                            data-stop={8534}
                                        >
                                            <Counter end={8534} />
                                        </span>
                                        <span className="counter-title">Favourite Dishes</span>
                                    </div>
                                </div>
                            </div> */}
                        </div>
                    </div>
                </div>
            </div>
            {/* <span className="about-bg-text">{title}</span> */}
        </section>
    );
};
export default AboutSection;