/* Stat strip — a Quiet hero panel with four big numbers in gradient text.
 * "Numbers carry the brand." */

function StatStrip() {
  const stats = [
    { num: "5:1",    label: "Clients per technician — by design" },
    { num: "2.1h",   label: "Average response time, Q3 2026" },
    { num: "99.1%",  label: "SLA met across managed estates" },
    { num: "240",    label: "Endpoints patched, last month alone" },
  ];

  return (
    <section
      id="results"
      style={{
        position: "relative",
        background: "var(--bg-hero-quiet)",
        color: "var(--fg-inverse)",
        padding: "112px 0",
        overflow: "hidden",
      }}
    >
      <Container>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end",
                      marginBottom: 64, flexWrap: "wrap", gap: 24 }}>
          <div style={{ maxWidth: 640 }}>
            <Eyebrow number="03" color="var(--ri-pink)">A quiet quarter</Eyebrow>
            <h2 style={{
              fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.04,
              letterSpacing: "-0.02em", fontWeight: 700, margin: 0,
            }}>
              The numbers,<br/>not the noise.
            </h2>
          </div>
          <p style={{
            maxWidth: 380, fontSize: 16, lineHeight: 1.55,
            color: "rgba(245,245,247,0.7)", margin: 0,
          }}>
            We publish the things that matter to the businesses we serve —
            response times, ticket throughput, security posture — every
            quarter, in plain English.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24,
        }} className="ri-stats-grid">
          {stats.map((s) => (
            <StatTile key={s.label} num={s.num} label={s.label} />
          ))}
        </div>
      </Container>

      {/* 22 px brand bar (the Quiet hero's signature) */}
      <BrandBar height={22} style={{ position: "absolute", left: 0, right: 0, bottom: 0 }} />

      <style>{`
        @media (max-width: 1024px) {
          .ri-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 540px) {
          .ri-stats-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function StatTile({ num, label }) {
  return (
    <div style={{
      borderTop: "1px solid rgba(255,255,255,0.10)",
      paddingTop: 22,
    }}>
      <div style={{
        fontSize: 84, fontWeight: 800, letterSpacing: "-0.04em",
        lineHeight: 0.9,
        background: "var(--grad-brand)",
        WebkitBackgroundClip: "text", backgroundClip: "text",
        WebkitTextFillColor: "transparent",
      }}>{num}</div>
      <div style={{
        marginTop: 18, fontSize: 14, lineHeight: 1.5,
        color: "rgba(245,245,247,0.65)",
      }}>{label}</div>
    </div>
  );
}

Object.assign(window, { StatStrip });