// How it works — four steps
function How({ t }) {
  const narrow = window.useNarrow(768);
  return (
    <Section id="how" style={{ background: "var(--bg-2)" }}>
      <SectionHead kicker={t.kicker} title={t.title} sub={t.sub}/>
      <div style={{
        display: "grid",
        gridTemplateColumns: narrow ? "minmax(0,1fr)" : "repeat(4, minmax(0, 1fr))",
        gap: 1,
        background: "var(--rule)",
        border: "1px solid var(--rule)",
        marginTop: 32,
      }}>
        {t.steps.map((s, i) => (
          <Step key={i} s={s} last={i === t.steps.length - 1} short={narrow}/>
        ))}
      </div>
    </Section>
  );
}

function Step({ s, last, short }) {
  return (
    <div style={{
      background: "var(--paper)",
      padding: "32px 28px 36px",
      position: "relative",
      minHeight: short ? 220 : 280,
      display: "flex", flexDirection: "column",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 28 }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em" }}>{s.num}</span>
        <span className="mono" style={{
          fontSize: 10, color: "var(--accent)",
          padding: "2px 6px", background: "var(--accent-soft)",
          borderRadius: 3, letterSpacing: "0.08em",
        }}>{s.code}</span>
      </div>
      <h3 className="serif" style={{
        fontSize: 28, lineHeight: 1.1, margin: "0 0 12px",
        fontWeight: 400, letterSpacing: "-0.015em",
      }}>{s.title}</h3>
      <p style={{ margin: 0, fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, textWrap: "pretty" }}>{s.body}</p>

      {!last && (
        <span aria-hidden style={{
          position: "absolute", right: -7, top: "50%", transform: "translateY(-50%)",
          width: 14, height: 14, borderRadius: "50%",
          background: "var(--paper)", border: "1px solid var(--rule)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--ink-3)", fontSize: 11, zIndex: 2,
        }}>›</span>
      )}
    </div>
  );
}

window.How = How;