/* How it works — three steps from signup to first shipment */

function Steps({ t }) {
  const icons = [Icons.storefront, Icons.network, Icons.radar];
  return (
    <section className="steps section" id="how">
      <div className="container">
        <div className="steps-head reveal">
          <span className="eyebrow"><span className="dot"></span>{t.steps.eyebrow}</span>
          <h2 className="section-title" style={{ marginTop: 16 }}>
            {t.steps.title_1}<em>{t.steps.title_em}</em>
          </h2>
          <p className="section-subtitle" style={{ marginTop: 16 }}>{t.steps.sub}</p>
        </div>

        <ol className="steps-track reveal-stagger">
          <svg className="steps-route" viewBox="0 0 100 4" preserveAspectRatio="none" aria-hidden="true">
            <path d="M8 2 H92" />
          </svg>
          {t.steps.items.map((s, i) => (
            <li key={i} className="step">
              <span className="step-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="step-icon">{icons[i]}</span>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-body">{s.body}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

window.Steps = Steps;