/* NRTR — a quiet credibility strip. The clinical tools and equipment the
   practice is actually built on. Each is clickable: a calm popover explains
   what it is and, more importantly, why it earns its place here. */

const TRUST_TOOLS = [
  {
    name: "PNOĒ",
    sub: "Metabolic breath analysis",
    what: "A clinical breath-analysis platform that reads 23 biomarkers from a single test — VO₂ Max, resting metabolic rate, and biological age among them. The same class of system used by leading performance and recovery clinics.",
    why: "Your watch estimates; PNOĒ measures. We'd rather build your plan on real numbers than population averages — so the training and nutrition we recommend actually fit you.",
  },
  {
    name: "InBody",
    sub: "Body-composition scanning",
    what: "A medical-grade body-composition scan that separates lean mass, fat, and segmental balance in about sixty seconds — far beyond what a bathroom scale can tell you.",
    why: "Every physical-therapy plan needs an honest baseline. InBody gives us one to track real progress against, so recovery is measured, not guessed.",
  },
  {
    name: "Force Plates",
    sub: "Objective strength testing",
    what: "Dual force plates that measure ground-reaction force during jumps, squats, and single-leg tests — quantifying power, rate of force development, and left-to-right asymmetry down to the percent.",
    why: "It turns 'do you feel better?' into a number. We baseline you, track rehab objectively, and flag the side-to-side asymmetries that predict re-injury — so return-to-sport is a decision backed by data, not a hunch.",
  },
  {
    name: "Rogue",
    sub: "Functional training floor",
    what: "The gold-standard American strength brand — racks, rigs, turf, and free weights built to take a beating and last.",
    why: "Rehab that ends in real strength needs real equipment. We train you back to capacity, not just out of pain — and that takes a proper floor.",
  },
  {
    name: "MERV-13",
    sub: "Clinical air quality",
    what: "Hospital-tier air filtration paired with HEPA and balanced humidity control, capturing fine particles while keeping the air comfortable throughout the space.",
    why: "Recovery is about the whole environment. Clean, well-tempered air — filtered and fresh, with a comfortable touch of humidity rather than bone-dry — is part of the treatment here, not an afterthought bolted onto a gym.",
  },
  {
    name: "Finnish Cedar",
    sub: "Three-tier sauna",
    what: "A 30-person Finnish sauna hand-built in cedar with a three-tier bench, running a heat gradient from roughly 160°F at the lower tier to 190°F at the top.",
    why: "Cedar holds heat evenly and carries its own quiet scent — and the tiered bench lets you self-select intensity by where you sit, instead of one setting for every body.",
  },
  {
    name: "NormaTec",
    sub: "Dry recovery lounge",
    what: "Dynamic pneumatic compression boots in the recovery lounge — segmented sleeves pulse from the feet upward, mimicking the muscle pump to move fluid and metabolites out of tired legs. No water, no changing, no effort.",
    why: "It's the dry, sit-back half of recovery. Peer-reviewed trials on this exact pulsed-compression technology show reduced post-training soreness and improved range of motion — so it earns its place on evidence, not vibes.",
    links: [
      { label: "Sands et al., J. Strength & Conditioning Research (2015) — dynamic compression reduced soreness in elite athletes", href: "https://pubmed.ncbi.nlm.nih.gov/24531439/" },
      { label: "Sands et al., J. Strength & Conditioning Research (2014) — pulsed compression improved range of motion", href: "https://pubmed.ncbi.nlm.nih.gov/24077383/" },
    ],
  },
  {
    name: "Dry Needling",
    sub: "Therapist-performed",
    what: "Thin monofilament needles placed into myofascial trigger points by our licensed DPT to release taut muscle bands, calm referred pain, and restore range of motion.",
    why: "A precise, drug-free tool for stubborn muscular pain — and one that's clinician-delivered, not a machine you sit in. A systematic review and meta-analysis of randomized trials supports it for reducing myofascial pain.",
    links: [
      { label: "Kietrys et al., J. Orthopaedic & Sports Physical Therapy (2013) — dry needling reduces myofascial pain (systematic review & meta-analysis)", href: "https://pubmed.ncbi.nlm.nih.gov/23756457/" },
    ],
  },
];

function ToolModal({ tool, onClose }) {
  const dialogRef = React.useRef(null);
  const triggerRef = React.useRef(null);
  React.useEffect(() => {
    triggerRef.current = document.activeElement;
    const t = setTimeout(() => {
      if (dialogRef.current) {
        const btn = dialogRef.current.querySelector("button");
        if (btn) btn.focus();
      }
    }, 60);
    const onKey = (e) => {
      if (e.key === "Escape") { onClose(); return; }
      if (e.key === "Tab" && dialogRef.current) {
        const f = dialogRef.current.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"])');
        const list = Array.prototype.filter.call(f, (el) => el.offsetParent !== null);
        if (!list.length) return;
        const first = list[0], last = list[list.length - 1];
        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
      }
    };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      clearTimeout(t);
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
      if (triggerRef.current && triggerRef.current.focus) triggerRef.current.focus();
    };
  }, [onClose]);

  return (
    <div
      onClick={onClose}
      style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(32,24,15,0.72)", display: "flex", alignItems: "center", justifyContent: "center", padding: "20px", animation: "nrtrOverlayIn 220ms ease" }}
    >
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="tool-modal-title"
        onClick={(e) => e.stopPropagation()}
        style={{ width: "min(440px, 100%)", maxHeight: "90vh", overflowY: "auto", background: "var(--surface-raised)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)", border: "1px solid var(--line-soft)", padding: "clamp(24px, 6vw, 48px)", animation: "nrtrModalIn 320ms cubic-bezier(.16,1,.3,1)" }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "16px" }}>
          <div>
            <div style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-brand)", marginBottom: "8px" }}>{tool.sub}</div>
            <h3 id="tool-modal-title" style={{ margin: 0, fontSize: "28px" }}>{tool.name}</h3>
          </div>
          <button onClick={onClose} aria-label="Close" style={{ border: "none", background: "none", fontSize: "20px", cursor: "pointer", color: "var(--text-muted)", lineHeight: 1, flexShrink: 0 }}>✕</button>
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.65, color: "var(--text-body)", margin: "20px 0 0" }}>{tool.what}</p>
        <div style={{ marginTop: "22px", paddingTop: "20px", borderTop: "1px solid var(--line-soft)" }}>
          <div style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-brand)", marginBottom: "10px" }}>Why we offer it</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.65, color: "var(--text-muted)", margin: 0 }}>{tool.why}</p>
          {tool.links && (
            <div style={{ marginTop: "18px", display: "flex", flexDirection: "column", gap: "8px" }}>
              <div style={{ fontFamily: "var(--font-label)", fontSize: "10px", fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-brand)" }}>The research</div>
              {tool.links.map((k, i) => (
                <a key={i} href={k.href} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "baseline", gap: "8px", fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.45, color: "var(--terracotta)", textDecoration: "none" }}>
                  <span aria-hidden="true" style={{ flexShrink: 0 }}>↗</span>
                  <span style={{ borderBottom: "1px solid var(--line-soft)", paddingBottom: "1px" }}>{k.label}</span>
                </a>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function TrustRow() {
  const [active, setActive] = React.useState(null);
  return (
    <section style={{ background: "var(--surface-raised)", borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(36px,5vw,56px) var(--space-6)" }}>
        <div style={{ textAlign: "center", marginBottom: "28px" }}>
          <span style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>
            Clinical-grade, throughout
          </span>
        </div>
        <div
          data-reveal-group
          style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "flex-start", gap: "clamp(20px, 4vw, 56px)" }}
        >
          {TRUST_TOOLS.map((t) => (
            <button
              key={t.name}
              className="nrtr-tool"
              onClick={() => setActive(t)}
              aria-haspopup="dialog"
              style={{
                background: "none", border: "none", cursor: "pointer", padding: "8px 4px",
                textAlign: "center", minWidth: "112px", borderRadius: "var(--radius-sm)",
                font: "inherit", color: "inherit",
              }}
            >
              <div style={{ display: "inline-flex", alignItems: "baseline", gap: "6px" }}>
                <span className="nrtr-tool-name" style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.35rem, 2vw, 1.7rem)", color: "var(--text-strong)", letterSpacing: "-0.01em", lineHeight: 1 }}>{t.name}</span>
                <span aria-hidden="true" className="nrtr-tool-plus" style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--terracotta)", lineHeight: 1 }}>+</span>
              </div>
              <div style={{ fontFamily: "var(--font-label)", fontSize: "10px", fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-muted)", marginTop: "10px" }}>{t.sub}</div>
            </button>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: "22px", fontFamily: "var(--font-body)", fontSize: "14px", fontStyle: "italic", color: "var(--text-muted)" }}>
          Select any tool to see what it is — and why it's here.
        </div>
      </div>
      {active && <ToolModal tool={active} onClose={() => setActive(null)} />}
    </section>
  );
}

window.TrustRow = TrustRow;
