// Flow: 3-step config_code

function Flow({ ctx }) {
  const { t } = ctx;
  const steps = [
    { n: "01", title: t.flow.step1Title, body: t.flow.step1Body },
    { n: "02", title: t.flow.step2Title, body: t.flow.step2Body },
    { n: "03", title: t.flow.step3Title, body: t.flow.step3Body },
  ];
  return (
    <section id="flow" style={{ padding: "96px 0", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <SectionHeader kicker={t.flow.kicker} title={t.flow.title1} subtitle={t.flow.title2} body={t.flow.body} subtitleNoWrap/>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginBottom: 48 }}>
          {steps.map(s => (
            <div key={s.n} style={{ border: "1px solid var(--line)", borderRadius: 14, padding: 28, background: "var(--bg-2)" }}>
              <div className="mono" style={{ fontSize: 12, color: "var(--accent)", marginBottom: 18, letterSpacing: 0.08 }}>{s.n}</div>
              <h3 style={{ fontSize: 22, fontWeight: 500, margin: "0 0 10px 0", letterSpacing: -0.01 }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: "var(--ink-2)", margin: 0, lineHeight: 1.55 }}>{s.body}</p>
            </div>
          ))}
        </div>
        <div style={{
          background: "var(--ink)", color: "var(--bg)", borderRadius: 14, padding: "28px 32px",
          display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap",
        }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: 0.08 }}>
            {t.flow.codeLabel}
          </div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 22, letterSpacing: 0.04, flex: 1, minWidth: 220 }}>
            WW-8F3K-X9A2-QZ
          </div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>{t.flow.codeHelp}</div>
        </div>
      </div>
    </section>
  );
}
window.Flow = Flow;