/* NRTR — comprehensive FAQ. Every offering, the reasoning behind it, and links
   out to the peer-reviewed studies. Inline style objects only (naming rule). */
const { Button, Eyebrow } = window.NRTRDesignSystem_47db9c;

const FAQ_STUDIES = {
  contrastMeta: {
    label: "Bieuzen et al., PLOS ONE (2013) — contrast water therapy meta-analysis",
    href: "https://doi.org/10.1371/journal.pone.0062356",
  },
  contrastMech: {
    label: "Mechanisms & efficacy of contrast therapy, PMC (2024)",
    href: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11900007/",
  },
  sauna: {
    label: "Laukkanen et al., JAMA Internal Medicine (2015) — sauna & mortality",
    href: "https://jamanetwork.com/journals/jamainternalmedicine/fullarticle/2130724",
  },
  cold: {
    label: "Cold-water immersion network meta-analysis, Frontiers in Physiology (2025)",
    href: "https://www.frontiersin.org/journals/physiology/articles/10.3389/fphys.2025.1525726/full",
  },
};

function QEyebrow({ children, tone }) {
  return <Eyebrow tone={tone === "dark" ? "dark" : "light"}>{children}</Eyebrow>;
}

function StudyLinks({ links }) {
  if (!links || !links.length) return null;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px", margin: "0 0 24px" }}>
      <span style={{ fontFamily: "var(--font-label)", fontSize: "10px", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.16em", color: "var(--text-brand)" }}>The research</span>
      {links.map((k, i) => (
        <a
          key={i}
          href={k.href}
          target="_blank"
          rel="noopener noreferrer"
          className="nrtr-studylink"
          style={{ display: "inline-flex", alignItems: "baseline", gap: "8px", fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.45, color: "var(--terracotta)", textDecoration: "none", maxWidth: "62ch" }}
        >
          <span aria-hidden="true" style={{ flexShrink: 0 }}>↗</span>
          <span data-underline style={{ borderBottom: "1px solid var(--line-soft)", paddingBottom: "1px" }}>{k.label}</span>
        </a>
      ))}
    </div>
  );
}

function FaqItem({ q, a, links, open, onToggle }) {
  const uid = React.useId();
  const btnId = `faq-btn-${uid}`;
  const panelId = `faq-panel-${uid}`;
  return (
    <div style={{ borderBottom: "1px solid var(--line-soft)" }}>
      <h3 style={{ margin: 0 }}>
        <button
          id={btnId}
          onClick={onToggle}
          aria-expanded={open}
          aria-controls={panelId}
          style={{
            width: "100%",
            background: "none",
            border: "none",
            cursor: "pointer",
            textAlign: "left",
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "space-between",
            gap: "24px",
            padding: "22px 0",
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "clamp(1.1rem, 1.7vw, 1.35rem)",
            color: "var(--text-strong)",
            lineHeight: 1.3,
          }}
        >
          <span>{q}</span>
          <span aria-hidden="true" style={{ flexShrink: 0, fontFamily: "var(--font-body)", fontSize: "26px", lineHeight: 1, color: "var(--terracotta)", transform: open ? "rotate(45deg)" : "none", transition: "transform 220ms cubic-bezier(.32,.08,.24,1)", marginTop: "2px" }}>+</span>
        </button>
      </h3>
      <div
        id={panelId}
        role="region"
        aria-labelledby={btnId}
        inert={open ? undefined : ""}
        style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr", transition: "grid-template-rows 320ms cubic-bezier(.32,.08,.24,1)" }}
      >
        <div style={{ overflow: "hidden", minHeight: 0 }}>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.65, color: "var(--text-muted)", margin: links ? "0 0 16px" : "0 0 24px", maxWidth: "62ch" }}>{a}</p>
          <StudyLinks links={links} />
        </div>
      </div>
    </div>
  );
}

function FaqGroup({ title, items, openKey, setOpenKey, groupId }) {
  return (
    <div data-reveal="fade" style={{ display: "grid", gridTemplateColumns: "0.5fr 1.5fr", gap: "clamp(20px, 4vw, 56px)", alignItems: "start", marginBottom: "clamp(40px, 6vw, 72px)" }} className="nrtr-two">
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.5rem, 2.4vw, 2rem)", lineHeight: 1.1, color: "var(--text-strong)", margin: 0, position: "sticky", top: "calc(var(--nav-h) + 20px)" }}>{title}</h2>
      <div>
        {items.map((it, i) => {
          const key = `${groupId}-${i}`;
          return <FaqItem key={key} q={it.q} a={it.a} links={it.links} open={openKey === key} onToggle={() => setOpenKey(openKey === key ? null : key)} />;
        })}
      </div>
    </div>
  );
}

function FaqSections({ onBook }) {
  const [openKey, setOpenKey] = React.useState("offer-0");
  const groups = [
    {
      id: "offer",
      title: "What we offer & why",
      items: [
        {
          q: "One-on-one physical therapy — what makes it different?",
          a: "Every session is a full sixty minutes, one-on-one with your therapist — no handing you off to an aide, no cash-pay clock dictated by an insurance code. Because we're out-of-network, the length and shape of your care is a clinical decision, not a billing one. Every PT session also includes same-day access to the full contrast suite, an InBody body-composition scan, and the HydroMassage chair, so the recovery work compounds the hands-on work.",
        },
        {
          q: "Contrast therapy — what is it and why do we build the whole space around it?",
          a: "Contrast therapy alternates heat and cold in cycles: sauna at 160–190°F, then a cold plunge at 40–52°F, repeated three to four times. Heat opens the blood vessels, cold constricts them, and moving between the two creates a vascular pumping effect that moves more blood than either does alone — boosting circulation, calming inflammation, and speeding recovery. Pooled trial data show it meaningfully reduces muscle soreness and strength loss versus simply resting.",
          links: [FAQ_STUDIES.contrastMeta, FAQ_STUDIES.contrastMech],
        },
        {
          q: "The Finnish sauna — why heat, specifically?",
          a: "Heat drives vasodilation, raising blood flow and tissue extensibility so the muscles are primed for manual therapy and movement. Beyond recovery, frequent sauna use carries one of the strongest longevity evidence bases of any passive modality — a 20-year study of 2,315 men linked 4–7 sessions a week to a 63% lower risk of sudden cardiac death and 40% lower all-cause mortality. Our three-tier bench lets you self-select your heat by where you sit.",
          links: [FAQ_STUDIES.sauna],
        },
        {
          q: "The cold plunge — is it really worth the shock?",
          a: "The plunge triggers vasoconstriction, easing swelling and blunting the inflammatory response after you've worked. Recent network meta-analyses connect cold-water immersion to faster neuromuscular recovery, less soreness, and lower creatine-kinase — plus measurable lifts in mood and alertness from norepinephrine and dopamine release. We run three plunges — 52°F for beginners and post-surgical clients, 46°F intermediate, 40°F advanced — so you start where it makes sense.",
          links: [FAQ_STUDIES.cold],
        },
        {
          q: "Biometric testing — why measure instead of guess?",
          a: "Your watch estimates; we measure. Consumer wearables show 10–16% error on VO₂ Max and can't read resting metabolic rate at all. A PNOĒ breath test reads 23 biomarkers with clinical-grade precision, including VO₂ Max, resting metabolic rate, and biological age, then generates a personalized nutrition and training plan. It's $299 for members and non-members alike.",
        },
        {
          q: "Membership and classes — what's the reasoning?",
          a: "Membership exists for the person who wants contrast therapy to become a routine, not an occasion — unlimited suite access, guest passes, and member wellness classes (mobility, gentle movement, and guided breathwork) led by local instructors. It's simply the best value if you're coming regularly; if you're not, day passes and à la carte testing are always open to you.",
        },
      ],
    },
    {
      id: "start",
      title: "Getting started",
      items: [
        { q: "Do you take insurance?", a: "NRTR is cash-pay and out-of-network — no billing codes deciding how long your session runs. We provide superbills so you can submit to your insurer for out-of-network reimbursement, which for many plans meaningfully reduces the effective cost." },
        { q: "When do you open?", a: "We're opening at 65 Church Street in Montclair in spring 2027. Join the founding list and we'll keep you posted as opening approaches." },
        { q: "Do I need to be a member?", a: "No. You can book physical therapy or biometric testing without a membership, and the contrast suite is available on day passes — $40 off-peak, $65 peak. Membership is simply the best value if the suite becomes part of your routine." },
      ],
    },
    {
      id: "practices",
      title: "The practices",
      items: [
        { q: "I'm new to cold plunges — where do I start?", a: "That's exactly why there are three. The 52°F plunge is an easy entry point, ideal for beginners and post-surgical clients; 46°F is intermediate; 40°F is the advanced reset. The sauna works the same way — a three-tier bench lets you self-select your heat by where you sit." },
        { q: "How long is a typical contrast cycle?", a: "Most people run three to four rounds: several minutes in the sauna, one to three minutes in the plunge, repeated. There's no single right protocol — our team helps you find a cadence that suits your goals and experience, and the suite is communal so you're never doing it alone.", links: [FAQ_STUDIES.contrastMech] },
        { q: "What's included with a physical therapy session?", a: "Sixty minutes, one-on-one with your therapist, plus complimentary same-day access to the full contrast suite as part of your protocol, an InBody body-composition scan at intake and discharge, and use of the HydroMassage chair." },
        { q: "Is contrast therapy safe for everyone?", a: "It's well tolerated by most healthy adults, but heat and cold extremes aren't right for every condition — pregnancy, certain cardiovascular conditions, and some medications warrant caution. We screen at intake and, when in doubt, ask you to clear it with your physician first. The research describes population-level effects, not a promise for any one person." },
      ],
    },
    {
      id: "membership",
      title: "Membership & pricing",
      items: [
        { q: "What does membership cost?", a: "Standard membership is $250/mo for unlimited contrast suite access; Performance is $325/mo and adds quarterly metabolic assessments. Founding members lock in $225 and $300 respectively for their first year." },
        { q: "Do members get guest passes?", a: "Yes. Standard members get two guest passes a month; founding members get five. It's a communal space by design, and we want you to share it." },
        { q: "Can I pause or cancel?", a: "Yes — straightforward terms, cash-pay clarity, and the freedom to pause. We aim to earn the month, every month, rather than lock you in." },
        { q: "Are there classes?", a: "Members get access to wellness classes — mobility, gentle movement, and guided breathwork led by local instructors — starting with a small schedule and scaling over time, capped small so the room stays personal." },
      ],
    },
    {
      id: "visiting",
      title: "Visiting",
      items: [
        { q: "Where are you located?", a: "65 Church Street, in the heart of downtown Montclair — a new mixed-use building, minutes from the Bay Street and Walnut Street stations, with on-site parking (ten dedicated and twenty public stalls)." },
        { q: "What are your hours?", a: "We're open six days a week and closed Sundays. Exact hours will be listed ahead of opening; peak windows are mornings and early evenings on weekdays, and weekend mornings." },
        { q: "Is there parking?", a: "Yes — ten dedicated retail stalls plus twenty public stalls within the building, with direct access to the lobby." },
      ],
    },
  ];

  return (
    <section style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(56px,8vw,96px) var(--space-6)" }}>
        {groups.map((g) => (
          <FaqGroup key={g.id} groupId={g.id} title={g.title} items={g.items} openKey={openKey} setOpenKey={setOpenKey} />
        ))}

        {/* Full science page callout */}
        <div data-reveal="fade" style={{ display: "grid", gridTemplateColumns: "0.5fr 1.5fr", gap: "clamp(20px, 4vw, 56px)", alignItems: "start", marginBottom: "clamp(40px, 6vw, 72px)" }} className="nrtr-two">
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.5rem, 2.4vw, 2rem)", lineHeight: 1.1, color: "var(--text-strong)", margin: 0, position: "sticky", top: "calc(var(--nav-h) + 20px)" }}>Go deeper</h2>
          <div style={{ background: "var(--espresso)", color: "var(--linen)", borderRadius: "var(--radius-lg)", padding: "clamp(28px,4vw,44px)", position: "relative", overflow: "hidden" }}>
            <img src="assets/icons/mark-inverted-camel.svg" alt="" aria-hidden="true" style={{ position: "absolute", right: "-24px", top: "50%", transform: "translateY(-50%)", height: "150%", width: "auto", opacity: 0.12, pointerEvents: "none" }} />
            <div style={{ position: "relative" }}>
              <QEyebrow tone="dark">The full evidence base</QEyebrow>
              <p style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.4rem, 2.4vw, 2rem)", lineHeight: 1.15, color: "var(--linen)", margin: "14px 0 0", maxWidth: "26ch" }}>
                Want the studies in one place, with the numbers behind them?
              </p>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.6, color: "var(--linen)", opacity: 0.82, margin: "14px 0 0", maxWidth: "46ch" }}>
                Our Science page walks through every peer-reviewed source we build our protocols on — contrast therapy, sauna, cold immersion, and biometric testing — with a full reference list.
              </p>
              <Button variant="camel" size="lg" href="science.html" style={{ marginTop: "24px" }}>Read the science</Button>
            </div>
          </div>
        </div>

        <div style={{ borderTop: "1px solid var(--line-soft)", paddingTop: "48px", display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "clamp(24px, 6vw, 72px)", flexWrap: "wrap" }}>
          <div>
            <QEyebrow>Still have a question?</QEyebrow>
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.4rem, 2.4vw, 2rem)", color: "var(--text-strong)", margin: "12px 0 0", maxWidth: "20ch" }}>
              We're happy to help.
            </p>
          </div>
          <Button variant="primary" size="lg" href="contact.html">Contact us</Button>
        </div>
      </div>
    </section>
  );
}

window.FaqSections = FaqSections;
