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

const posts = [
  {
    title: 'The Secret Behind Our Perfectly Crisp Dosas',
    date: 'March 15, 2026',
    excerpt: 'Discover the traditional fermentation process and the precise rice-to-lentil ratio that makes our dosas perfectly crisp every single time.',
    image: '/images/hero-dosa.png',
  },
  {
    title: '5 Health Benefits of South Indian Cuisine',
    date: 'February 28, 2026',
    excerpt: 'From gut-friendly fermented foods to antioxidant-rich spices, learn why South Indian food is as healthy as it is delicious.',
    image: '/images/south-indian-thali.png',
  },
  {
    title: 'A Guide to South Indian Spices',
    date: 'February 10, 2026',
    excerpt: 'Mustard seeds, curry leaves, and tamarind. We break down the essential flavor profiles that define authentic South Indian cooking.',
    image: '/images/sambar.png',
  }
];

export default function BlogSection() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <p className={styles.sectionTag}>📰 Culinary Journal</p>
        <h2 className={styles.sectionTitle}>Latest from Our Blog</h2>

        <div className={styles.blogGrid}>
          {posts.map((post, index) => (
            <article key={index} className={styles.blogCard}>
              <div className={styles.imageWrap}>
                <Image 
                  src={post.image} 
                  alt={post.title} 
                  fill
                  className={styles.image}
                />
              </div>
              <div className={styles.content}>
                <span className={styles.date}>{post.date}</span>
                <h3 className={styles.title}>{post.title}</h3>
                <p className={styles.excerpt}>{post.excerpt}</p>
                <a href="#" className={styles.readMore}>Read Article →</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}