/* The Science page — the evidence base for contrast therapy, sauna, cold, and PT.
   Every figure below is drawn from the cited peer-reviewed source. Style objects
   are inline; no shared `styles` object (per naming rule). */
const { Button, Eyebrow } = window.NRTRDesignSystem_47db9c;

/* Thin wrapper over the shared Eyebrow so science headings share one source. */
function SciEyebrow({ children, onDark }) {
  return <Eyebrow tone={onDark ? "dark" : "light"} tracking="0.18em">{children}</Eyebrow>;
}

/* ---- How it works ---- */
function HowItWorks() {
  const cards = [
    { k: "Heat", temp: "160–190°F", head: "Vessels open", body: "Time in the Finnish sauna drives vasodilation — blood vessels widen and circulation rises, carrying oxygen and nutrients into muscle and soft tissue and raising its extensibility." },
    { k: "Cold", temp: "40–52°F", head: "Vessels close", body: "The plunge triggers vasoconstriction — vessels narrow, calming the inflammatory response and easing the swelling and soreness in the tissue you just worked." },
    { k: "The cycle", temp: "Repeat ×3–4", head: "The pump", body: "Alternating between the two creates a vascular pumping effect that moves more blood than either heat or cold achieves on its own. That pump is the point." },
  ];
  return (
    <section style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
        <SciEyebrow>How it works</SciEyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.08, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "16px 0 0", maxWidth: "18ch" }}>
          Heat opens. Cold closes. The cycle pumps.
        </h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.05rem,1.5vw,1.25rem)", lineHeight: 1.6, color: "var(--text-muted)", margin: "20px 0 0", maxWidth: "60ch" }}>
          Contrast therapy is the deliberate practice of alternating heat exposure and cold immersion in repeated cycles. The physiology is simple, well-described, and the reason the protocol works.
        </p>
        <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "22px", marginTop: "clamp(36px,5vw,56px)" }} className="nrtr-sci-grid">
          {cards.map((c) => (
            <div key={c.k} style={{ background: "var(--surface-raised)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius-lg)", padding: "clamp(26px,3vw,34px)", boxShadow: "var(--shadow-sm)" }}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "12px" }}>
                <span style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.16em", color: "var(--text-brand)" }}>{c.k}</span>
                <span style={{ fontFamily: "var(--font-label)", fontSize: "12px", fontWeight: 500, letterSpacing: "0.08em", color: "var(--text-muted)" }}>{c.temp}</span>
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "1.5rem", color: "var(--text-strong)", margin: "16px 0 8px" }}>{c.head}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Headline stat band (Laukkanen 2015) ---- */
function StatBand() {
  const stats = [
    ["63%", "lower risk of sudden cardiac death"],
    ["50%", "lower cardiovascular mortality"],
    ["40%", "lower all-cause mortality"],
  ];
  return (
    <section style={{ position: "relative", background: "var(--espresso)", color: "var(--linen)", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 140% at 82% 0%, rgba(140,59,34,0.5) 0%, rgba(78,34,19,0.34) 40%, rgba(32,24,15,0) 72%)" }} />
      <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
        <SciEyebrow onDark>The strongest evidence base</SciEyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.08, letterSpacing: "-0.01em", color: "var(--linen)", margin: "16px 0 0", maxWidth: "22ch" }}>
          A 20-year study of 2,315 men found the sauna keeps company with a longer life.
        </h2>
        <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "clamp(24px,4vw,48px)", marginTop: "clamp(40px,5vw,60px)" }}>
          {stats.map(([n, l]) => (
            <div key={n}>
              <div data-countup style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(3.4rem,6vw,4.6rem)", lineHeight: 1, color: "var(--camel)", letterSpacing: "-0.02em" }}>{n}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "1.05rem", lineHeight: 1.5, color: "var(--linen)", opacity: 0.9, margin: "14px 0 0", maxWidth: "24ch" }}>{l}</div>
            </div>
          ))}
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: "var(--linen)", opacity: 0.66, margin: "clamp(32px,4vw,44px) 0 0", maxWidth: "72ch" }}>
          Men who used a sauna 4–7 times a week, compared with once a week, over a median 20.7-year follow-up. Laukkanen et al., <em>JAMA Internal Medicine</em>, 2015.
        </p>
      </div>
    </section>
  );
}

/* ---- Evidence rows ---- */
function EvidenceCard({ stat, statLabel, claim, body, cite, href }) {
  const inner = (
    <React.Fragment>
      {stat && (
        <div style={{ marginBottom: "18px" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.4rem,3.4vw,3rem)", lineHeight: 1, color: "var(--terracotta)", letterSpacing: "-0.01em" }}>{stat}</div>
          <div style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--text-muted)", margin: "10px 0 0" }}>{statLabel}</div>
        </div>
      )}
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "1.4rem", lineHeight: 1.2, color: "var(--text-strong)", margin: "0 0 10px" }}>{claim}</h3>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.62, color: "var(--text-muted)", margin: "0 0 20px" }}>{body}</p>
      <div style={{ marginTop: "auto", paddingTop: "16px", borderTop: "1px solid var(--line-soft)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }}>
        <span style={{ fontFamily: "var(--font-label)", fontSize: "11px", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-brand)" }}>{cite}</span>
        {href && <span aria-hidden="true" className="nrtr-study-arrow" style={{ flexShrink: 0, fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--terracotta)", whiteSpace: "nowrap", transition: "transform 200ms cubic-bezier(.32,.08,.24,1)" }}>Read&nbsp;↗</span>}
      </div>
    </React.Fragment>
  );

  const base = { background: "var(--surface-raised)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius-lg)", padding: "clamp(26px,3vw,34px)", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column", height: "100%" };

  if (!href) return <div style={base}>{inner}</div>;

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="nrtr-study-card"
      style={{ ...base, textDecoration: "none", cursor: "pointer", transition: "border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease" }}
    >
      {inner}
    </a>
  );
}

function EvidenceGroup({ title, blurb, cards }) {
  return (
    <div style={{ marginBottom: "clamp(64px,9vw,112px)" }}>
      <div style={{ maxWidth: "56ch", marginBottom: "clamp(24px,3vw,34px)" }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.5rem,2.6vw,2.1rem)", lineHeight: 1.1, color: "var(--text-strong)", margin: 0 }}>{title}</h3>
        {blurb && <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.6, color: "var(--text-muted)", margin: "12px 0 0" }}>{blurb}</p>}
      </div>
      <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "22px" }} className="nrtr-sci-grid">
        {cards.map((c, i) => <EvidenceCard key={i} {...c} />)}
      </div>
    </div>
  );
}

function Evidence() {
  const groups = [
    {
      title: "Contrast therapy",
      blurb: "Alternating hot and cold is an established recovery modality — and the trials bear it out for soreness, strength, and function after musculoskeletal load.",
      cards: [
        { stat: "18", statLabel: "controlled trials pooled", claim: "Less soreness, less strength loss — at every interval.", body: "A systematic review and meta-analysis found contrast water therapy significantly reduced muscle soreness and muscle-strength loss at every follow-up from under 6 hours through 96 hours post-exercise, versus passive recovery.", cite: "Bieuzen et al. · PLOS ONE · 2013", href: "https://doi.org/10.1371/journal.pone.0062356" },
        { stat: "7", statLabel: "randomized trials reviewed", claim: "Measurable gains in pain, range of motion, and function.", body: "A 2024 scoping review found contrast therapy produced improvements across musculoskeletal conditions including exercise-induced muscle damage, ankle sprains, osteoarthritis, and complex regional pain syndrome.", cite: "Mechanisms & Efficacy of Contrast Therapy · PMC · 2024", href: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11900007/" },
      ],
    },
    {
      title: "Heat — the Finnish sauna",
      blurb: "Finnish saunas carry the most robust clinical evidence of any passive heat therapy, from cardiovascular outcomes to the cellular mechanisms behind muscle repair.",
      cards: [
        { stat: "20.7 yrs", statLabel: "median follow-up", claim: "Frequent sauna use tracks with a longer life.", body: "The landmark prospective cohort of 2,315 Finnish men linked 4–7 sauna sessions a week to a 63% lower risk of sudden cardiac death and a 40% lower risk of all-cause mortality versus once-weekly use.", cite: "Laukkanen et al. · JAMA Internal Medicine · 2015", href: "https://jamanetwork.com/journals/jamainternalmedicine/fullarticle/2130724" },
        { stat: null, claim: "Benefits that reach well beyond the heart.", body: "A comprehensive review associates regular Finnish sauna use with reduced risk of hypertension, cardiovascular disease, dementia, and respiratory conditions — and with improvements in musculoskeletal disorders, mental well-being, and sleep.", cite: "Laukkanen & Kunutsor · Temperature · 2024", href: "https://pubmed.ncbi.nlm.nih.gov/38577299/" },
        { stat: null, claim: "The mechanisms behind muscle repair.", body: "Documented pathways include improved endothelial function, reduced arterial stiffness, modulation of the autonomic nervous system, and increased heat-shock-protein expression that supports tissue repair.", cite: "Laukkanen et al. · Mayo Clinic Proceedings · 2018", href: "https://doi.org/10.1016/j.mayocp.2018.04.008" },
      ],
    },
    {
      title: "Cold — water immersion",
      blurb: "The plunge is more than a jolt. Recent meta-analyses connect cold-water immersion to real recovery and stress outcomes in healthy adults.",
      cards: [
        { stat: "3,177", statLabel: "participants, 11 studies", claim: "Lower perceived stress, better sleep and quality of life.", body: "A 2025 systematic review and meta-analysis found cold-water immersion produced measurable reductions in perceived stress alongside improvements in sleep quality and quality of life among healthy adults.", cite: "Cain et al. · PLOS ONE · 2025", href: "https://doi.org/10.1371/journal.pone.0317615" },
        { stat: "55", statLabel: "randomized trials", claim: "Faster neuromuscular recovery after hard training.", body: "A network meta-analysis found cold-water immersion improved muscle-power recovery, reduced soreness, and lowered creatine-kinase levels — with moderate-duration immersion at 5–10°C showing the greatest effect.", cite: "Frontiers in Physiology · 2025", href: "https://www.frontiersin.org/journals/physiology/articles/10.3389/fphys.2025.1525726/full" },
        { stat: null, claim: "A measurable lift in mood and alertness.", body: "Cold exposure triggers the release of norepinephrine and dopamine — neurotransmitters associated with alertness, mood elevation, and pain modulation. It's why the plunge clears the head.", cite: "Šrámek et al. · Eur J Appl Physiol · 2000", href: "https://pubmed.ncbi.nlm.nih.gov/10751106/" },
      ],
    },
    {
      title: "Contrast therapy + physical therapy",
      blurb: "The integration is what sets NRTR apart from a standalone clinic or a standalone bathhouse. Heat and cold make the PT work better — and every PT patient gets same-day suite access as part of the protocol.",
      cards: [
        { stat: null, claim: "Heat before, cold after — it sharpens the hands-on work.", body: "Post-session heat raises tissue extensibility and blood flow, so manual therapy and exercise land better; same-day cold blunts the inflammatory response afterward. Every PT patient gets same-day suite access as part of the protocol.", cite: "Higgins et al. · J. Strength & Conditioning Research · 2017", href: "https://doi.org/10.1519/JSC.0000000000001559" },
        { stat: null, claim: "Measurable effects across musculoskeletal conditions.", body: "A 2024 scoping review of the mechanisms and efficacy of contrast therapy found improvements in pain, range of motion, and function across conditions from exercise-induced muscle damage to osteoarthritis — the basis for pairing it with clinical PT.", cite: "Mechanisms & Efficacy of Contrast Therapy · PMC · 2024", href: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11900007/" },
      ],
    },
  ];
  return (
    <section style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
        <div style={{ maxWidth: "60ch", marginBottom: "clamp(40px,6vw,64px)" }}>
          <SciEyebrow>What the research shows</SciEyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.08, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "16px 0 0" }}>
            Grounded in the evidence, not the trend.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.05rem,1.5vw,1.25rem)", lineHeight: 1.6, color: "var(--text-muted)", margin: "20px 0 0" }}>
            NRTR's model is built on a growing body of peer-reviewed research into heat, cold, and their specific applications in musculoskeletal rehabilitation. Here's the shape of it.
          </p>
        </div>
        {groups.map((g) => <EvidenceGroup key={g.title} {...g} />)}
      </div>
    </section>
  );
}

/* ---- Testing / wearables ---- */
function Testing({ onBook }) {
  return (
    <section style={{ position: "relative", background: "var(--ember)", color: "var(--linen)", overflow: "hidden" }}>
      <img src="assets/icons/mark-inverted-camel.svg" alt="" aria-hidden="true" style={{ position: "absolute", right: "-5%", top: "50%", transform: "translateY(-50%)", height: "140%", width: "auto", opacity: 0.1, pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(32px,5vw,72px)", alignItems: "center" }} className="nrtr-sci-two">
          <div>
            <SciEyebrow onDark>Biometric testing</SciEyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section-lg)", lineHeight: 1.06, letterSpacing: "-0.015em", color: "var(--linen)", margin: "16px 0 0", maxWidth: "16ch" }}>
              Your watch estimates. We measure.
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.05rem,1.5vw,1.25rem)", lineHeight: 1.6, color: "var(--linen)", opacity: 0.88, margin: "22px 0 0", maxWidth: "52ch" }}>
              Consumer wearables read heart-rate variability well — but validation studies show 10–16% error on VO₂ Max, and no wearable measures resting metabolic rate at all. Its calorie numbers come from population equations that can be off by 20–40% for any given person.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.05rem,1.5vw,1.25rem)", lineHeight: 1.6, color: "var(--linen)", opacity: 0.88, margin: "18px 0 0", maxWidth: "52ch" }}>
              A PNOĒ breath test reads 23 biomarkers with clinical-grade precision — VO₂ Max, resting metabolic rate, biological age — validated against gold-standard laboratory systems.
            </p>
            <div style={{ marginTop: "32px", display: "flex", gap: "14px", flexWrap: "wrap" }}>
              <Button variant="primary" size="lg" onClick={onBook}>Join the Founding List</Button>
              <Button variant="camel" size="lg" href="services.html#testing">How testing works</Button>
            </div>
          </div>
          <div data-reveal-group style={{ display: "grid", gap: "16px" }}>
            {[["r ≈ 0.98", "PNOĒ-reported correlation with COSMED CPET (the lab gold standard)"], ["23", "biomarkers read from a single breath test"], ["10–16%", "VO₂ Max error rate reported for consumer wearables"]].map(([n, l]) => (
              <div key={n} style={{ background: "rgba(238,227,204,0.07)", border: "1px solid var(--line-on-dark)", borderRadius: "var(--radius-lg)", padding: "24px 26px" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(2.2rem,3.4vw,2.8rem)", lineHeight: 1, color: "var(--camel)" }}>{n}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.5, color: "var(--linen)", opacity: 0.82, margin: "12px 0 0" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Honest note + references ---- */
function References() {
  const refs = [
    { t: "Bieuzen F, Bleakley CM, Costello JT. Contrast water therapy and exercise-induced muscle damage: a systematic review and meta-analysis. PLOS ONE. 2013;8(4):e62356.", href: "https://doi.org/10.1371/journal.pone.0062356" },
    { t: "Mechanisms and Efficacy of Contrast Therapy for Musculoskeletal Painful Disease: a scoping review. PMC. 2024.", href: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11900007/" },
    { t: "Laukkanen T, Khan H, Zaccardi F, Laukkanen JA. Association between sauna bathing and fatal cardiovascular and all-cause mortality events. JAMA Internal Medicine. 2015;175(4):542–548.", href: "https://jamanetwork.com/journals/jamainternalmedicine/fullarticle/2130724" },
    { t: "Laukkanen JA, Kunutsor SK. The multifaceted benefits of passive heat therapies. Temperature. 2024;11(1):27–51.", href: "https://pubmed.ncbi.nlm.nih.gov/38577299/" },
    { t: "Laukkanen JA, Laukkanen T, Kunutsor SK. Cardiovascular and other health benefits of sauna bathing: a review of the evidence. Mayo Clinic Proceedings. 2018;93(8):1111–1121.", href: "https://doi.org/10.1016/j.mayocp.2018.04.008" },
    { t: "Cain T, Brinsley J, Bennett H, et al. Effects of cold-water immersion on health and wellbeing: a systematic review and meta-analysis. PLOS ONE. 2025;20(1):e0317615.", href: "https://doi.org/10.1371/journal.pone.0317615" },
    { t: "Cold-water immersion for neuromuscular recovery: a network meta-analysis. Frontiers in Physiology. 2025.", href: "https://www.frontiersin.org/journals/physiology/articles/10.3389/fphys.2025.1525726/full" },
    { t: "Higgins TR, Greene DA, Baker MK. Effects of cold water immersion and contrast water therapy for recovery from team sport. J. Strength & Conditioning Research. 2017;31(5):1443–1460.", href: "https://doi.org/10.1519/JSC.0000000000001559" },
    { t: "Consumer-wearable VO₂ Max accuracy varies by device; independent validation studies report errors that commonly exceed 10%, and current consumer wearables do not measure resting metabolic rate." },
  ];
  return (
    <section style={{ background: "var(--surface-raised)", borderTop: "1px solid var(--line-soft)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(48px,7vw,88px) var(--space-6)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(28px,5vw,64px)", alignItems: "start" }} className="nrtr-sci-two">
          <div>
            <SciEyebrow>An honest note</SciEyebrow>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "1.15rem", lineHeight: 1.65, color: "var(--text-body)", margin: "16px 0 0", maxWidth: "40ch" }}>
              The research describes what these modalities can do across populations. It isn't a promise about any one person, and we won't pretend otherwise. What we can promise is that the protocols here are built on the evidence — and delivered with care.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--text-brand)", marginBottom: "20px" }}>References</div>
            <ol style={{ margin: 0, padding: 0, listStyle: "none", counterReset: "ref", display: "flex", flexDirection: "column", gap: "14px" }}>
              {refs.map((r, i) => (
                <li key={i} style={{ display: "flex", gap: "14px", fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.55, color: "var(--text-muted)" }}>
                  <span style={{ flexShrink: 0, fontFamily: "var(--font-label)", fontSize: "12px", color: "var(--camel)", width: "1.4em", textAlign: "right" }}>{i + 1}</span>
                  {r.href ? (
                    <a href={r.href} target="_blank" rel="noopener noreferrer" className="nrtr-studylink" style={{ color: "var(--text-muted)", textDecoration: "none" }}>
                      <span>{r.t} </span>
                      <span data-underline style={{ color: "var(--text-brand)", whiteSpace: "nowrap", borderBottom: "1px solid transparent" }}>View study&nbsp;↗</span>
                    </a>
                  ) : (
                    <span>{r.t}</span>
                  )}
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

function ScienceSections({ onBook }) {
  return (
    <React.Fragment>
      <HowItWorks />
      <StatBand />
      <Evidence />
      <Testing onBook={onBook} />
      <References />
    </React.Fragment>
  );
}

window.ScienceSections = ScienceSections;
