// Shared components for the specialized-treatment pages.
// Loaded after React/Babel; exports everything to window.

// ─── Reveal animation ─────────────────────────────────────────────────────────
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const useReveal = (threshold = 0.07) => {
  const ref = React.useRef();
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    if (prefersReduced) { setVisible(true); return; }
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
};
const Reveal = ({ children, delay = 0, y = 24 }) => {
  const [ref, visible] = useReveal();
  if (prefersReduced) return <div ref={ref}>{children}</div>;
  return (
    <div ref={ref} style={{ opacity: visible ? 1 : 0, transform: visible ? 'none' : `translateY(${y}px)`, transition: `opacity 0.85s ease ${delay}s, transform 0.85s ease ${delay}s` }}>
      {children}
    </div>);
};

// ─── Shared primitives ────────────────────────────────────────────────────────
const EyebrowLabel = ({ children, light }) =>
  <p style={{ fontFamily: "DM Sans, sans-serif", fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: light ? "rgba(255,255,255,0.55)" : "var(--blue)", marginBottom: 14, fontSize: 11 }}>{children}</p>;

const Rule = ({ blue }) => <div aria-hidden="true" style={{ width: 48, height: 1, background: blue ? "var(--blue)" : "var(--amber)", opacity: 0.7, marginBottom: 28 }} />;

const CTA = ({ children, href, secondary, style: s = {} }) => {
  const [h, setH] = React.useState(false);
  const bg = secondary ? (h ? "var(--blue-light)" : "transparent") : (h ? "var(--amber-dark)" : "var(--amber)");
  return (
    <a href={href} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "DM Sans, sans-serif", fontWeight: 600, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", color: secondary ? "var(--blue)" : "#fff", background: bg, padding: "14px 28px", borderRadius: 6, textDecoration: "none", border: secondary ? "1.5px solid var(--blue)" : "1.5px solid var(--amber)", transition: "all 0.18s", ...s }}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>{children}</a>);
};

// ─── Nav ──────────────────────────────────────────────────────────────────────
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const links = [
    ["HOME", "/"],
    ["ABOUT", "/about"],
    ["TREATMENTS", "/treatments"],
    ["WHAT WE TREAT", "/what-we-treat"],
    ["PATIENT INFO", "/patient-info"],
    ["CONTACT", "/contact"]];
  return (
    <nav aria-label="Main navigation" style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100, backdropFilter: "blur(12px)", borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent", transition: "border-color 0.3s", background: "rgb(250, 248, 244)" }}>
      <div style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "flex-end", height: 86, padding: "0 clamp(20px,3vw,48px)", position: "relative" }}>
        <a href="/" style={{ textDecoration: "none", position: "fixed", left: 40, top: 0, height: 86, display: "flex", alignItems: "center", zIndex: 102 }}>
          <img src="/logo-color.png" alt="Diagnostic Edge Physical Therapy" style={{ objectFit: "contain", mixBlendMode: "multiply", width: "260.516px", height: "90px", imageRendering: "-webkit-optimize-contrast", filter: "contrast(1.08) saturate(1.05)" }} />
        </a>
        <div style={{ display: "flex", gap: 22, alignItems: "center" }} className="nav-desktop">
          {links.map(([label, href]) =>
            <a key={label} href={href} style={{ fontFamily: "DM Sans, sans-serif", fontSize: 11, color: "var(--text-muted)", textDecoration: "none", fontWeight: 600, letterSpacing: "0.12em", transition: "color 0.15s" }}
              onMouseEnter={(e) => e.target.style.color = "var(--blue)"} onMouseLeave={(e) => e.target.style.color = "var(--text-muted)"}>{label}</a>)}
          <CTA href="https://diagnosticedgept.janeapp.com" style={{ fontSize: 11, padding: "10px 22px" }}>Book Now</CTA>
        </div>
      </div>
    </nav>);
};

// ─── Footer ───────────────────────────────────────────────────────────────────
const Footer = () => (
  <footer style={{ background: "var(--text)", padding: "48px clamp(20px,4vw,60px) 32px" }}>
    <div style={{ maxWidth: 1400, margin: "0 auto" }}>
      <div style={{ marginBottom: 20, paddingBottom: 20, borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
        <div style={{ fontFamily: "var(--hfont)", fontSize: 22, fontStyle: "italic", color: "#eef2f8", marginBottom: 4 }}>Diagnostic Edge PT</div>
        <div style={{ fontFamily: "DM Sans, sans-serif", fontSize: 13, color: "rgba(255,255,255,0.38)", fontWeight: 300 }}>4155 El Camino Way, Suite A2, Palo Alto, CA 94306</div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
        <p style={{ fontFamily: "DM Sans, sans-serif", fontSize: 12, color: "rgba(255,255,255,0.25)", margin: 0, fontWeight: 300 }}>© 2025 Diagnostic Edge Physical Therapy. All rights reserved.</p>
        <a href="/treatments" style={{ fontFamily: "DM Sans, sans-serif", fontSize: 12, color: "rgba(255,255,255,0.55)", textDecoration: "none", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase" }}>← Back to all treatments</a>
      </div>
    </div>
  </footer>);

// ─── Treatment page body copy styles ─────────────────────────────────────────
const tpBody = { fontFamily: "DM Sans, sans-serif", fontSize: 17, color: "var(--text-muted)", lineHeight: 1.82, fontWeight: 300, margin: "0 0 18px" };
const tpH3 = { fontFamily: "var(--hfont)", fontSize: 34, fontStyle: "italic", fontWeight: 400, color: "var(--text)", margin: "0 0 14px" };

// ─── All four treatments (for cross-links) ───────────────────────────────────
const ALL_TREATMENTS = [
  { title: "Shockwave Therapy", tag: "Tendon & soft tissue", href: "/treatments/shockwave-therapy", img: "/images/shockwave2.png", thumbFit: "contain" },
  { title: "Electrical Stimulation", tag: "Muscle activation & pain relief", href: "/treatments/electrical-stimulation", img: "/images/electric-stim.png" },
  { title: "Myofascial Decompression", tag: "Commonly known as cupping", href: "/treatments/cupping", img: "/images/myofascial.png" },
  { title: "Graston / IASTM", tag: "Soft tissue & tendon treatment", href: "/treatments/graston-iastm", img: "/images/graston-new.jpg" }];

const OtherTreatmentCard = ({ t }) => {
  const [h, setH] = React.useState(false);
  return (
    <a href={t.href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 20px", borderRadius: 8, border: `1.5px solid ${h ? "var(--blue)" : "var(--border)"}`, background: h ? "var(--blue-light)" : "var(--surface-2)", textDecoration: "none", transition: "all 0.18s" }}>
      <div aria-hidden="true" style={{ width: 52, height: 52, borderRadius: 8, background: "var(--surface-2)", flexShrink: 0, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <img src={t.img} alt="" style={{ objectFit: t.thumbFit || "cover", height: "52px", width: "52px" }} />
      </div>
      <div>
        <div style={{ fontFamily: "DM Sans, sans-serif", fontSize: 16, fontWeight: 500, color: "var(--text)" }}>{t.title}</div>
        <div style={{ fontFamily: "DM Sans, sans-serif", color: "var(--text-muted)", marginTop: 3, fontSize: 13 }}>{t.tag}</div>
      </div>
      <span aria-hidden="true" style={{ marginLeft: "auto", color: "var(--blue)", fontFamily: "DM Sans, sans-serif", fontSize: 18 }}>→</span>
    </a>);
};

// ─── Page template ────────────────────────────────────────────────────────────
const TreatmentPage = ({ data }) => (
  <React.Fragment>
    <Nav />
    <main id="main-content" style={{ paddingTop: 86 }}>

      {/* Hero */}
      <section data-screen-label={data.title} style={{ background: "var(--bg)", padding: "84px clamp(20px,4vw,60px) 100px" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 72, alignItems: "center" }} className="two-col">
            <Reveal>
              <div>
                <EyebrowLabel>Specialized treatment · Included in every session</EyebrowLabel>
                <h1 style={{ fontFamily: "var(--hfont)", fontSize: "clamp(48px,5.5vw,76px)", fontWeight: 400, fontStyle: "italic", color: "var(--text)", lineHeight: 1.06, margin: "0 0 12px" }}>{data.title}</h1>
                <p style={{ fontFamily: "DM Sans, sans-serif", fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--amber)", margin: "0 0 26px", fontSize: 14 }}>{data.tag}</p>
                <Rule />
                <p style={{ ...tpBody, fontSize: 18, maxWidth: 560, marginBottom: 34 }}>{data.intro}</p>
                <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                  <CTA href="https://diagnosticedgept.janeapp.com">Book an Evaluation <span aria-hidden="true">→</span></CTA>
                  <CTA secondary href="/treatments">All treatments</CTA>
                </div>
              </div>
            </Reveal>
            <Reveal delay={0.1}>
              <div style={{ borderRadius: 14, overflow: "hidden", boxShadow: "0 24px 60px rgba(26,35,51,0.10)", aspectRatio: data.heroRatio || "16/11", background: "var(--bg-alt)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <img src={data.heroImg} alt={data.heroAlt || data.title} style={data.heroFit === "contain" ? { width: "70%", height: "90%", objectFit: "contain" } : { width: "100%", height: "100%", objectFit: "cover", objectPosition: data.heroPos || "center" }} />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Details */}
      <section style={{ background: "var(--bg-alt)", padding: "100px clamp(20px,4vw,60px)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,2fr)", gap: 64, alignItems: "start" }} className="two-col">
            <Reveal>
              <div className="sticky-rail" style={{ position: "sticky", top: 120 }}>
                <EyebrowLabel>The details</EyebrowLabel>
                <h2 style={{ fontFamily: "var(--hfont)", fontSize: "clamp(40px,4.5vw,60px)", fontWeight: 400, fontStyle: "italic", color: "var(--text)", lineHeight: 1.08, margin: "0 0 22px" }}>How it works.</h2>
                <Rule blue />
              </div>
            </Reveal>
            <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
              <Reveal delay={0.05}>
                <div>
                  <h3 style={tpH3}>What it is</h3>
                  {data.whatIs.map((p, i) => <p key={i} style={tpBody}>{p}</p>)}
                </div>
              </Reveal>
              <Reveal delay={0.05}>
                <div>
                  <h3 style={tpH3}>When it's used</h3>
                  <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12, margin: 0, padding: 0 }}>
                    {data.when.map((item, i) =>
                      <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                        <span aria-hidden="true" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--amber)", flexShrink: 0, marginTop: 10 }}></span>
                        <span style={{ ...tpBody, margin: 0 }}>{item}</span>
                      </li>)}
                  </ul>
                </div>
              </Reveal>
              <Reveal delay={0.05}>
                <div>
                  <h3 style={tpH3}>What to expect</h3>
                  {data.expect.map((p, i) => <p key={i} style={tpBody}>{p}</p>)}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Included callout */}
      <section style={{ background: "var(--bg)", padding: "100px clamp(20px,4vw,60px)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Reveal>
            <div style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 14, padding: "clamp(32px,4vw,56px)", display: "grid", gridTemplateColumns: "minmax(0,1.5fr) minmax(0,1fr)", gap: 48, alignItems: "center" }} className="two-col">
              <div>
                <EyebrowLabel>Included in every session</EyebrowLabel>
                <h2 style={{ fontFamily: "var(--hfont)", fontSize: "clamp(36px,3.8vw,52px)", fontWeight: 400, fontStyle: "italic", color: "var(--text)", lineHeight: 1.1, margin: "0 0 16px" }}>Never an add-on charge.</h2>
                <p style={{ ...tpBody, margin: 0, maxWidth: 620 }}>
                  {data.title} is one of several specialized treatment options available at Diagnostic Edge. Treatments are selected based on what's most likely to help for your specific case — and all are included in your session at no additional charge.
                </p>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
                <CTA href="https://diagnosticedgept.janeapp.com">Book an Evaluation <span aria-hidden="true">→</span></CTA>
                <CTA secondary href="/contact">Questions? Speak to Greg</CTA>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Other treatments */}
      <section style={{ background: "var(--bg)", padding: "0 clamp(20px,4vw,60px) 100px" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <Reveal>
            <EyebrowLabel>Explore more</EyebrowLabel>
            <h2 style={{ fontFamily: "var(--hfont)", fontSize: "clamp(32px,3.4vw,46px)", fontWeight: 400, fontStyle: "italic", color: "var(--text)", lineHeight: 1.1, margin: "0 0 28px" }}>Other specialized treatments.</h2>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }} className="card-grid-3">
              {ALL_TREATMENTS.filter((t) => t.title !== data.title).map((t) => <OtherTreatmentCard key={t.title} t={t} />)}
            </div>
          </Reveal>
        </div>
      </section>

    </main>
    <Footer />
  </React.Fragment>);

Object.assign(window, { Reveal, EyebrowLabel, Rule, CTA, Nav, Footer, TreatmentPage });