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

export default function ProcessSection() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.grid}>
          {/* Left - Dark Green Card with Overlapping Image */}
          <div className={styles.leftCard}>
            <div className={styles.cardContent}>
              <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>⚙️</span> Our Process
          </span>
          <h2 className={styles.cardTitle}>
            How We Make It <em>Perfect</em>
          </h2>
              <p className={styles.cardDescription}>
                Born from a passion for preserving the culinary heritage of South India, My Dosa Place brings authentic flavors from the kitchens of Tamil Nadu and Karnataka right to Waterloo.
              </p>
              <a href="/menu" className={styles.btnExplore}>
                Explore Menu
              </a>
            </div>
            <div className={styles.cardImageWrap}>
              <Image
                src="/images/south-indian-thali.png"
                alt="South Indian Spread"
                width={400}
                height={400}
                className={styles.cardImage}
              />
            </div>
          </div>

          {/* Right - Text Content */}
          <div className={styles.rightContent}>
            {/* <div className={styles.stepCircle}>1</div> */}
            <h3 className={styles.rightTitle}>Authentic Flavors Prepared Specially for You</h3>
            <p className={styles.rightDescription}>
              Every dosa is crafted with love using traditional recipes passed down through generations. We source the finest ingredients and grind our own batter fresh every day to ensure that perfect crispy, golden crepe. Experience the true taste of tradition in every bite.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
