// Logos + testimonial bar (real logos as user confirmed).
const Proof = () => {
  const logos = [
    { src: "https://reqscan.com/images/logos/gravity.png", alt: "Gravity Diagnostics" },
    { src: "https://reqscan.com/images/logos/womens.png", alt: "Women's Care" },
    { src: "https://reqscan.com/images/logos/delfi.png", alt: "Delfi Diagnostics" },
    { src: "https://reqscan.com/images/logos/avero.png", alt: "Avero Diagnostics" },
    { src: "https://reqscan.com/images/logos/sonora.png", alt: "Sonora Quest Laboratories" },
    { src: "https://reqscan.com/images/logos/c2n.png", alt: "C2N Diagnostics" },
  ];
  return (
    <section className="section-tight" style={{ borderTop: "1px solid var(--line)", background: "var(--bg-soft)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 28, fontSize: 12.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", fontWeight: 600 }}>
          Used by diagnostic labs and healthcare ops teams
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 48, alignItems: "center", justifyContent: "center", marginBottom: 48 }}>
          {logos.map((l) => (
            <img key={l.alt} src={l.src} alt={l.alt} style={{ height: 28, opacity: 0.7, filter: "grayscale(1)" }}/>
          ))}
        </div>
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center", padding: "24px 32px", borderTop: "1px solid var(--line)" }}>
          <p style={{ fontSize: 20, lineHeight: 1.45, letterSpacing: "-0.015em", margin: 0, fontWeight: 450 }}>
            "Reqscan cut our data entry time by 95% and eliminated transcription errors. We now process twice the volume with the same staff."
          </p>
          <div style={{ marginTop: 14, fontSize: 13, color: "var(--ink-4)" }}>
            Priya Sharma · Lab Manager, Avero Diagnostics
          </div>
        </div>
      </div>
    </section>
  );
};

window.Proof = Proof;