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

const AboutRight = () => {
  return (
    <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">SOUTH INDIAN HERITAGE ON A PLATE
          </span>
          <h2 className="text-white">the amazing &amp; Quality food for your good health</h2>
        </div>
        <p className="text-white">
          ShivasDosa brings age-old recipes to life in the heart of Ontario.
          Savor the spices, feel the comfort, and relive tradition in every bite.
          Whether it's a family dinner or your first dosa — you're home here.
        </p>
        <p className="text-white">
          From spicy curries to crispy vadas — we’ve got it all. ShivasDosa is your local hub for genuine South Indian food.
          Dine with us and rediscover the magic of real Indian cooking.

        </p>
        <div className="about-btn-author pt-5 mb-60">
          <Link href="/menu" className="theme-btn style-two">
            Explore popular menu <i className="far fa-arrow-alt-right" />
          </Link>
          {/* <Link href="about" 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 text-white">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 text-white">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 text-white">Favourite Dishes</span>
            </div>
          </div>
        </div> */}
      </div>
    </div>
  );
};

const AboutUs = ({
  productImage = "/assets/images/about/third-section/about-3.webp",
  title = "Shivas Dosa",
  product = "Dosa",
}) => {
  return (
<section
  className="about-us-area bgc-black pt-60 pb-150 rpb-60 rel z-1"
  style={{
    backgroundImage: "url(/assets/images/background/offer-dot-bg.png)",
  }}
>
  <div className="container">
    {/* Add a custom class for flexbox layout */}
    <div className="about-row row align-items-end custom-responsive-order">
      <div className="col-lg-6 image-part">
        <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>

        <AboutRight />
    </div>
  </div>
</section>

  );
};
export default AboutUs;

export const AboutUs2 = ({
  aboutImg1 = "/assets/images/about/about-four3.jpg",
  aboutImg2 = "/assets/images/about/about-four4.jpg",
}) => {
  return (
    <section className="about-us-area pt-130 rpt-100 pb-150 rpb-60 rel z-1">
      <div className="container">
        <div className="row align-items-end">
          <div className="col-lg-6">
            <div
              className="about-image-four style-two mb-30"
              data-aos="fade-left"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              <div className="row">
                <div className="col">
                  <img src={aboutImg1} alt="About" loading="lazy"/>
                </div>
                <div className="col mt-80">
                  <img src={aboutImg2} alt="About" loading="lazy"/>
                </div>
              </div>
              <div className="badge">
                <img
                  src="/assets/images/about/about-four-badge.jpg"
                  alt="Badge" loading="lazy"
                />
              </div>
            </div>
          </div>
          <AboutRight />
        </div>
      </div>
    </section>
  );
};
export const AboutUs3 = ({
  aboutImg1 = "/assets/images/about/about-four3.jpg",
  aboutImg2 = "/assets/images/about/about-four4.jpg",
}) => {
  return (
    <section className="about-us-area-four pt-130 rpt-100 pb-85 rpb-55 rel z-1">
      <div className="container">
        <div className="row align-items-center">
          <div className="col-lg-6">
            <div
              className="about-us-content ms-0 rmb-25"
              data-aos="fade-left"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              <div className="section-title mb-25">
                <span className="sub-title mb-5">DISCOVER THE TASTE OF TRADITION
                </span>
                <h2>WE SERVE AUTHENTIC SOUTH INDIAN FLAVOURS YOU'LL LOVE

                </h2>
              </div>
              <p>
                Welcome to ShivasDosa  Restaurant, where tradition meets taste and every meal feels like home. Located in the heart of Ontario, we bring you a soulful dining experience filled with rich flavours, fresh ingredients, and heartfelt hospitality.

              </p>
              {/* <Link href="about" className="theme-btn mt-25 mb-60">
                learn more about us <i className="far fa-arrow-alt-right" />
              </Link> */}
              {/* <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 className="col-lg-6">
            <div
              className="about-image-four style-two mb-30"
              data-aos="fade-right"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              <div className="row">
                <div className="col">
                  <img src="/assets/images/about/second-section/left.webp" alt="About" loading="lazy" />
                </div>
                <div className="col mt-80">
                  <img src="/assets/images/about/second-section/right.webp" alt="About" loading="lazy"/>
                </div>
              </div>
              <div className="badge">
                <img
                  src="/assets/images/about/about-four-badge.jpg"
                  alt="Badge" loading="lazy"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export const AboutUs4 = ({ }) => {
  return (
    <section className="about-us-area pt-130 rpt-100 pb-90 rpb-60 rel z-1">
      <div className="container">
        <div className="row align-items-end">
          <div className="col-lg-6">
            <div
              className="about-restaurant-page rel mb-30 rmb-55"
              data-aos="fade-left"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              <img
                src="/assets/images/about/menu-restaurant.jpg"
                alt="Menu Restaurant"
              />
              <div className="experience-year">
                <span className="years">25</span>
                Years of experience in restaurant services
              </div>
            </div>
          </div>
          <div className="col-lg-6">
            <div
              className="about-us-content"
              data-aos="fade-right"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              <div className="section-title mb-25">
                <span className="sub-title mb-5">learn About wellfood</span>
                <h2>the amazing &amp; Quality food for your good health</h2>
              </div>
              <p>
                Welcome too restaurant, where culinary excellence meets warm
                hospitality in every dish we serve. Nestled in the heart of City
                Name our eatery invites you on a journey
              </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="about" 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>
    </section>
  );
};