function Metrics() {
  const stats = [
    { v: "100%", k: "of inbound calls answered", sub: "0 missed · 0 voicemail" },
    { v: "1.4s", k: "median pickup time", sub: "Day or night" },
    { v: "+23%", k: "appointments booked", sub: "Pilot avg, first 60 days" },
    { v: "−38%", k: "no-show rate", sub: "Vs. prior 90-day baseline" },
  ];
  return (
    <section className="metrics section">
      <div className="container">
        <div className="metrics__head">
          <span className="eyebrow">What changes in the first 30 days</span>
          <h2 className="display h-md">ROI shows up <span className="serif">in your first month.</span></h2>
        </div>
        <div className="metrics__grid">
          {stats.map((s, i) => (
            <div key={i} className="metrics__cell">
              <div className="metrics__v">{s.v}</div>
              <div className="metrics__k">{s.k}</div>
              <div className="metrics__sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .metrics__head { display:flex; flex-direction:column; gap:12px; margin-bottom: 56px; }
        .metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .metrics__cell { padding: 40px 28px 40px 0; border-right: 1px solid var(--line); }
        .metrics__cell:not(:first-child) { padding-left: 28px; }
        .metrics__cell:last-child { border-right: 0; padding-right: 0; }
        .metrics__v { font-size: clamp(56px, 7vw, 96px); font-weight: 400; letter-spacing: -0.04em; color: var(--ink-900); line-height: 0.95; margin-bottom: 24px; font-family: var(--font-sans); }
        .metrics__k { font-size: 16px; color: var(--ink-800); margin-bottom: 6px; max-width: 22ch; }
        .metrics__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
        @media (max-width: 900px) {
          .metrics__grid { grid-template-columns: 1fr 1fr; }
          .metrics__cell:nth-child(2) { border-right: 0; }
          .metrics__cell:nth-child(3),.metrics__cell:nth-child(4) { border-top: 1px solid var(--line); }
        }
      `}</style>
    </section>
  );
}
window.Metrics = Metrics;