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

const menuItems = [
  { name: 'Classic Plain Dosa', desc: 'Thin crispy crepe made from fermented rice & lentil batter', price: '$8.99', image: '/images/hero-dosa.png' },
  { name: 'South Indian Thali', desc: 'A royal feast featuring an array of curries, dal, rice & dessert', price: '$24.99', image: '/images/south-indian-thali.png' },
  { name: 'Authentic Sambar', desc: 'Flavorful lentil stew with fresh vegetables & tamarind', price: '$8.99', image: '/images/sambar.png' },
  { name: 'Crispy Masala Dosa', desc: 'Classic dosa filled with spiced potato curry', price: '$12.99', image: '/images/crispy-masala.png' },
  { name: 'Medu Vada', desc: 'Crispy fried lentil donuts served with coconut chutney', price: '$9.99', image: '/images/new.png' },
  { name: 'Mysore Masala Dosa', desc: 'Spicy red chutney spread with potato filling inside a crispy dosa', price: '$13.99', image: '/images/hero-dosa.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>
  );
}