import Image from 'next/image';
import Link from 'next/link';
import styles from './AboutCards.module.css';

const cards = [
  {
    image: '/images/south-indian-thali.png',
    title: 'Dish Heritage',
    description: 'Every dish is built on recipes passed down through generations, delivered with fresh modern flair.',
    link: '/menu',
    variant: 'cardVariant1',
  },
  {
    image: '/images/crispy-masala.png',
    title: 'Spices Sourced with Care',
    description: 'We use hand-selected South Indian spices that balance warmth, earthiness, and bright citrus notes.',
    link: '/menu',
    variant: 'cardVariant2',
  },
  {
    image: '/images/hero-dosa.png',
    title: 'Daily Fresh, Always Vibrant',
    description: 'Our kitchen begins before dawn to make batter, chutneys, and curries from scratch every single day.',
    link: '/menu',
    variant: 'cardVariant3',
  },
];

export default function AboutCards() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.grid}>
          {cards.map((card, i) => (
            <div key={i} className={`${styles.cardWrapper} ${styles[card.variant]}`}>
              <div className={styles.imageContainer}>
                <Image
                  src={card.image}
                  alt={card.title}
                  fill
                  style={{ objectFit: 'cover' }}
                />
                <div className={styles.cardOverlay} />
              </div>
              <div className={styles.contentContainer}>
                <span className={styles.cardLabel}>Our Promise</span>
                <h3 className={styles.title}>{card.title}</h3>
                <p className={styles.description}>{card.description}</p>
                <Link href={card.link} className={styles.readMore}>
                  Explore Menu
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
