// Named testimonial — editorial pull-quote treatment.
// No silhouette avatar; uses a typographic monogram tile + verification + org logotype.
const Testimonial = () => {
  return (
    <section className="section" style={{ paddingTop: 24, paddingBottom: 24 }}>
      <div className="container">
        <div className="card" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "minmax(280px, 360px) 1fr" }}>

          {/* LEFT RAIL — provenance */}
          <div style={{
            background: "var(--green-ink)",
            color: "#fff",
            padding: "40px 36px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            gap: 32,
            position: "relative",
            overflow: "hidden",
          }}>
            {/* Subtle grid texture */}
            <div aria-hidden style={{
              position: "absolute", inset: 0,
              backgroundImage: "linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)",
              backgroundSize: "24px 24px",
              maskImage: "radial-gradient(ellipse at top right, rgba(0,0,0,0.6), transparent 70%)",
              pointerEvents: "none",
            }}/>

            {/* Top: company logo + role block */}
            <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 24 }}>
              <LynxLogo />

              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <Stars />
                <span style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em", marginTop: 6, lineHeight: 1.25 }}>Chief Technology<br/>Officer</span>
                <span style={{ fontSize: 13, color: "rgba(255,255,255,0.65)", lineHeight: 1.45, marginTop: 4 }}>Lynx Dx</span>
              </div>
            </div>

            {/* Bottom: stats */}
            <div style={{ position: "relative" }}>
              <div style={{ display: "flex", gap: 22, paddingTop: 22, borderTop: "1px solid rgba(255,255,255,0.12)" }}>
                <Stat n="11m → <60s" l="per requisition"/>
                <Stat n="3× faster" l="LIMS turnaround"/>
              </div>
            </div>
          </div>

          {/* RIGHT — quote */}
          <div style={{
            padding: "56px 56px 56px 64px",
            display: "flex", flexDirection: "column", justifyContent: "center", gap: 24,
            position: "relative",
          }}>
            {/* Decorative oversized quote mark sitting in the corner */}
            <span aria-hidden style={{
              position: "absolute", top: 12, right: 32,
              fontFamily: "Caveat, cursive",
              fontSize: 180, lineHeight: 1, color: "var(--green-soft)",
              userSelect: "none", pointerEvents: "none",
            }}>"</span>

            <p style={{ fontSize: 23, lineHeight: 1.5, color: "var(--ink)", margin: 0, letterSpacing: "-0.012em", fontWeight: 450, position: "relative", maxWidth: 620 }}>
              Every MPS2 order arrives with a stack of urology requisitions, prior-auth forms, and handwritten clinical notes. Our lab techs were re-typing the same patient demographics three times before a sample even reached the bench. Reqscan put the structured order into our LIMS in under a minute — we cut order-entry from <strong style={{ color: "var(--green-ink)", fontWeight: 600 }}>11 minutes</strong> to <strong style={{ color: "var(--green-ink)", fontWeight: 600 }}>under 60 seconds</strong> per requisition.
            </p>
            <div style={{ fontSize: 13, color: "var(--ink-4)", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", position: "relative" }}>
              <span>CAP-accredited diagnostics lab</span>
              <span style={{ color: "var(--ink-5)" }}>·</span>
              <span>Ann Arbor, MI</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Lynx Dx official logo — loaded as <img>, brightness-inverted for dark rail.
const LynxLogo = () => (
  <img
    src="assets/lynxdx-logo.svg"
    alt="Lynx Dx"
    style={{
      height: 38,
      width: "auto",
      filter: "brightness(0) invert(1)",
      opacity: 0.95,
    }}
  />
);

// 5-star rating, tonal mint not gold — fits the brand
const Stars = () => (
  <div style={{ display: "inline-flex", gap: 3, color: "#7fd4b9" }} aria-label="5 out of 5 stars">
    {[0,1,2,3,4].map(i => (
      <svg key={i} width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26"/>
      </svg>
    ))}
  </div>
);

const Stat = ({ n, l }) => (
  <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2, gap: 2 }}>
    <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.02em", color: "#fff" }}>{n}</span>
    <span style={{ fontSize: 11.5, color: "rgba(255,255,255,0.55)" }}>{l}</span>
  </div>
);

window.Testimonial = Testimonial;