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

export default function StorySection() {
  return (
    <section id="about" className={styles.section}>
      <div className={styles.container}>
        <div className={styles.grid}>
          {/* Left - Images */}
          <div className={styles.collageWrap}>
            <div className={styles.collageBg}>
              {/* Photo 1 - Top left, tilted left */}
              <div className={`${styles.polaroid} ${styles.polaroid1}`}>
                <div className={styles.polaroidInner}>
                  <Image
                    src="/images/hero-dosa.png"
                    alt="Golden crispy dosa"
                    width={280}
                    height={220}
                    className={styles.polaroidImg}
                  />
                </div>
              </div>

              {/* Photo 2 - Top center, slight right tilt */}
              <div className={`${styles.polaroid} ${styles.polaroid2}`}>
                <div className={styles.polaroidInner}>
                  <Image
                    src="/images/story-heritage.png"
                    alt="Chef preparing dosa"
                    width={260}
                    height={200}
                    className={styles.polaroidImg}
                  />
                </div>
              </div>

              {/* Photo 3 - Bottom right */}
              <div className={`${styles.polaroid} ${styles.polaroid3}`}>
                <div className={styles.polaroidInner}>
                  <Image
                    src="/images/sambar.png"
                    alt="Authentic sambar"
                    width={240}
                    height={190}
                    className={styles.polaroidImg}
                  />
                </div>
              </div>

              {/* Photo 4 - Bottom center, wide */}
              <div className={`${styles.polaroid} ${styles.polaroid4}`}>
                <div className={styles.polaroidInner}>
                  <Image
                    src="/images/crispy-masala.png"
                    alt="Crispy masala dosa"
                    width={300}
                    height={200}
                    className={styles.polaroidImg}
                  />
                </div>
              </div>

              {/* Heritage badge */}
              <div className={styles.badge}>
                <span className={styles.badgeNumber}>100%</span>
                <span className={styles.badgeText}>Authentic South Indian<br/>Pure Vegetarian</span>
              </div>
            </div>
          </div>

          {/* Right - Content */}
          <div className={styles.content}>
            <p className={styles.sectionTag}>— A Taste of Home</p>
            <h2 className={styles.title}>Welcome to My Dosa Place</h2>
            <p className={styles.description}>
              For those missing the vibrant, comforting kitchens of Tamil Nadu and Karnataka, 
              My Dosa Place brings the warmth and nostalgia of back home right to Waterloo. 
              We are a pure vegetarian haven dedicated to uncompromised, traditional South Indian flavors.
            </p>
            <p className={styles.description}>
              Every dosa is crafted with love using timeless recipes passed down through generations. 
              We stone-grind our batter fresh every day—allowing it to ferment naturally—to ensure 
              you get that perfect, healthy, golden-crisp crepe every single time.
            </p>

            <div className={styles.stats}>
              <div className={styles.statItem}>
                <span className={styles.statNumber}>Authentic</span>
                <span className={styles.statLabel}>Recipes</span>
              </div>
              <div className={styles.statDivider}></div>
              <div className={styles.statItem}>
                <span className={styles.statNumber}>15K+</span>
                <span className={styles.statLabel}>Happy Customers</span>
              </div>
              <div className={styles.statDivider}></div>
              <div className={styles.statItem}>
                <span className={styles.statNumber}>4.9</span>
                <span className={styles.statLabel}>Google Rating</span>
              </div>
            </div>

            <a href="#menu" className={styles.btnExplore}>
              Explore Our Heritage →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}