import styles from "./WhyChooseUs.module.css";

const features = [
  {
    icon: "🌿",
    title: "Fresh Ingredients",
    description:
      "We use only premium quality vegetables, spices, and fresh ingredients every day."
  },
  {
    icon: "🍽️",
    title: "Authentic Recipes",
    description:
      "Traditional South Indian recipes prepared with care and authentic techniques."
  },
  {
    icon: "⭐",
    title: "Customer Satisfaction",
    description:
      "Serving delicious food with excellent hospitality and memorable dining experiences."
  }
];

export default function WhyChooseUs() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>

        <div className={styles.left}>


          <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>🌟</span> Why Choose Us
          </span>
          <h2 className={styles.title}>
            Authentic South Indian <em>Experience</em>
          </h2>

          <p className={styles.description}>
            From traditional dosas to flavourful meals, we bring the rich taste
            of South India to your table using fresh ingredients and time-tested recipes.
          </p>

          <div className={styles.features}>
            {features.map((item, index) => (
              <div key={index} className={styles.feature}>
                <div className={styles.iconBox}>
                  {item.icon}
                </div>

                <div>
                  <h4>{item.title}</h4>
                  <p>{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className={styles.right}>
          <img
            src="/images/hero-dosa.png"
            alt="Restaurant"
          />
        </div>

      </div>
    </section>
  );
}