// Treatment detail page (e.g. TRT) — long-form sales/clinical page

function TreatmentPage({ serviceId = "trt", onIntake, onBack, doctor, showPricing }) {
  const service = SERVICES.find((s) => s.id === serviceId) || SERVICES[0];
  const isMobile = useIsMobile();

  return (
    <div>
      {/* Hero */}
      <section style={{ paddingTop: isMobile ? 32 : 64, paddingBottom: isMobile ? 56 : 96, position: "relative", overflow: "hidden" }}>
        <div className="container">
          <button onClick={onBack} style={{ background: "transparent", border: "none", color: "var(--cream-400)", fontSize: 13, marginBottom: 32, display: "inline-flex", alignItems: "center", gap: 6 }}>
            <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><ArrowRight size={12} /></span> Back to all treatments
          </button>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr", gap: isMobile ? 32 : 60, alignItems: "center" }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
                <span style={{ color: "var(--gold-500)" }}><ServiceIcon id={service.id} size={32} /></span>
                <span className="eyebrow">GTX {service.short} Program</span>
              </div>
              <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 84px)", margin: 0, lineHeight: 1.0 }}>
                Get your <span className="serif-italic" style={{ color: "var(--gold-500)" }}>edge</span> back.
              </h1>
              <p style={{ fontSize: 19, color: "var(--cream-200)", lineHeight: 1.55, marginTop: 28, maxWidth: 540 }}>
                Physician-managed testosterone replacement, designed by a urologist who's spent 33 years treating hormonal medicine — not a script-pad startup running on volume.
              </p>
              {showPricing !== "hidden" && (
                <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginTop: 32 }}>
                  <span className="display tab-num" style={{ fontSize: 56, color: "var(--gold-500)" }}>${service.price}</span>
                  <span style={{ color: "var(--cream-300)" }}>/month — physician, medication, and care included</span>
                </div>
              )}
              <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
                <button onClick={onIntake} className="btn btn-primary btn-lg">Start free assessment <ArrowRight /></button>
                <button className="btn btn-ghost btn-lg">Talk to a doctor</button>
              </div>
            </div>
            <div style={{ position: "relative" }}>
              {service.id === "trt" ? <ProtocolCard /> : <GenericServiceCard service={service} />}
            </div>
          </div>
        </div>
      </section>

      {/* Symptom checklist — TRT only */}
      {service.id === "trt" && (
      <section className="sec-pad section-light">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 32 : 80, alignItems: "flex-start" }}>
            <div style={isMobile ? {} : { position: "sticky", top: 100 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Is this you?</div>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 56px)", margin: 0, color: "var(--cream-50)" }}>
                Low T <span className="serif-italic" style={{ color: "var(--gold-700)" }}>doesn't show up</span> on an annual physical.
              </h2>
              <p style={{ marginTop: 24, color: "var(--cream-500)", fontSize: 15, lineHeight: 1.7 }}>
                Most PCPs don't run a full hormone panel and don't know how to read it if they do. The symptoms get attributed to "getting older." They're not.
              </p>
            </div>
            <div>
              <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 0 }}>
                {[
                  ["Persistent fatigue", "Even after 8 hours of sleep"],
                  ["Brain fog", "Slower recall, lost focus"],
                  ["Reduced libido", "Less interest, less spontaneous"],
                  ["Erectile changes", "Quality, frequency, or both"],
                  ["Muscle loss", "Same workout, smaller results"],
                  ["Belly fat", "Resistant to diet & exercise"],
                  ["Mood shifts", "Irritable, flat, less driven"],
                  ["Slow recovery", "Workouts hurt for days"],
                ].map(([t, s], i) => (
                  <div key={t} style={{
                    padding: "20px 0",
                    borderTop: "1px solid rgba(11,11,9,0.10)",
                    borderRight: !isMobile && i % 2 === 0 ? "1px solid rgba(11,11,9,0.10)" : "none",
                    paddingRight: !isMobile && i % 2 === 0 ? 24 : 0,
                    paddingLeft: !isMobile && i % 2 === 1 ? 24 : 0,
                  }}>
                    <div className="display" style={{ fontSize: 22, color: "var(--cream-50)", marginBottom: 4 }}>{t}</div>
                    <div style={{ fontSize: 13, color: "var(--cream-500)" }}>{s}</div>
                  </div>
                ))}
              </div>
              <div style={{ paddingTop: 32, borderTop: "1px solid rgba(11,11,9,0.10)", marginTop: 8 }}>
                <button onClick={onIntake} className="btn btn-dark">Take the 5-min assessment <ArrowRight /></button>
                <span style={{ marginLeft: 16, color: "var(--cream-500)", fontSize: 14 }}>3 or more? Worth getting tested.</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      )}

      {/* Protocol breakdown — TRT only (testosterone cypionate, anastrozole, HCG) */}
      {service.id === "trt" && (
      <section className="sec-pad" style={{ background: "var(--ink-900)" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>The protocol</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 56px)", margin: 0, marginBottom: 64, maxWidth: 800 }}>
            What's <span className="serif-italic" style={{ color: "var(--gold-500)" }}>actually</span> in your monthly subscription.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
            {[
              {
                t: "Testosterone Cypionate",
                spec: "200 mg/mL · 10 mL vial",
                body: "The gold-standard injectable ester. Dispensed by licensed pharmacies, batch-tested. Most patients dose 0.4–0.6 mL once weekly.",
                tag: "FDA-approved bioidentical",
              },
              {
                t: "Anastrozole (PRN)",
                spec: "0.25 mg tabs · 30 ct",
                body: "Aromatase inhibitor, prescribed only when bloodwork shows elevated estradiol. Most patients don't need it. We don't auto-bundle.",
                tag: "Only when indicated",
              },
              {
                t: "HCG (optional)",
                spec: "5,000 IU vial",
                body: "Maintains testicular function and fertility on TRT. Especially important for men under 40 or planning kids.",
                tag: "Optional add-on",
              },
            ].map((p) => (
              <div key={p.t} style={{ background: "var(--ink-800)", padding: 32 }}>
                <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--gold-500)", border: "1px solid var(--gold-700)", padding: "4px 8px", borderRadius: 999 }}>{p.tag}</span>
                <h3 className="display" style={{ fontSize: 26, margin: "20px 0 6px" }}>{p.t}</h3>
                <div style={{ fontSize: 13, color: "var(--cream-400)", marginBottom: 16, fontFamily: "var(--font-mono)" }}>{p.spec}</div>
                <p style={{ fontSize: 14, color: "var(--cream-300)", lineHeight: 1.6, margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: isMobile ? 16 : 24, marginTop: isMobile ? 32 : 56 }}>
            {[
              ["Bring your own labs", "Any provider you prefer — we recommend Function Health"],
              ["Physician calls", "Up to 3 per month, Mon–Fri business hours"],
              ["Dose adjustments", "No extra fees"],
              ["Free shipping", "Climate-controlled, discreet"],
            ].map(([t, s]) => (
              <div key={t} style={{ paddingTop: 20, borderTop: "1px solid var(--line-strong)" }}>
                <div style={{ color: "var(--gold-500)", marginBottom: 8 }}><Check size={16} /></div>
                <div style={{ fontSize: 15, color: "var(--cream-50)", marginBottom: 4 }}>{t}</div>
                <div style={{ fontSize: 13, color: "var(--cream-400)" }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* Timeline — TRT only (week-by-week TRT effects) */}
      {service.id === "trt" && (
      <section className="sec-pad section-light">
        <div className="container-narrow">
          <div className="eyebrow" style={{ marginBottom: 16 }}>What to expect</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 56px)", margin: 0, marginBottom: 64, color: "var(--cream-50)" }}>
            Your first <span className="serif-italic" style={{ color: "var(--gold-700)" }}>twelve weeks</span>.
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {[
              { wk: "Week 1–2", t: "Energy lifts first", b: "Most patients notice mental clarity and a return of morning energy. Sleep often deepens." },
              { wk: "Week 3–4", t: "Mood and motivation", b: "The flatness lifts. You'll feel more like yourself. Libido begins returning." },
              { wk: "Week 6", t: "First lab recheck", b: "We re-test total T, free T, estradiol, hematocrit. Adjust dose as needed. This is included." },
              { wk: "Week 8–12", t: "Body composition", b: "Lean mass increases, body fat shifts. Recovery between workouts is meaningfully better." },
              { wk: "Month 6", t: "Steady state", b: "Comprehensive panel. Most patients are at optimal levels and feeling 10+ years younger." },
            ].map((row, i, arr) => (
              <div key={row.wk} style={{
                display: "grid", gridTemplateColumns: isMobile ? "1fr" : "180px 1fr",
                gap: isMobile ? 8 : 32, padding: isMobile ? "24px 0" : "32px 0",
                borderBottom: i < arr.length - 1 ? "1px solid rgba(11,11,9,0.10)" : "none",
              }}>
                <div style={{ color: "var(--gold-700)", fontSize: 13, fontWeight: 500, letterSpacing: "0.05em", paddingTop: 4 }}>{row.wk}</div>
                <div>
                  <h3 className="display" style={{ fontSize: 28, margin: 0, marginBottom: 8, color: "var(--cream-50)" }}>{row.t}</h3>
                  <p style={{ margin: 0, color: "var(--cream-500)", fontSize: 15, lineHeight: 1.6 }}>{row.b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* Non-TRT placeholder: hero + comparison + CTA only. Detailed protocols delivered during consult. */}
      {service.id !== "trt" && (
        <section className="sec-pad section-light">
          <div className="container-narrow" style={{ textAlign: "center" }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What to expect</div>
            <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 42px)", margin: 0, marginBottom: 20, color: "var(--cream-50)" }}>
              Protocols are <span className="serif-italic" style={{ color: "var(--gold-700)" }}>built in consult</span>, not from a template.
            </h2>
            <p style={{ color: "var(--cream-500)", fontSize: 16, lineHeight: 1.6, maxWidth: 640, margin: "0 auto 24px" }}>
              Your {service.name.toLowerCase()} protocol — dosing, stack, monitoring — is designed by your physician based on your labs, goals, and history. We do not auto-bundle and we do not prescribe without rationale.
            </p>
            <button onClick={onIntake} className="btn btn-dark">Start free assessment <ArrowRight /></button>
          </div>
        </section>
      )}

      {/* Comparison table */}
      <section className="sec-pad" style={{ background: "var(--ink-900)" }}>
        <div className="container-narrow">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>How we compare</div>
            <h2 className="display" style={{ fontSize: "clamp(34px, 4vw, 50px)", margin: 0 }}>
              GTX vs. <span className="serif-italic" style={{ color: "var(--gold-500)" }}>everyone else</span>.
            </h2>
          </div>
          <div style={{ border: "1px solid var(--line-strong)", borderRadius: 14, overflow: "hidden", overflowX: isMobile ? "auto" : "visible" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", borderBottom: "1px solid var(--line-strong)", background: "var(--ink-800)", minWidth: isMobile ? 640 : "auto" }}>
              <div style={{ padding: 20 }}></div>
              <div style={{ padding: 20, textAlign: "center", background: "rgba(13,110,201,0.08)" }}>
                <div className="display" style={{ fontSize: 18, color: "var(--gold-500)" }}>GTX</div>
              </div>
              <div style={{ padding: 20, textAlign: "center" }}>
                <div className="display" style={{ fontSize: 18, color: "var(--cream-300)" }}>Big telehealth</div>
              </div>
              <div style={{ padding: 20, textAlign: "center" }}>
                <div className="display" style={{ fontSize: 18, color: "var(--cream-300)" }}>Local clinic</div>
              </div>
            </div>
            {[
              ["Provider", "Urologist, 35+ yrs in practice", "Nurse practitioner", "Varies"],
              ["Time to first dose", "≈ 7 days", "≈ 5–10 days", "4–8 weeks"],
              ["Labs", "Your own source — we recommend Function Health", "Bundled, annual only", "Out of pocket"],
              ["Physician calls", "Up to 3/mo, Mon–Fri", "Limited / staff", "Phone only"],
              ["Dose adjustments", "Free", "Often charged", "Free"],
              ["Membership", "From $50/mo", "$199–$299/mo", "$200–$500+/mo"],
            ].map((row, i, arr) => (
              <div key={row[0]} style={{
                display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr",
                borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                minWidth: isMobile ? 640 : "auto",
              }}>
                <div style={{ padding: 20, fontSize: 14, color: "var(--cream-200)" }}>{row[0]}</div>
                <div style={{ padding: 20, fontSize: 14, color: "var(--cream-50)", textAlign: "center", background: "rgba(13,110,201,0.04)", fontWeight: 500 }}>{row[1]}</div>
                <div style={{ padding: 20, fontSize: 14, color: "var(--cream-400)", textAlign: "center" }}>{row[2]}</div>
                <div style={{ padding: 20, fontSize: 14, color: "var(--cream-400)", textAlign: "center" }}>{row[3]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection onIntake={onIntake} />
    </div>
  );
}

function GenericServiceCard({ service }) {
  return (
    <div style={{ background: "var(--ink-800)", border: "1px solid var(--line-strong)", borderRadius: 12, padding: 28, position: "relative" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
        <div className="label-sm">Program</div>
        <span className="chip" style={{ fontSize: 11 }}>{service.short}</span>
      </div>
      <div style={{ color: "var(--gold-500)", marginBottom: 16 }}>
        <ServiceIcon id={service.id} size={36} />
      </div>
      <div className="display" style={{ fontSize: 26, marginBottom: 10 }}>{service.name}</div>
      <p style={{ fontSize: 14, color: "var(--cream-300)", lineHeight: 1.6, margin: "0 0 24px" }}>{service.blurb}</p>
      <div style={{ paddingTop: 20, borderTop: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 10, fontSize: 13, color: "var(--cream-300)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}><span style={{ color: "var(--gold-500)" }}><Check /></span>Physician-designed protocol</div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}><span style={{ color: "var(--gold-500)" }}><Check /></span>Licensed pharmacy dispensing</div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}><span style={{ color: "var(--gold-500)" }}><Check /></span>Dose adjustments included — bring your own labs</div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}><span style={{ color: "var(--gold-500)" }}><Check /></span>Discreet shipping included</div>
      </div>
    </div>
  );
}

function ProtocolCard() {
  return (
    <div style={{ background: "var(--ink-800)", border: "1px solid var(--line-strong)", borderRadius: 12, padding: 28, position: "relative" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
        <div className="label-sm">Sample protocol</div>
        <span className="chip" style={{ fontSize: 11 }}>Patient ID #M-7842</span>
      </div>
      <div className="display" style={{ fontSize: 24, marginBottom: 20 }}>Marcus, 42 — Week 12</div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 24 }}>
        <Metric label="Total T" before="287" after="872" unit="ng/dL" />
        <Metric label="Energy" before="3" after="8" unit="/10" />
        <Metric label="Body fat" before="24%" after="18%" unit="" />
        <Metric label="Sleep score" before="62" after="84" unit="" />
      </div>

      <div style={{ paddingTop: 20, borderTop: "1px solid var(--line)" }}>
        <div className="label-sm" style={{ marginBottom: 12 }}>Current Rx</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
          <div style={{ display: "flex", justifyContent: "space-between", color: "var(--cream-200)" }}>
            <span>T. Cypionate 200mg/mL</span>
            <span className="tab-num" style={{ color: "var(--cream-400)" }}>0.5 mL · weekly</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", color: "var(--cream-200)" }}>
            <span>HCG 5000 IU</span>
            <span className="tab-num" style={{ color: "var(--cream-400)" }}>500 IU · 2x/wk</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Metric({ label, before, after, unit }) {
  return (
    <div style={{ background: "var(--ink-700)", borderRadius: 8, padding: 14 }}>
      <div style={{ fontSize: 11, color: "var(--cream-400)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
        <span className="tab-num" style={{ fontSize: 13, color: "var(--cream-500)", textDecoration: "line-through" }}>{before}</span>
        <span style={{ color: "var(--cream-500)", fontSize: 11 }}>→</span>
        <span className="display tab-num" style={{ fontSize: 22, color: "var(--gold-500)" }}>{after}</span>
        <span style={{ fontSize: 11, color: "var(--cream-400)" }}>{unit}</span>
      </div>
    </div>
  );
}

Object.assign(window, { TreatmentPage });