import styles from './FeaturesSection.module.css';

const features = [
  {
    icon: '🌿',
    title: 'Fresh Ingredients',
    description: 'We source only the freshest, locally available ingredients for authentic taste.',
  },
  {
    icon: '📜',
    title: 'Famous Recipes',
    description: 'Time-honored recipes passed down through generations of South Indian kitchens.',
  },
  {
    icon: '🌶️',
    title: 'Pure Spices',
    description: 'Hand-ground spices imported directly from the spice gardens of Kerala.',
  },
  {
    icon: '🌙',
    title: 'Evening Specials',
    description: 'Exclusive tiffin specials every evening with rotating seasonal menus.',
  },
];

export default function FeaturesSection() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.grid}>
          {features.map((feature, i) => (
            <div key={i} className={styles.card}>
              <div className={styles.iconWrap}>
                <span className={styles.icon}>{feature.icon}</span>
              </div>
              <h3 className={styles.cardTitle}>{feature.title}</h3>
              <p className={styles.cardDesc}>{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
