const How = ({ onRequest }) => {
  const steps = t("how.steps");

  return (
    <section id="how">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">{t("how.eyebrow")}</span>
          <h2>{t("how.title")}</h2>
          <p>{t("how.intro")}</p>
        </div>

        <div className="grid-4" style={{ position: "relative" }}>
          {steps.map((s, i) => {
            const C = Icon[s.ic];
            return (
              <div key={s.n} className="card card-soft" style={{ display: "grid", gap: 16 }}>
                <div style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                }}>
                  <span style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: "calc(12px * var(--scale))",
                    color: "var(--accent-2)",
                    fontWeight: 600,
                    letterSpacing: ".08em",
                  }}>{s.n}</span>
                  <div style={{
                    width: 40, height: 40, borderRadius: 999,
                    background: "var(--accent-soft)", color: "var(--accent-ink)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}><C size={20}/></div>
                </div>
                <h3 style={{ fontSize: "calc(20px * var(--scale))", fontWeight: 700, letterSpacing: "-0.02em" }}>{s.t}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: "calc(15px * var(--scale))", lineHeight: 1.55 }}>{s.d}</p>
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: "center", marginTop: 48 }}>
          <button className="btn btn-mint btn-large" onClick={onRequest}>
            {t("how.cta")} <Icon.arrow size={20}/>
          </button>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { How });