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

const cards = [
  {
    image: '/images/crispy-masala.png',
    title: 'Dine-In Experience',
    description: 'Enjoy our cozy, family-friendly atmosphere with freshly prepared South Indian cuisine served to your table.',
    link: '/contact',
  },
  {
    image: '/images/south-indian-thali.png',
    title: 'Takeout & Online Orders',
    description: 'Order your favourite dosas and idlis online — ready for pickup in 15–20 minutes, always hot and fresh.',
    link: '/menu',
  },
  {
    image: '/images/sambar.png',
    title: 'Catering for Events',
    description: 'From intimate family gatherings to corporate lunches for hundreds — authentic South Indian flavour, delivered.',
    link: '/contact',
  },
  {
    image: '/images/medu-vada.png',
    title: 'Festival Special Menus',
    description: 'Celebrate Pongal, Onam, Ugadi and more with exclusive seasonal dishes you won\'t find anywhere else.',
    link: '/contact',
  },
];

export default function ServiceCards() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.header}>
          <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>🍽️</span> What We Offer
          </span>
          <h2 className={styles.title}>
            Services Crafted with <em>Care</em>
          </h2>
        </div>

        <div className={styles.grid}>
          {cards.map((card, i) => (
            <div key={i} className={styles.cardWrapper}>
              <div className={styles.imageContainer}>
                <Image
                  src={card.image}
                  alt={card.title}
                  fill
                  style={{ objectFit: 'cover' }}
                />
              </div>
              <div className={styles.contentContainer}>
                <h3 className={styles.cardTitle}>{card.title}</h3>
                <p className={styles.description}>{card.description}</p>
                <Link href={card.link} className={styles.readMore}>
                  Read More
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
