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

export default function AboutStory() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        {/* Image Column */}
        <div className={styles.imageCol}>
          <div className={styles.imageWrapper}>
            <div className={styles.imagePrimary}>
              <Image
                src="/images/story-heritage.png"
                alt="Our heritage"
                fill
                style={{ objectFit: 'cover' }}
              />
            </div>
            <div className={styles.imageAccent}>
              <Image
                src="/images/medu-vada.png"
                alt="Authentic dishes"
                fill
                style={{ objectFit: 'cover' }}
              />
            </div>
            <div className={styles.statBadge}>
              <span className={styles.statNumber}>100%</span>
              <span className={styles.statLabel}>Authentic<br />Vegetarian</span>
            </div>
          </div>
        </div>

        {/* Text Column */}
        <div className={styles.textCol}>
          <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>✨</span> About Our Restaurant
          </span>
          <h2 className={styles.title}>
            A Journey from <em>Tamil Nadu</em> to Your Table
          </h2>
          <p className={styles.lead}>
            My Dosa Place was born from a simple promise — to bring the soul-warming, 
            traditional South Indian home cooking to everyone in Waterloo. We recreate the authentic 
            flavors you miss from back home.
          </p>
          <p className={styles.body}>
            We believe in the ancient science of fermentation, preparing our batter daily with 
            stone-ground rice and lentils. This time-honored process creates a beautiful, golden, crispy 
            crepe that is healthy, flavorful, and deeply nostalgic.
          </p>
          {/* <p className={styles.body}>
            We are proudly 100% vegetarian and use no artificial additives. Our menu 
            celebrates the diversity of South Indian regional cooking — from Chettinad to 
            Kerala, from Tamil Nadu to Karnataka — served with the hospitality that makes 
            every meal feel like a homecoming.
          </p> */}
          <div className={styles.pillars}>
            <div className={styles.pillar}>
              <div className={styles.pillarIcon}>🌿</div>
              <div>
                <strong>100% Vegetarian</strong>
                <span>Pure plant-based ingredients, always fresh</span>
              </div>
            </div>
            <div className={styles.pillar}>
              <div className={styles.pillarIcon}>❤️</div>
              <div>
                <strong>A Taste of Nostalgia</strong>
                <span>Experience the true flavors of South India</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>
  );
}
