// How it works — three layout options
const STEPS = [
  { n: "01", t: "Tell us your table.", b: "Skill level, which NMJL card you play, when you're free. A profile that reads like a proper introduction." },
  { n: "02", t: "We find your four.", b: "Hosts and players matched by neighborhood, skill, and the kind of evening you want — lively, studied, or somewhere in between." },
  { n: "03", t: "Reserve your seat.", b: "Pick a game. Confirm with one tap. The host sees your name. The group text is done." },
  { n: "04", t: "Show up. Play well.", b: "Reviews afterward. Standing invitations for the ones that clicked. A calendar that slowly fills itself." },
];

const How = ({ layout = "editorial" }) => (
  <section className="how section-pad" id="how-it-works">
    <div className="container">
      <div className="how__head">
        <div>
          <Eyebrow>Sign up · match · play</Eyebrow>
          <h2 className="sec-title">How it works.<br />Four steps. Nothing gimmicky.</h2>
        </div>
        <p className="lede">
          We run this like a well-kept reservation book — quiet, specific, and
          respectful of your Sunday. No feeds, no swiping, no "discover."
        </p>
      </div>

      <div className={`how__steps ${layout}`}>
        {STEPS.map((s, i) => {
          if (layout === "stacked") return (
            <Reveal key={s.n} delay={i * 80}>
              <div className="step--stacked">
                <div className="step__num">{s.n}</div>
                <h3 className="step__title">{s.t}</h3>
                <p className="step__body">{s.b}</p>
              </div>
            </Reveal>
          );
          if (layout === "cards") return (
            <Reveal key={s.n} delay={i * 80}>
              <div className="step--card">
                <div className="step__num">{s.n}</div>
                <hr className="step__rule" />
                <h3 className="step__title">{s.t}</h3>
                <p className="step__body">{s.b}</p>
              </div>
            </Reveal>
          );
          return (
            <Reveal key={s.n} delay={i * 80}>
              <div className="step">
                <div className="step__num">{s.n}</div>
                <hr className="step__rule" />
                <h3 className="step__title">{s.t}</h3>
                <p className="step__body">{s.b}</p>
              </div>
            </Reveal>
          );
        })}
      </div>
    </div>
  </section>
);

Object.assign(window, { How });