function HowItWorks({ onClaim }) {
  const steps = [
    { n: 1, t: 'What am I receiving in the packet?', d: "Open the envelope and pour the dehydrated starter flakes into a clean jar. You're ready to activate once you have flour, warm water, and a loose cover.", img: 'step-1.webp' },
    { n: 2, t: 'How do I wake up the dehydrated starter?', d: 'Mix the flakes with warm water and flour, stir well, and cover loosely. Let it rest at room temp — your first bubbles usually show within 12–24 hours.', img: 'step-2.webp' },
    { n: 3, t: 'How do I know my starter is active?', d: 'Feed it again on the schedule (discard if needed), keeping the jar warm. In 24–48 hours you should see bubbles, a tangy aroma, and noticeable rise (often doubling).', img: 'step-3.webp' },
    { n: 4, t: 'When can I bake my first loaf?', d: 'Bake when your starter reliably rises after a feeding (ideally doubles within 4–8 hours). Use it to mix dough, let it ferment overnight, shape, proof, and bake.', img: 'step-4.webp' },
  ];
  return (
    <section className="how">
      <style>{`
        .how { padding: 72px var(--gutter) 88px; background: var(--color-bg-warm); border-top: 1px solid var(--color-line-faint); border-bottom: 1px solid var(--color-line-faint); }
        .how-head { text-align: center; margin-bottom: 48px; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
        .how-head h2 { max-width: 22ch; margin: 0 auto; }
        .how-head .sub { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; color: var(--color-text-muted); }
        .how-grid { display: grid; gap: 32px 28px; grid-template-columns: 1fr; max-width: 1080px; margin: 0 auto; }
        @media (min-width: 720px) { .how-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
        .step { display: flex; flex-direction: column; gap: 14px; }
        .step-img { aspect-ratio: 4/3; background-size: cover; background-position: center; border: 1px solid var(--color-line-faint); }
        .step-meta { display: flex; align-items: flex-start; gap: 12px; }
        .step-num { background: var(--color-primary); color: var(--color-bg-cream); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; flex-shrink: 0; }
        .step-text { display: flex; flex-direction: column; gap: 6px; }
        .step-text h3 { font-size: 18px; line-height: 1.3; }
        .step-text p { font-size: 14px; line-height: 1.55; color: var(--color-text-muted); margin: 0; }
        .how-cta { text-align: center; margin-top: 48px; }
      `}</style>
      <div className="how-head">
        <h2>How do I activate a dehydrated sourdough starter?</h2>
        <span className="sub">Ask. Stir. Wait. Bake.</span>
      </div>
      <div className="how-grid">
        {steps.map(s => (
          <div className="step" key={s.n}>
            <div className="step-img" style={{ backgroundImage: `url('${(window.__photoMap && window.__photoMap[s.img]) || `/assets/photos/${s.img}`}')` }} aria-hidden="true"></div>
            <div className="step-meta">
              <span className="step-num">{s.n}</span>
              <div className="step-text">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="how-cta"><button className="btn" onClick={onClaim}>Start For Free</button></div>
    </section>
  );
}
window.HowItWorks = HowItWorks;