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

export default function ServiceIntro() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        {/* Left — Image Grid */}
        <div className={styles.imageCol}>
          <div className={styles.imageGrid}>
            <div className={styles.gridImg1}>
              <Image
                src="/images/story-heritage.png"
                alt="Authentic South Indian experience at My Dosa Place"
                fill
                style={{ objectFit: 'cover' }}
              />
            </div>
            <div className={styles.gridImg2}>
              <Image
                src="/images/south-indian-thali.png"
                alt="Freshly made medu vada and thali"
                fill
                style={{ objectFit: 'cover' }}
              />
            </div>
            
            {/* Floating badge */}
            <div className={styles.badge}>
              <span className={styles.badgeNum}>25+</span>
              <span className={styles.badgeLabel}>Years of<br />Tradition</span>
            </div>
            
            {/* Floating Element */}
            <div className={styles.floatingElement}>
              <div className={styles.dots}></div>
            </div>
          </div>
        </div>

        {/* Right — Content */}
        <div className={styles.contentCol}>
          <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>✨</span> Our Services
          </span>
          <h2 className={styles.title}>
            Every Visit, an <em>Authentic</em> South Indian Experience
          </h2>
          <p className={styles.lead}>
            From a quiet weekday lunch to a grand celebration catered at your venue, 
            My Dosa Place brings the warmth and authenticity of South Indian hospitality 
            to every occasion.
          </p>
          <p className={styles.body}>
            We are proudly 100% vegetarian — every batter stone-ground daily, every 
            sambar simmered for hours, every chutney prepared fresh each morning. 
          </p>

          <div className={styles.pillars}>
            <div className={styles.pillar}>
              <div className={styles.pillarIcon}>🍽️</div>
              <div>
                <strong>Dine-In &amp; Takeout</strong>
                <span>Fresh food, your way, every day</span>
              </div>
            </div>
            <div className={styles.pillar}>
              <div className={styles.pillarIcon}>🎉</div>
              <div>
                <strong>Catering &amp; Events</strong>
                <span>From 10 to 500 guests, we deliver</span>
              </div>
            </div>
            <div className={styles.pillar}>
              <div className={styles.pillarIcon}>🪔</div>
              <div>
                <strong>Festival Menus</strong>
                <span>Seasonal specials you won't find anywhere else</span>
              </div>
            </div>
          </div>

          {/* <Link href="/contact" className={styles.cta}>
            Get in Touch
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </Link> */}
        </div>
      </div>
    </section>
  );
}
