import Image from 'next/image';
import styles from './MenuSection.module.css';

const menuItems = [
  { name: 'Classic Plain Dosa', desc: 'A naturally fermented, savory crepe made from stone-ground rice and lentils. Perfectly thin, healthy, and crispy.', price: '$8.99', image: '/images/plain-dosa.png' },
  { name: 'South Indian Thali', desc: 'A nostalgic feast of authentic vegetable curries, dal, rice, and traditional desserts. The ultimate comfort meal.', price: '$24.99', image: '/images/south-indian-thali.jpeg' },
  { name: 'Authentic Sambar', desc: 'A hearty, tangy lentil and vegetable stew brewed with a special blend of roasted spices and tamarind.', price: '$8.99', image: '/images/sambar.png' },
  { name: 'Crispy Masala Dosa', desc: 'Our signature savory crepe, folded over a comforting, spiced potato and onion curry.', price: '$12.99', image: '/images/crispy-masala.png' },
  { name: 'Medu Vada', desc: 'Savory, deep-fried lentil donuts with a crispy exterior and fluffy center, infused with cumin and curry leaves.', price: '$9.99', image: '/images/medu-vada.png' },
  { name: 'Mysore Masala Dosa', desc: 'A crispy crepe lined with a fiery, traditional red garlic-chili chutney, stuffed with a hearty potato filling.', price: '$13.99', image: '/images/mysore-masala.png' },
];

export default function MenuSection() {
  return (
    <section id="menu" className={styles.section}>
      <div className={styles.container}>
        {/* <p className={styles.sectionTag}>🍽️ Our Menu</p> */}
        <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>✨</span> Explore Our Menu
          </span>
          <h2 className={styles.sectionTitle}>
            A Taste of <em>South India</em>
          </h2>

        {/* Menu Grid */}
        <div className={styles.menuGrid}>
          {menuItems.map((item, i) => (
            <div key={i} className={styles.menuItem}>
              <div className={styles.menuItemImageWrap}>
                <Image 
                  src={item.image} 
                  alt={item.name} 
                  width={80} 
                  height={80} 
                  className={styles.menuItemImage} 
                />
              </div>
              <div className={styles.menuItemContent}>
                <div className={styles.menuItemTop}>
                  <h3 className={styles.itemName}>{item.name}</h3>
                  {/* <span className={styles.dots}></span> */}
                  {/* <span className={styles.itemPrice}>{item.price}</span> */}
                </div>
                <p className={styles.itemDesc}>{item.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <div className={styles.center}>
          <a href="/menu" className={styles.btnViewFull}>
            Explore Full Menu
          </a>
        </div>
      </div>
    </section>
  );
}