// Process — oversized step numbers, the second bold moment
function HpProcess({ bg }) {
  const steps = [
    { n: "01", t: "Vet",   d: "We audit your offer. EPCs, refund rate, funnel math, network fit. We tell you straight whether we'll run it." },
    { n: "02", t: "Build", d: "Angles, advertorials, VSL hooks, lander variants, tracking. We build the test stack before a dollar of spend." },
    { n: "03", t: "Test",  d: "Volume testing across native, Meta, search, YouTube. We find the profitable angle in days, not quarters." },
    { n: "04", t: "Scale", d: "Once it's profitable, we open the spend. Daily caps, fraud filters, daily sync. You see what we see." },
  ];
  return (
    <section id="process" className="hp-section" style={{ background: bg }}>
      <div className="hp-container">
        <div className="hp-eyebrow-row">
          <span className="eyebrow" style={{ borderBottom: "1px solid var(--coral)", paddingBottom: 2 }}>How we work</span>
          <span className="eyebrow hp-hide-sm">Four steps · 2 weeks to test, 30 days to scale</span>
        </div>
        <div className="hp-process">
          {steps.map(s => (
            <div key={s.n} className="hp-step">
              <div className="hp-step-num">{s.n}</div>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24,
                letterSpacing: "-0.03em", color: "var(--ink)", marginBottom: 14,
              }}>{s.t}</div>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 15,
                lineHeight: 1.55, color: "var(--ink-700)", margin: 0, maxWidth: "32ch",
                letterSpacing: "-0.01em",
              }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HpProcess = HpProcess;