const { Badge, Eyebrow } = window.NRTRDesignSystem_47db9c;

function CheckList({ items, tone = "light" }) {
  const color = tone === "dark" ? "var(--linen)" : "var(--text-body)";
  const dot = tone === "dark" ? "var(--camel)" : "var(--terracotta)";
  return (
    <ul style={{ listStyle: "none", margin: "28px 0 0", padding: 0, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "12px 24px" }}>
      {items.map((t) => (
        <li key={t} style={{ display: "flex", alignItems: "baseline", gap: "10px", fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.5, color }}>
          <span aria-hidden="true" style={{ flexShrink: 0, width: 7, height: 7, borderRadius: "50%", background: dot, transform: "translateY(-1px)" }} />
          {t}
        </li>
      ))}
    </ul>
  );
}

function ServiceBlock({ id, eyebrow, title, body, items, photo, photoRatio, photoScale, note, dark, flip, price, priceSub }) {
  const bg = dark ? "var(--espresso)" : "var(--surface-page)";
  const titleColor = dark ? "var(--linen)" : "var(--text-strong)";
  const bodyColor = dark ? "var(--text-on-dark-muted)" : "var(--text-muted)";
  const priceColor = dark ? "var(--linen)" : "var(--text-strong)";

  const media = photo ? (
    <div className="nrtr-photo" data-img-reveal style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", border: `1px solid ${dark ? "var(--line-on-dark)" : "var(--line-soft)"}`, aspectRatio: photoRatio || "4 / 5", boxShadow: dark ? "none" : "var(--shadow-md)" }}>
      <img src={photo} alt={"Visualization — " + title} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transform: photoScale ? `scale(${photoScale})` : undefined }} />
    </div>
  ) : (
    <div
      style={{
        borderRadius: "var(--radius-xl)",
        border: `1px solid ${dark ? "var(--line-on-dark)" : "var(--line-soft)"}`,
        aspectRatio: "4 / 5",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "16px",
        background: "repeating-linear-gradient(135deg, rgba(140,59,34,0.06) 0 11px, rgba(140,59,34,0) 11px 24px), linear-gradient(160deg, #ece0c6 0%, #e1d1b3 100%)",
      }}
    >
      <img src="assets/icons/mark-inverted-terracotta.svg" alt="" aria-hidden="true" style={{ width: 66, height: 66, opacity: 0.38 }} />
      <span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: "11px", letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--text-brand)", opacity: 0.8 }}>{note}</span>
    </div>
  );

  const text = (
    <div>
      <Eyebrow tone={dark ? "dark" : "light"}>{eyebrow}</Eyebrow>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.08, letterSpacing: "-0.01em", color: titleColor, margin: "14px 0 0", maxWidth: "18ch" }}>{title}</h2>
      {price && (
        <div style={{ display: "flex", alignItems: "baseline", gap: "10px", margin: "18px 0 0", flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: "34px", lineHeight: 1, color: priceColor, letterSpacing: "-0.01em" }}>{price}</span>
          <span style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: dark ? "var(--camel)" : "var(--text-brand)" }}>{priceSub}</span>
        </div>
      )}
      {body.map((p, i) => (
        <p key={i} style={{ fontFamily: "var(--font-body)", fontSize: "18px", lineHeight: 1.65, color: bodyColor, margin: "18px 0 0", maxWidth: "48ch" }}>{p}</p>
      ))}
      <CheckList items={items} tone={dark ? "dark" : "light"} />
    </div>
  );

  return (
    <section id={id} style={{ background: bg, scrollMarginTop: "var(--nav-h)" }}>
      <div
        style={{
          maxWidth: "var(--container)",
          margin: "0 auto",
          padding: "var(--section-pad) var(--space-6)",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: "clamp(32px, 6vw, 80px)",
          alignItems: "center",
        }}
        className="nrtr-svc-grid"
        data-reveal-group
      >
        {flip ? (<><div style={{ order: 1 }}>{media}</div><div style={{ order: 2 }}>{text}</div></>) : (<>{text}{media}</>)}
      </div>
    </section>
  );
}

function TechStudyLinks({ links }) {
  return (
    <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>
      {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>
  );
}

function TechCard({ tagline, name, what, why, links }) {
  return (
    <div style={{ background: "var(--surface-raised)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius-lg)", padding: "clamp(26px, 3.5vw, 40px)", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column" }}>
      <div style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-brand)" }}>{tagline}</div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.5rem, 2.6vw, 2.05rem)", lineHeight: 1.1, color: "var(--text-strong)", margin: "10px 0 0" }}>{name}</h3>
      <div style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-muted)", margin: "22px 0 8px" }}>What it is</div>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.65, color: "var(--text-body)", margin: 0 }}>{what}</p>
      <div style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-muted)", margin: "20px 0 8px" }}>Why we offer it</div>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.65, color: "var(--text-muted)", margin: "0 0 4px" }}>{why}</p>
      <TechStudyLinks links={links} />
    </div>
  );
}

function PtTechniques() {
  const techniques = [
    {
      tagline: "Included technique",
      name: "Dry needling",
      what: "Thin monofilament needles placed by your DPT into the tight, tender knots in a muscle — the myofascial trigger points. It isn't acupuncture; it's a Western, anatomy-driven technique aimed at the exact spot referring your pain.",
      why: "When a muscle won't let go, needling can reset it in a way hands alone often can't — releasing the taut band and calming referred pain. Drug-free, precise, and part of your hour at no extra charge.",
      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/" },
      ],
    },
    {
      tagline: "Included technique",
      name: "Cupping",
      what: "Suction cups lift and decompress the skin and soft tissue — the opposite of pressing in. Your therapist places them over tight areas, sometimes moving them along the muscle, to draw blood flow into tissue that's been guarding.",
      why: "It's a gentle way to loosen stubborn fascia and stiff, overworked muscle so you move more freely before we load it. We use it as one tool inside a plan — not a standalone fix — and the marks fade in a few days.",
      links: [
        { label: "Mohamed et al., J. Back & Musculoskeletal Rehabilitation (2023) — cupping in musculoskeletal & sports rehab (evidence-based review)", href: "https://doi.org/10.3233/BMR-210242" },
      ],
    },
  ];
  return (
    <section style={{ background: "var(--surface-page)", borderTop: "1px solid var(--line-soft)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(48px, 7vw, 88px) var(--space-6)" }} data-reveal-group>
        <div style={{ display: "grid", gridTemplateColumns: "1.35fr 0.65fr", gap: "clamp(24px, 5vw, 64px)", alignItems: "center" }} className="nrtr-two">
          <div>
            <Eyebrow>Hands-on techniques</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "24ch" }}>
              Included in your physical therapy, when they'll help.
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.02rem, 1.4vw, 1.2rem)", lineHeight: 1.6, color: "var(--text-muted)", margin: "18px 0 0", maxWidth: "58ch" }}>
              These aren't add-ons or upsells. When your therapist judges they'll speed things along, they're part of the same sixty minutes — each one chosen for the problem in front of us and grounded in the evidence.
            </p>
          </div>
          <figure data-img-reveal style={{ position: "relative", margin: 0, width: "100%", maxWidth: "280px", justifySelf: "center", borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: "4 / 5", border: "1px solid var(--line-soft)", boxShadow: "var(--shadow-md)" }}>
            <img src="assets/photography/brand/door-hanger.jpg" alt="Visualization — a ‘Session in progress’ door hanger on a treatment-room door" loading="lazy" decoding="async" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(24,16,10,0) 50%, rgba(20,14,9,0.66) 100%)" }} />
            <figcaption style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "16px", fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--linen)" }}>Your hour is yours</figcaption>
          </figure>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "22px", marginTop: "clamp(32px, 4vw, 48px)", alignItems: "start" }}>
          {techniques.map((t) => <TechCard key={t.name} {...t} />)}
        </div>
      </div>
    </section>
  );
}

function ServicesSections() {
  return (
    <>
      <ServiceBlock
        id="pt"
        eyebrow="Physical Therapy"
        title="Sixty minutes, one-on-one, every time."
        body={[
          "One therapist, your whole hour. They know your history, watch how you actually move, and build the plan around the root cause — not a protocol handed down from a billing code.",
          "Because we're cash-pay, there's no insurer deciding how long you get or what counts. The time is yours, and the work follows the problem wherever it leads.",
        ]}
        items={["60-minute sessions", "One therapist, start to finish", "Cash-pay — no insurance codes", "Manual therapy + movement", "Dry needling", "Cupping"]}
        photo="assets/photography/pt-session.jpg"
        price="$275"
        priceSub="per 60-minute session"
        dark={false}
        flip={false}
      />
      <PtTechniques />
      <ServiceBlock
        id="contrast"
        eyebrow="Contrast Therapy"
        title="A large Finnish sauna and three cold plunges."
        body={[
          "Heat, then cold, then a room to sit in. The contrast suite is communal by design — the place where regulars learn each other's names and the reset becomes a ritual.",
          "Come for the physiology; stay for the room. It's the part of recovery most people didn't know they were missing.",
        ]}
        items={["190°F Finnish sauna", "Three graduated cold plunges — 40°F", "Full recovery lounge", "Sauna seats up to 30"]}
        photo="assets/photography/hero-sauna.jpg"
        photoScale={1.01}
        price="From $225/mo"
        priceSub="membership · day passes from $40"
        dark={true}
        flip={true}
      />
      <ServiceBlock
        id="testing"
        eyebrow="Biometric Testing"
        title="Where wearable data becomes a plan."
        body={[
          "Clinical-grade PNOĒ breath analysis measures what your watch only estimates — VO₂ max, resting metabolic rate, biological age. Real numbers, taken properly.",
          "Then we do the part the data can't: sit with you, read what it means for your goals, and turn it into something you can act on.",
        ]}
        items={["PNOĒ breath analysis", "VO₂ Max", "Resting metabolic rate (RMR)", "Biological age"]}
        photo="assets/photography/pnoe.jpg"
        photoRatio="1 / 1"
        price="$299"
        priceSub="full metabolic baseline"
        dark={false}
        flip={true}
      />

      {/* Atmospheric divider — steam glass */}
      <section style={{ background: "var(--espresso)", color: "var(--linen)" }}>
        <div data-reveal-group style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(36px, 5vw, 64px) var(--space-6)", display: "grid", gridTemplateColumns: "1fr 0.8fr", gap: "clamp(28px, 6vw, 72px)", alignItems: "center" }} className="nrtr-two">
          <div>
            <Eyebrow tone="dark">The contrast</Eyebrow>
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.12, letterSpacing: "-0.01em", color: "var(--linen)", margin: "14px 0 0", maxWidth: "16ch", textWrap: "balance" }}>
              Heat, cold, and everything in between.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.02rem, 1.4vw, 1.2rem)", lineHeight: 1.6, color: "var(--text-on-dark-muted)", margin: "18px 0 0", maxWidth: "44ch" }}>
              The rhythm of the suite — sauna to plunge and back — is where recovery becomes a ritual you look forward to.
            </p>
          </div>
          <div data-img-reveal style={{ position: "relative", width: "100%", maxWidth: "400px", justifySelf: "end", aspectRatio: "1 / 1", overflow: "hidden", borderRadius: "var(--radius-xl)", border: "1px solid var(--line-on-dark)", boxShadow: "var(--shadow-lg)" }}>
            <img src="assets/photography/brand/steam-glass.jpg" alt="Visualization — warm light through steam-fogged glass, the NRTR mark just visible" loading="lazy" decoding="async" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} />
          </div>
        </div>
      </section>
    </>
  );
}

window.ServicesSections = ServicesSections;
