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

export default function ExperienceSection() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.grid}>
          {/* Left - Image Collage */}
          <div className={styles.imageCol}>
            <div className={styles.collageWrap}>

              {/* Decorative element - top left: leaf/spice SVG */}
              <div className={styles.decorativeTop}>
                <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" width="80" height="80">
                  <path d="M40 5 C10 5 5 40 5 40 C5 40 20 75 40 75 C60 75 75 40 75 40 C75 40 70 5 40 5Z" fill="var(--color-primary)" fillOpacity="0.15" stroke="var(--color-primary)" strokeWidth="1.5" strokeOpacity="0.4"/>
                  <path d="M40 15 C40 15 40 65 40 65" stroke="var(--color-primary)" strokeWidth="1.5" strokeOpacity="0.5" strokeDasharray="3 3"/>
                  <path d="M40 30 C30 25 18 28 15 35" stroke="var(--color-primary)" strokeWidth="1" strokeOpacity="0.4"/>
                  <path d="M40 42 C50 37 62 40 65 47" stroke="var(--color-primary)" strokeWidth="1" strokeOpacity="0.4"/>
                  <path d="M40 20 C32 18 24 22 22 28" stroke="var(--color-primary)" strokeWidth="1" strokeOpacity="0.35"/>
                </svg>
              </div>

              <div className={styles.imgLarge}>
                <Image 
                  src="/images/story-heritage.png" 
                  alt="Chefs cooking" 
                  fill 
                  className={styles.image}
                />
              </div>
              
              <div className={styles.imgSmallBottom}>
                <Image 
                  src="/images/sambar.png" 
                  alt="Authentic dishes" 
                  fill 
                  className={styles.image}
                />
              </div>
              
              <div className={styles.imgSmallLeft}>
                <Image 
                  src="/images/crispy-masala.png" 
                  alt="Making dosa" 
                  fill 
                  className={styles.image}
                />
              </div>
              
              <div className={styles.experienceBadge}>
                <span className={styles.badgeNumber}>25</span>
                <span className={styles.badgeText}>Years Experience</span>
              </div>

              {/* Decorative element - bottom right: dosa/plate SVG */}
              <div className={styles.decorativeBottom}>
                <svg viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" width="70" height="70">
                  <circle cx="35" cy="35" r="30" stroke="var(--color-primary)" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="4 3"/>
                  <circle cx="35" cy="35" r="22" stroke="var(--color-primary)" strokeWidth="1" strokeOpacity="0.2"/>
                  <circle cx="35" cy="35" r="8" fill="var(--color-primary)" fillOpacity="0.12"/>
                  <path d="M20 35 Q35 20 50 35" stroke="var(--color-primary)" strokeWidth="1.2" strokeOpacity="0.35"/>
                  <path d="M22 40 Q35 52 48 40" stroke="var(--color-primary)" strokeWidth="1.2" strokeOpacity="0.35"/>
                </svg>
              </div>

            </div>
          </div>

          {/* Right - Content */}
          <div className={styles.contentCol}>
            {/* <span className={styles.tag}>About Our Heritage</span> */}
            <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>👨‍🍳</span> Our Heritage
          </span>
          <h2 className={styles.title}>
            Experience &amp; Expertise in <em>Authentic Cuisine</em>
          </h2>
            <p className={styles.description}>
              Born from a deep passion for preserving South Indian culinary traditions, our restaurant brings you the true essence of heritage cooking. Every dish we serve is a testament to our decades of experience in crafting perfect, authentic flavors.
            </p>

            <div className={styles.featureCards}>
              <div className={`${styles.featureCard} ${styles.cardSolid}`}>
                <div className={styles.iconWrap}>
                  <span className={styles.icon}>👨‍🍳</span>
                </div>
                <div className={styles.cardContent}>
                  <h4 className={styles.cardTitle}>Passionate Chefs</h4>
                  <p className={styles.cardDesc}>
                    Our master chefs have spent years perfecting the art of traditional South Indian cooking, bringing authentic recipes to life.
                  </p>
                </div>
              </div>

              <div className={`${styles.featureCard} ${styles.cardOutline}`}>
                <div className={styles.iconWrap}>
                  <span className={styles.icon}>🌿</span>
                </div>
                <div className={styles.cardContent}>
                  <h4 className={styles.cardTitle}>Authentic Ingredients</h4>
                  <p className={styles.cardDesc}>
                    We source the finest spices directly from India and prepare our signature batters fresh every single day.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
