import styles from './ServiceProcess.module.css';

const steps = [
  {
    step: '01',
    title: 'Choose Your Service',
    desc: 'Browse our dine-in, takeout, catering, or festival options and pick what fits your occasion best.',
    icon: '🔍',
  },
  {
    step: '02',
    title: 'Get in Touch',
    desc: 'For catering and events, reach out via our contact form or call us. For dine-in and takeout, just show up or order online.',
    icon: '📞',
  },
  {
    step: '03',
    title: 'We Plan Together',
    desc: 'Our team works with you on menu selection, portions, timing, and any dietary requirements — nothing is too much trouble.',
    icon: '📋',
  },
  {
    step: '04',
    title: 'Enjoy the Experience',
    desc: 'Whether at our table or yours, sit back and enjoy genuinely authentic South Indian food made with care.',
    icon: '🎉',
  },
];

export default function ServiceProcess() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.header}>
          <span className={styles.eyebrow}>
            <span className={styles.eyebrowIcon}>⚙️</span> How It Works
          </span>
          <h2 className={styles.title}>
            Simple Steps to <em>Great Food</em>
          </h2>
          <p className={styles.lead}>
            Whether you're booking a table for two or catering a 200-person wedding, here's how 
            working with My Dosa Place looks.
          </p>
        </div>

        <div className={styles.steps}>
          {steps.map((s, i) => (
            <div key={i} className={styles.step}>
              <div className={styles.stepTop}>
                <div className={styles.stepIcon}>{s.icon}</div>
                {i < steps.length - 1 && <div className={styles.connector} />}
              </div>
              <span className={styles.stepNum}>{s.step}</span>
              <h3 className={styles.stepTitle}>{s.title}</h3>
              <p className={styles.stepDesc}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
