// StatBand.jsx — impact stats on dark forest-green surface
function LDStatBand() {
  const stats = [
    { v: "Real", u: " dates", l: "Customers see exactly when their order will arrive", note: "No vague “2–5 day” promises" },
    { v: "Less", u: " drop-off", l: "A clear delivery date can ease checkout hesitation", note: "" },
    { v: "On", u: "-time", l: "Sell only the slots you can actually deliver", note: "" },
    { v: "Same", u: "-day", l: "Up and running the afternoon you install", note: "" },
  ];
  return (
    <section style={{
      background: "var(--ld-dark)",
      color: "#fff",
      padding: "96px 0",
      position: "relative", overflow: "hidden",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(600px 400px at 90% 10%, rgba(255,214,10,0.20), transparent 60%)",
      }}/>
      <div className="ld-container-wide" style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
          <div style={{ maxWidth: 540 }}>
            <span className="ld-eyebrow" style={{ color: "var(--ld-yellow)" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ld-yellow)", display: "inline-block" }}/>
              Why it works
            </span>
            <h2 className="ld-h2" style={{ color: "#fff", marginTop: 16, letterSpacing: "-1.6px" }}>
              Faster delivery sells more.
            </h2>
          </div>
          <p className="ld-body" style={{ color: "rgba(255,255,255,0.7)", maxWidth: 380, margin: 0 }}>
            Offering a real date — not a vague “2–5 day” promise — is one of the simplest ways local merchants can win more online orders.
          </p>
        </div>

        <div className="ld-grid-4" style={{ gap: 0 }}>
          {stats.map((s, i) => (
            <div key={s.l} style={{
              padding: "0 28px",
              borderLeft: i > 0 ? "1px solid rgba(255,255,255,0.10)" : "none",
            }}>
              <div style={{ fontWeight: 900, fontSize: 64, letterSpacing: "-2.4px", lineHeight: 1, color: "#fff" }}>
                {s.v}<span style={{ fontSize: 28, fontWeight: 500, color: "var(--ld-yellow)", marginLeft: 2 }}>{s.u}</span>
              </div>
              <div style={{ fontSize: 15, fontWeight: 700, color: "#fff", marginTop: 16, letterSpacing: "-0.2px" }}>
                {s.l}
              </div>
              <div className="ld-mono" style={{ color: "rgba(255,255,255,0.5)", marginTop: 8, fontSize: 11, letterSpacing: "0.4px", textTransform: "none" }}>
                {s.note}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.LDStatBand = LDStatBand;