// How It Works — a single calm full-bleed panel (fills the 100dvh home hijack)
// on a solid forest ground, the weekly cycle stated cleanly over it: a gold
// eyebrow, three steps (Cormorant heading + Jost line) laid evenly across, and
// the Discover cue. Steps stack on mobile.
const HOW_STEPS = [
  { h: "Order by Friday",          d: "Choose your week. Orders close Friday midnight." },
  { h: "Cooked Saturday",          d: "Prepared by hand, fresh on Saturday." },
  { h: "Delivered Sunday",         d: "Fresh to your door. The week, taken care of." },
];

function HowItWorks() {
  return (
    <section className="how-it snap-panel" data-screen-label="How It Works">
      <div className="how-it__inner">
        <span className="how-it__eyebrow">How It Works</span>
        <div className="how-it__steps">
          {HOW_STEPS.map((s, i) => (
            <div className="how-it__step" key={i}>
              <h3>{s.h}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <a className="how-beat__cue" href="index.html#whatis">Discover the Table &rarr;</a>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;