// How it works — three steps, max. No injection tutorial here; that lives in the booklet.
function HowItWorks() {
  const steps = [
    {
      n: "01",
      verb: "Order",
      title: "Order",
      body: "Three minutes. Tell us where to send it. No medical history, no signup wall."
    },
    {
      n: "02",
      verb: "Welcome kit ships next day",
      title: "Welcome kit ships next day",
      body: "Twelve objects in a linen-wrapped box. Practice on the pad. Read the booklet. Take your time."
    },
    {
      n: "03",
      verb: "Monthly refills, same-day Bangkok delivery",
      title: "Monthly refills",
      body: "Right-sized pouch each month. Same-day in Bangkok. Pause or skip when you want."
    }
  ];

  return (
    <section id="how">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 56 }}>
          <h2 className="display section-title">Order → Welcome kit → Monthly refills.</h2>
          <p className="section-sub">
            Three steps. That's the whole thing.
          </p>
        </div>

        <ol className="how-steps">
          {steps.map((s, i) => (
            <li key={i} className="how-step">
              <div className="how-step-bar">
                <span className="how-num mono">{s.n}</span>
                <span className="how-line" />
              </div>
              <div className="how-step-body">
                <h3 className="display how-title">{s.title}</h3>
                <p className="how-body-text">{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>

      <style>{`
        .how-steps {
          list-style: none;
          padding: 0;
          margin: 0;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
        }
        .how-step {
          display: flex;
          flex-direction: column;
          gap: 20px;
          padding: 28px;
          border-radius: 18px;
          background: var(--white);
          border: 1px solid var(--line);
          min-height: 220px;
        }
        .how-step:nth-child(2) { background: var(--accent-soft); }
        .how-step-bar { display: flex; align-items: center; gap: 12px; }
        .how-num {
          font-size: 12px;
          letter-spacing: 0.16em;
          color: var(--accent-deep);
          font-weight: 600;
        }
        .how-line { flex: 1; height: 1px; background: var(--line); }
        .how-title {
          font-size: clamp(22px, 2.4vw, 30px);
          line-height: 1.15;
          margin: 0;
        }
        .how-body-text {
          margin: 0;
          font-size: 14.5px;
          color: var(--ink-3);
          line-height: 1.55;
        }
        @media (max-width: 860px) {
          .how-steps { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { HowItWorks });