// How it works — Golden Hour room.
function HowItWorks() {
  const steps = [
    {
      n: "01",
      verb: "Message us",
      title: "Order in three minutes",
      body: "Tell us your protocol and where to send it. No medical history, no signup wall."
    },
    {
      n: "02",
      verb: "We deliver",
      title: "Your prep kit arrives same-day",
      body: "Sterile, sealed, right-sized for your cycle. Printed guides and digital walkthrough included."
    },
    {
      n: "03",
      verb: "Reorder when ready",
      title: "Monthly refills, on cycle",
      body: "Fresh supplies land before the last ones run out. Sized to your protocol, delivered every 30 days."
    }
  ];

  return (
    <section id="how" style={{ background: "var(--paper)" }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 56 }}>
          <h2 className="display section-title">Order → Prep kit → Monthly refills.</h2>
          <p className="section-sub">
            Three steps. You handle the protocol. We handle the rest.
          </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: 16px;
          background: var(--white);
          border: 1px solid var(--line);
          box-shadow: 0 2px 12px rgba(0,0,0,0.06);
          min-height: 220px;
        }
        .how-step:nth-child(2) { background: var(--honey); border-color: var(--honey); }
        .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 });