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

const images = [
  '/images/hero-dosa.png',
  '/images/south-indian-thali.png',
  '/images/sambar.png',
  '/images/crispy-masala.png',
  '/images/hero-dosa.png',
  '/images/story-heritage.png'
];

export default function GallerySection() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        {/* <p className={styles.sectionTag}>📸 Follow Our Journey</p> */}
        <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>📸</span> Gallery
          </span>
          <h2 className={styles.sectionTitle}>
            Our Culinary <em>Gallery</em>
          </h2>

        <div className={styles.galleryGrid}>
          {images.map((src, index) => (
            <div key={index} className={styles.galleryItem}>
              <Image 
                src={src} 
                alt={`Gallery image ${index + 1}`} 
                fill
                className={styles.image}
              />
              <div className={styles.overlay}>
                <span className={styles.icon}></span>
              </div>
            </div>
          ))}
        </div>
        
        <div className={styles.centerBtn}>
          <a href="#" className={styles.btnInsta}>View on Instagram</a>
        </div>
      </div>
    </section>
  );
}