// Homepage sections — Blueline-inspired light theme
// Hero (full photo), Trust strip, Services, Benefits, Steps, Doctor, Pricing, Testimonials, FAQ, CTA

// Photos resolved live from window.RECOVERY_CONTENT.photos at access time
const PHOTO_DEFAULTS = {
  hero: "https://images.unsplash.com/photo-1521119989659-a83eee488004?w=1400&q=80&auto=format&fit=crop",
  doctor: "https://images.unsplash.com/photo-1612531386530-97286d97c2d2?w=900&q=80&auto=format&fit=crop",
};
const PHOTOS = new Proxy({}, {
  get(_, key) {
    const c = (window.RECOVERY_CONTENT && window.RECOVERY_CONTENT.photos) || {};
    // An explicit empty string means "no photo" — don't substitute a stock default
    if (key in c) return c[key];
    return PHOTO_DEFAULTS[key] || PHOTO_DEFAULTS.hero;
  },
});

// ── Hero — full-bleed photo, centered-left white text, blue pill CTAs ──
function Hero({ headline, sub, onIntake, onJoin, hero = {} }) {
  const primaryCta = hero.primaryCta || "Start your membership today!";
  const secondaryCta = hero.secondaryCta || "Explore treatments";
  const chip = hero.chip || "Now accepting new patients";
  const chipMeta = hero.chipMeta || "";
  const rating = hero.rating || "";
  const perks = hero.perks || "";
  const isMobile = useIsMobile();
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "#0a2a4a" }}>
      {/* Photo background + blue-tinted scrim for text legibility */}
      <div style={{
        position: "absolute", inset: 0,
        // Focal point keeps the subject clear of the headline; overridable via content.photos.heroPosition
        background: `url(${PHOTOS.hero}) ${isMobile ? (PHOTOS.heroPositionMobile || "60% center") : (PHOTOS.heroPosition || "35% center")}/cover no-repeat`,
      }}></div>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(100deg, rgba(6, 32, 58, 0.88) 0%, rgba(8, 44, 78, 0.72) 45%, rgba(10, 60, 100, 0.35) 100%)",
      }}></div>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{
          minHeight: isMobile ? "78vh" : "86vh",
          display: "flex", flexDirection: "column", justifyContent: "center",
          padding: isMobile ? "110px 0 72px" : "140px 0 100px",
          maxWidth: 780,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 24, flexWrap: "wrap" }}>
            <span className="chip chip-onphoto"><span className="chip-dot" style={{ background: "#fff" }}></span>{chip}</span>
            {chipMeta && <span style={{ fontSize: 13, color: "rgba(255,255,255,0.85)" }}>{chipMeta}</span>}
          </div>
          <h1 className="display" style={{
            fontSize: isMobile ? "clamp(34px, 9.5vw, 46px)" : "clamp(42px, 4.8vw, 64px)",
            margin: 0, color: "#ffffff", lineHeight: 1.12, textTransform: "none",
          }}>
            {headline.before}{" "}
            <span style={{ color: "#7cc0f4" }}>{headline.italic}</span>
            {headline.after}
          </h1>
          <p style={{
            fontSize: isMobile ? 16 : 19, lineHeight: 1.65, color: "rgba(255,255,255,0.92)",
            marginTop: isMobile ? 18 : 26, maxWidth: 620,
          }}>
            {sub}
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: isMobile ? 28 : 36, flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={onJoin || onIntake} style={isMobile ? { width: "100%" } : {}}>
              {primaryCta} <ArrowRight />
            </button>
            <button className="btn btn-ghost-onphoto btn-lg" style={isMobile ? { width: "100%" } : {}}>{secondaryCta}</button>
          </div>
          {(rating || perks) && (
            <div style={{ display: "flex", alignItems: "center", gap: isMobile ? 14 : 24, marginTop: isMobile ? 28 : 40, flexWrap: "wrap", fontSize: 13, color: "rgba(255,255,255,0.85)" }}>
              {rating && <span>{rating}</span>}
              {rating && perks && !isMobile && <span style={{ height: 14, width: 1, background: "rgba(255,255,255,0.4)" }}></span>}
              {perks && <span>{perks}</span>}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ── Trust strip ──
function TrustStrip() {
  const fromContent = window.RECOVERY_CONTENT && window.RECOVERY_CONTENT.trustStrip;
  // Empty array in content.json = hide the section; defaults only when the key is absent
  const items = Array.isArray(fromContent)
    ? fromContent
    : ["FORBES", "MEN'S HEALTH", "GQ", "BLOOMBERG", "WSJ", "ATHLETIC"];
  if (!items.length) return null;
  return (
    <section style={{ padding: "28px 0", borderBottom: "1px solid var(--line)", background: "#ffffff" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
          <span className="label-sm">As featured in</span>
          <div style={{ display: "flex", alignItems: "center", gap: 48, flexWrap: "wrap" }}>
            {items.map((p) => (
              <span key={p} style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, letterSpacing: "0.1em", color: "var(--cream-400)" }}>
                {p}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Services grid — white cards, shadow, blue icons ──
function ServicesSection({ enabledServices, showPricing, onServiceClick }) {
  const visible = SERVICES.filter((s) => enabledServices.includes(s.id));
  const isMobile = useIsMobile();
  return (
    <section className="sec-pad" id="treatments" style={{ background: "#ffffff" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 760, margin: isMobile ? "0 auto 40px" : "0 auto 64px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Our Treatments")}</div>
          <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 7.5vw, 34px)" : "clamp(30px, 3.4vw, 42px)", margin: 0 }}>
            {t("Comprehensive care, ")}<span style={{ color: "var(--gold-500)" }}>{t("built around you")}</span>
          </h2>
          <p style={{ color: "var(--cream-300)", fontSize: 16, marginTop: 18, lineHeight: 1.65 }}>
            {t("Every protocol is designed and overseen by a urologist with more than 35 years in practice — not a nurse practitioner with a script pad.")}
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 16 : 24 }}>
          {visible.map((s) => (
            <ServiceCard key={s.id} service={s} showPricing={showPricing} onClick={() => onServiceClick?.(s)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ service, showPricing, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "#ffffff",
        border: "1px solid var(--line)",
        borderRadius: 12,
        boxShadow: hover ? "var(--shadow-card-hover)" : "var(--shadow-card)",
        transform: hover ? "translateY(-4px)" : "none",
        padding: "32px 28px",
        cursor: "pointer",
        transition: "box-shadow 200ms, transform 200ms",
        position: "relative",
        minHeight: 260,
        display: "flex", flexDirection: "column",
      }}
    >
      {service.tag && (
        <span style={{
          position: "absolute", top: 20, right: 20,
          fontSize: 10, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase",
          color: "#ffffff", background: "var(--gold-500)",
          padding: "4px 10px", borderRadius: 999,
        }}>{service.tag}</span>
      )}
      <div style={{
        width: 56, height: 56, borderRadius: "50%",
        background: "rgba(13, 110, 201, 0.08)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--gold-500)", marginBottom: 20,
      }}>
        <ServiceIcon id={service.id} size={28} />
      </div>
      <h3 className="display" style={{ fontSize: 20, margin: 0, marginBottom: 10 }}>{service.name}</h3>
      <p style={{ fontSize: 14, color: "var(--cream-300)", margin: 0, marginBottom: 22, flex: 1, lineHeight: 1.6 }}>
        {service.blurb}
      </p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "auto" }}>
        {showPricing === "hidden" ? (
          <span style={{ fontSize: 13, color: "var(--cream-400)" }}>{t("See if you qualify")}</span>
        ) : (
          <span style={{ fontSize: 14, color: "var(--cream-300)" }}>
            {showPricing === "starting" ? t("Starting at ") : ""}
            <span className="display tab-num" style={{ fontSize: 20, color: "var(--cream-50)" }}>${service.price}</span>
            <span style={{ fontSize: 13, color: "var(--cream-400)" }}>{t("/mo")}</span>
          </span>
        )}
        <span style={{ color: "var(--gold-500)", display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 700, transform: hover ? "translateX(4px)" : "none", transition: "transform 200ms" }}>
          {t("Learn more")} <ArrowRight size={12} />
        </span>
      </div>
    </div>
  );
}

// ── Benefits + why-us cards (light band) ──
const BENEFITS_DEFAULT = [
  "Increased Energy", "Enhanced Mood", "Improved Libido", "Increased Lean Muscle",
  "Decreased Visceral Fat", "Better Sleep", "Cognitive Clarity", "Resilient to Stress",
];

function WhyUs() {
  const c = window.RECOVERY_CONTENT || {};
  const docName = (c.doctor && c.doctor.name) || "Dr. Miguel A. Martinez";
  const benefits = ((Array.isArray(c.benefits) && c.benefits.length) ? c.benefits : BENEFITS_DEFAULT).map((b) => t(b));
  const points = [
    { title: t("A physician, not a script mill"), body: t("Every protocol is designed and overseen by {doc} — a urologist in continuous practice since 1989. Every patient. Every refill.").replace("{doc}", docName) },
    { title: t("The full picture, together"), body: t("We don't treat T in isolation. Full HPG axis labs, body-composition markers, sleep and recovery data — one complete protocol built for your goals.") },
    { title: t("Your data, transparent"), body: t("See your trends, side-effect notes, and protocol changes in your dashboard. Message your physician between visits. No phone trees.") },
    { title: t("Pharmacy-direct, no middleman"), body: t("We partner with licensed pharmacies. Quality-tested medication, cold-chain shipping where required, refills on autopilot.") },
  ];
  const isMobile = useIsMobile();
  return (
    <section className="sec-pad section-light" id="why">
      <div className="container">
        {/* Benefits checklist */}
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 36 : 80, alignItems: "center", marginBottom: isMobile ? 56 : 96 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Benefits of Hormone Therapy")}</div>
            <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 7.5vw, 34px)" : "clamp(30px, 3.4vw, 42px)", margin: 0 }}>
              {t("Discover a ")}<span style={{ color: "var(--gold-500)" }}>{t("new lease on life")}</span>
            </h2>
            <p style={{ marginTop: 20, color: "var(--cream-300)", fontSize: 16, lineHeight: 1.7, maxWidth: 480 }}>
              {t("Our physician-led programs are designed to help you regain vitality, improve your overall well-being, and restore balance in your life. With a tailored approach, you can experience:")}
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: isMobile ? 12 : 16 }}>
            {benefits.map((b) => (
              <div key={b} style={{
                display: "flex", alignItems: "center", gap: 12,
                background: "#ffffff", border: "1px solid var(--line)",
                borderRadius: 10, padding: "14px 16px",
                boxShadow: "var(--shadow-card)",
                fontSize: isMobile ? 13 : 15, fontWeight: 600, color: "var(--cream-100)",
              }}>
                <span style={{
                  width: 26, height: 26, minWidth: 26, borderRadius: "50%",
                  background: "var(--gold-500)", color: "#fff",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                }}><Check size={13} /></span>
                {b}
              </div>
            ))}
          </div>
        </div>
        {/* Why-us cards */}
        <div style={{ textAlign: "center", maxWidth: 700, margin: isMobile ? "0 auto 36px" : "0 auto 56px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Why GTX")}</div>
          <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 7.5vw, 34px)" : "clamp(30px, 3.4vw, 42px)", margin: 0 }}>
            {t("The difference is the ")}<span style={{ color: "var(--gold-500)" }}>{t("physician")}</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)", gap: isMobile ? 16 : 24 }}>
          {points.map((p) => (
            <div key={p.title} style={{
              background: "#ffffff", border: "1px solid var(--line)", borderRadius: 12,
              padding: "28px 24px", boxShadow: "var(--shadow-card)",
            }}>
              <h3 className="display" style={{ fontSize: 17, margin: 0, marginBottom: 12, color: "var(--gold-600)" }}>{p.title}</h3>
              <p style={{ margin: 0, color: "var(--cream-300)", fontSize: 14, lineHeight: 1.65 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── How it works — "Your Journey" numbered steps ──
function HowItWorks({ onIntake }) {
  const steps = [
    { n: 1, t: t("Tell us about you"), b: t("A 5-minute online assessment. Symptoms, history, what you're trying to get back.") },
    { n: 2, t: t("Get bloodwork"), b: t("Get labs through any provider you prefer — we recommend [Function Health](https://my.functionhealth.com/signup?code=JDIAZ22&_saasquatch=JDIAZ22&d=FHREF25) ($25 off through our link) — or send us results from the last 90 days.") },
    { n: 3, t: t("Meet your doctor"), b: t("A video consultation. Your urologist reviews your labs, builds your protocol, answers everything.") },
    { n: 4, t: t("Treatment ships"), b: t("Discreet, climate-controlled shipping. Auto-refill, cancel anytime.") },
  ];
  const isMobile = useIsMobile();
  return (
    <section className="sec-pad" id="how" style={{ background: "#ffffff" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 760, margin: isMobile ? "0 auto 44px" : "0 auto 64px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Your journey to comprehensive wellness")}</div>
          <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 7.5vw, 34px)" : "clamp(30px, 3.4vw, 42px)", margin: 0 }}>
            {t("We've made it ")}<span style={{ color: "var(--gold-500)" }}>{t("simple to start")}</span>
          </h2>
          <p style={{ color: "var(--cream-300)", fontSize: 16, marginTop: 18, lineHeight: 1.65 }}>
            {t("From assessment to your first dose in days. Here is what you can expect:")}
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)", gap: isMobile ? 20 : 24 }}>
          {steps.map((s) => (
            <div key={s.n} style={{ textAlign: "center", padding: "0 8px" }}>
              <div className="display" style={{ fontSize: 15, fontWeight: 800, letterSpacing: "0.08em", color: "var(--gold-500)", textTransform: "uppercase", marginBottom: 14 }}>
                {t("Step")} {s.n}.
              </div>
              <h3 className="display" style={{ fontSize: 19, margin: 0, marginBottom: 12 }}>{s.t}</h3>
              <p style={{ color: "var(--cream-300)", fontSize: 14, lineHeight: 1.65, margin: 0 }}>{renderLinks(s.b)}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: isMobile ? 44 : 64 }}>
          <button className="btn btn-primary btn-lg" onClick={onIntake}>{t("Start your assessment")} <ArrowRight /></button>
          <p style={{ fontSize: 13, color: "var(--cream-400)", marginTop: 16 }}>{t("Free · 5 minutes · No credit card required")}</p>
        </div>
      </div>
    </section>
  );
}

// ── Labs required before treatment ──
function LabsRequired() {
  const c = window.RECOVERY_CONTENT || {};
  const L = c.labsRequired;
  const isMobile = useIsMobile();
  if (!L || !Array.isArray(L.groups) || !L.groups.length) return null;
  return (
    <section className="sec-pad section-light" id="labs">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: isMobile ? "0 auto 36px" : "0 auto 48px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{L.eyebrow}</div>
          <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 7.5vw, 34px)" : "clamp(30px, 3.4vw, 42px)", margin: 0 }}>
            {L.heading} {L.headingAccent && <span style={{ color: "var(--gold-500)" }}>{L.headingAccent}</span>}
          </h2>
          {L.intro && <p style={{ color: "var(--cream-300)", fontSize: 16, marginTop: 18, lineHeight: 1.65 }}>{L.intro}</p>}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 16 : 24, maxWidth: 900, margin: "0 auto" }}>
          {L.groups.map((g) => (
            <div key={g.title} style={{ background: "#ffffff", border: "1px solid var(--line)", borderRadius: 12, padding: isMobile ? "24px 20px" : "28px 26px", boxShadow: "var(--shadow-card)" }}>
              <h3 className="display" style={{ fontSize: 17, margin: "0 0 16px", color: "var(--gold-600)" }}>{g.title}</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                {(g.items || []).map((item) => (
                  <li key={item} style={{ display: "flex", alignItems: "center", gap: 11, fontSize: 15, color: "var(--cream-100)", fontWeight: 600 }}>
                    <span style={{ width: 22, height: 22, minWidth: 22, borderRadius: "50%", background: "rgba(13,110,201,0.10)", color: "var(--gold-500)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Check size={12} /></span>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        {L.footnote && (
          <p style={{ textAlign: "center", fontSize: 14, color: "var(--cream-300)", marginTop: 28, maxWidth: 720, marginLeft: "auto", marginRight: "auto", lineHeight: 1.7 }}>
            {renderLinks(L.footnote)}
          </p>
        )}
      </div>
    </section>
  );
}

// ── Doctor section ──
function DoctorSection({ doctor }) {
  const isMobile = useIsMobile();
  const hasPhoto = !!PHOTOS.doctor;
  return (
    <section className="sec-pad section-light" id="doctor">
      <div className="container">
        <div style={hasPhoto
          ? { display: "grid", gridTemplateColumns: isMobile ? "1fr" : "0.85fr 1.15fr", gap: isMobile ? 40 : 80, alignItems: "center" }
          : { maxWidth: 820, margin: "0 auto" }}>
          {hasPhoto && (
          <div style={{ position: "relative" }}>
            <div style={{
              aspectRatio: "4/5",
              background: `url(${PHOTOS.doctor}) center/cover`,
              borderRadius: 12,
              boxShadow: "var(--shadow-card-hover)",
            }}></div>
            <div style={{
              position: "absolute", bottom: 20, left: 20, right: 20,
              background: "rgba(255,255,255,0.96)", backdropFilter: "blur(12px)",
              border: "1px solid var(--line)",
              padding: 18, borderRadius: 10,
              boxShadow: "var(--shadow-card)",
            }}>
              <div className="label-sm" style={{ color: "var(--gold-500)", marginBottom: 6 }}>{t("Medical Director")}</div>
              <div className="display" style={{ fontSize: 19 }}>{doctor.name}</div>
              <div style={{ fontSize: 13, color: "var(--cream-300)", marginTop: 4 }}>{doctor.credentials}</div>
            </div>
          </div>
          )}
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Your physician")}</div>
            {(() => {
              const fullQuote = doctor.quote || "I built this practice for the patients I couldn't reach in the OR.";
              const italicPart = doctor.quoteItalic;
              if (italicPart && fullQuote.includes(italicPart)) {
                const [before, after] = fullQuote.split(italicPart);
                return (
                  <h2 className="display" style={{ fontSize: isMobile ? "clamp(24px, 6.5vw, 30px)" : "clamp(26px, 2.8vw, 36px)", margin: 0, marginBottom: 24, lineHeight: 1.3 }}>
                    "{before}<span style={{ color: "var(--gold-500)" }}>{italicPart}</span>{after}"
                  </h2>
                );
              }
              return (
                <h2 className="display" style={{ fontSize: isMobile ? "clamp(24px, 6.5vw, 30px)" : "clamp(26px, 2.8vw, 36px)", margin: 0, marginBottom: 24, lineHeight: 1.3 }}>
                  "{fullQuote}"
                </h2>
              );
            })()}
            <p style={{ color: "var(--cream-200)", fontSize: 16, lineHeight: 1.75, marginBottom: 20 }}>
              {doctor.bio}
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 36, borderTop: "1px solid var(--line-strong)", paddingTop: 28 }}>
              {doctor.stats.map((s) => (
                <div key={s.label}>
                  <div className="display tab-num" style={{ fontSize: isMobile ? 26 : 32, color: "var(--gold-500)" }}>{s.value}</div>
                  <div style={{ fontSize: 12, color: "var(--cream-400)", marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Concierge membership banner (rendered inside PricingTeaser) ──
function MembershipBanner({ onIntake, onJoin, isMobile }) {
  const m = (window.RECOVERY_CONTENT && window.RECOVERY_CONTENT.membership) || null;
  if (!m) return null;
  return (
    <div style={{
      background: "linear-gradient(135deg, #0a4d8c, #0d6ec9)",
      color: "#ffffff",
      borderRadius: 16,
      padding: isMobile ? "32px 24px" : "44px 48px",
      maxWidth: 1100,
      margin: isMobile ? "0 auto 32px" : "0 auto 48px",
      display: "flex", flexDirection: isMobile ? "column" : "row",
      alignItems: isMobile ? "stretch" : "center",
      gap: isMobile ? 24 : 48,
      boxShadow: "0 16px 48px rgba(10, 77, 140, 0.35)",
    }}>
      <div style={{ flex: 1 }}>
        <div className="eyebrow" style={{ marginBottom: 12, color: "rgba(255,255,255,0.85)" }}>{m.name || "Concierge Membership"}</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 12 }}>
          {m.monthlyFee ? (
            <>
              <span className="display tab-num" style={{ fontSize: isMobile ? 44 : 56, lineHeight: 1 }}>${m.monthlyFee}</span>
              <span style={{ fontSize: 15, color: "rgba(255,255,255,0.8)" }}>/month</span>
            </>
          ) : (
            <span className="display" style={{ fontSize: isMobile ? 24 : 30, lineHeight: 1.25 }}>
              {m.bannerLine ? m.bannerLine : (<>One membership. <span style={{ color: "#9fd0f7" }}>Everything covered.</span></>)}
            </span>
          )}
        </div>
        <p style={{ color: "rgba(255,255,255,0.9)", fontSize: 15, lineHeight: 1.65, margin: 0, maxWidth: 560 }}>{m.blurb}</p>
        {m.referralNote && (
          <p style={{ color: "rgba(255,255,255,0.75)", fontSize: 13, lineHeight: 1.6, margin: "12px 0 0" }}>{m.referralNote}</p>
        )}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: isMobile ? "stretch" : "flex-end" }}>
        {m.promoNote && (
          <span className="chip chip-onphoto" style={{ fontSize: 12, alignSelf: isMobile ? "flex-start" : "flex-end" }}>
            <span className="chip-dot" style={{ background: "#fff" }}></span>{m.promoNote}
          </span>
        )}
        <button className="btn btn-lg" onClick={onJoin || onIntake} style={{ background: "#ffffff", color: "var(--gold-600)", ...(isMobile ? { width: "100%" } : {}) }}>
          {t("Become a member")} <ArrowRight />
        </button>
      </div>
    </div>
  );
}

// ── Pricing teaser — membership tiers ──
function PricingTeaser({ enabledServices, showPricing, onIntake, onJoin }) {
  const m = (window.RECOVERY_CONTENT && window.RECOVERY_CONTENT.membership) || {};
  const tiers = (Array.isArray(m.tiers) && m.tiers.length) ? m.tiers : null;
  const isMobile = useIsMobile();

  // Legacy fallback: no tiers configured -> old per-service pricing cards
  if (!tiers) {
    if (showPricing === "hidden") return null;
    const popular = SERVICES.filter((s) => enabledServices.includes(s.id) && ["trt", "weight", "sex"].includes(s.id));
    if (popular.length === 0) return null;
    return (
      <section className="sec-pad" id="pricing" style={{ background: "#ffffff" }}>
        <div className="container">
          <MembershipBanner onIntake={onIntake} onJoin={onJoin} isMobile={isMobile} />
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : `repeat(${popular.length}, 1fr)`, gap: isMobile ? 16 : 24, maxWidth: 1100, margin: "0 auto" }}>
            {popular.map((s) => (
              <PricingCard key={s.id} service={s} showPricing={showPricing} highlighted={s.id === "trt" && !isMobile} onIntake={onIntake} />
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="sec-pad" id="pricing" style={{ background: "#ffffff" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: isMobile ? "0 auto 40px" : "0 auto 64px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Membership pricing")}</div>
          <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 7.5vw, 34px)" : "clamp(30px, 3.4vw, 42px)", margin: 0 }}>
            {t("Honest pricing. ")}<span style={{ color: "var(--gold-500)" }}>{t("No surprises.")}</span>
          </h2>
          <p style={{ color: "var(--cream-300)", fontSize: 16, marginTop: 18, lineHeight: 1.65 }}>
            {m.blurb || "One membership covers your physician oversight, protocol management, and direct messaging."}
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 16 : 24, maxWidth: 1100, margin: "0 auto" }}>
          {tiers.map((t, i) => {
            const highlighted = t.id === "ambassador" && !isMobile;
            return (
              <div key={t.id} style={{
                background: "#ffffff",
                border: highlighted ? "2px solid var(--gold-500)" : "1px solid var(--line)",
                borderRadius: 14,
                padding: 32,
                position: "relative",
                transform: highlighted ? "translateY(-8px)" : "none",
                boxShadow: highlighted ? "var(--shadow-card-hover)" : "var(--shadow-card)",
                display: "flex", flexDirection: "column",
              }}>
                {t.tag && (
                  <span style={{
                    position: "absolute", top: -12, left: 32,
                    background: "var(--gold-500)", color: "#ffffff",
                    fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase",
                    padding: "4px 12px", borderRadius: 999,
                  }}>{t.tag}</span>
                )}
                <h3 className="display" style={{ fontSize: 20, margin: 0 }}>{t.name}</h3>
                <div className="display" style={{ fontSize: 18, color: "var(--gold-600)", margin: "12px 0 20px" }}>{t.priceLine}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                  {(t.perks || []).map((p) => (
                    <li key={p} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: "var(--cream-200)", lineHeight: 1.55 }}>
                      <span style={{ color: "var(--gold-500)", marginTop: 2 }}><Check /></span>
                      {p}
                    </li>
                  ))}
                </ul>
                <button
                  className={highlighted ? "btn btn-primary" : "btn btn-ghost"}
                  style={{ width: "100%" }}
                  onClick={() => (onJoin ? onJoin(t.id) : onIntake?.())}
                >
                  {window.t("Choose ")}{t.name.replace(/ Membership$/i, "").replace(/^Membresía /i, "")} <ArrowRight />
                </button>
                {t.note && <div style={{ marginTop: 12, fontSize: 12, color: "var(--cream-400)", textAlign: "center" }}>{t.note}</div>}
              </div>
            );
          })}
        </div>
        {m.referralNote && (
          <p style={{ textAlign: "center", fontSize: 13, color: "var(--cream-400)", marginTop: 32 }}>{m.referralNote}</p>
        )}
      </div>
    </section>
  );
}

function PricingCard({ service, showPricing, highlighted, onIntake }) {
  const features = {
    trt: ["Physician consultation", "Bring-your-own labs, physician reviewed", "Medication shipped", "Up to 3 physician calls/mo", "Side-effect monitoring"],
    weight: ["Physician-guided plan", "Weekly check-ins", "Metabolic coaching", "Side-effect support", "Lab monitoring"],
    sex: ["PDE5 therapy", "Discreet shipping"],
    longevity: ["NAD+ & senolytics", "Biomarker tracking"],
    labs: ["Bring your own labs", "Physician review"],
    consult: ["Video visit", "Written care plan"],
  }[service.id] || [];
  return (
    <div style={{
      background: "#ffffff",
      color: "var(--cream-50)",
      border: highlighted ? "2px solid var(--gold-500)" : "1px solid var(--line)",
      borderRadius: 14,
      padding: 32,
      position: "relative",
      transform: highlighted ? "translateY(-8px)" : "none",
      boxShadow: highlighted ? "var(--shadow-card-hover)" : "var(--shadow-card)",
    }}>
      {highlighted && (
        <span style={{
          position: "absolute", top: -12, left: 32,
          background: "var(--gold-500)", color: "#ffffff",
          fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase",
          padding: "4px 12px", borderRadius: 999,
        }}>Most popular</span>
      )}
      <div style={{ color: "var(--gold-500)", marginBottom: 20 }}>
        <ServiceIcon id={service.id} size={32} />
      </div>
      <h3 className="display" style={{ fontSize: 22, margin: 0 }}>{service.name}</h3>
      <p style={{ fontSize: 13, color: "var(--cream-300)", margin: "10px 0 24px", lineHeight: 1.55 }}>
        {service.blurb}
      </p>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 28 }}>
        {showPricing === "starting" && <span style={{ fontSize: 14, color: "var(--cream-400)" }}>From</span>}
        <span className="display tab-num" style={{ fontSize: 48, lineHeight: 1 }}>${service.price}</span>
        <span style={{ fontSize: 15, color: "var(--cream-400)" }}>/month</span>
      </div>
      <button
        className="btn btn-primary"
        style={{ width: "100%", marginBottom: 24 }}
        onClick={onIntake}
      >
        Get started <ArrowRight />
      </button>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
        {features.map((f) => (
          <li key={f} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: "var(--cream-200)" }}>
            <span style={{ color: "var(--gold-500)" }}><Check /></span>
            {f}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ── Testimonials ──
function Testimonials() {
  const fromContent = window.RECOVERY_CONTENT && window.RECOVERY_CONTENT.testimonials;
  // Empty array in content.json = hide the section; defaults only when the key is absent
  const items = Array.isArray(fromContent) ? fromContent : [];
  const isMobile = useIsMobile();
  if (!items.length) return null;
  return (
    <section className="sec-pad section-light">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 700, margin: isMobile ? "0 auto 36px" : "0 auto 56px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Testimonials")}</div>
          <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 7.5vw, 34px)" : "clamp(30px, 3.4vw, 42px)", margin: 0 }}>
            {t("Patients get ")}<span style={{ color: "var(--gold-500)" }}>{t("their lives back")}</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 16 : 24 }}>
          {items.map((t, i) => (
            <figure key={i} style={{ margin: 0, background: "#ffffff", border: "1px solid var(--line)", padding: 32, borderRadius: 12, display: "flex", flexDirection: "column", boxShadow: "var(--shadow-card)" }}>
              <div style={{ color: "var(--gold-500)", marginBottom: 20, display: "flex", gap: 4 }}>
                {[1,2,3,4,5].map((n) => <Star key={n} size={13} />)}
              </div>
              <blockquote style={{ fontSize: 15, lineHeight: 1.7, margin: 0, marginBottom: 28, flex: 1, color: "var(--cream-100)" }}>
                "{t.quote}"
              </blockquote>
              <figcaption style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
                {t.photo && <div style={{ width: 40, height: 40, borderRadius: "50%", background: `url(${t.photo}) center/cover` }}></div>}
                <div>
                  <div className="display" style={{ fontSize: 14 }}>{t.name}</div>
                  {t.loc && <div style={{ fontSize: 12, color: "var(--cream-400)" }}>{t.loc}</div>}
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──
function FAQ() {
  const fromContent = window.RECOVERY_CONTENT && window.RECOVERY_CONTENT.faq;
  const items = (Array.isArray(fromContent) && fromContent.length) ? fromContent : [
    { q: "Is this real medicine, or just supplements?", a: "Real prescription medicine, prescribed by a licensed physician. We are not a supplement company — we are a medical practice operating via telehealth." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="sec-pad" id="faq" style={{ background: "#ffffff" }}>
      <div className="container-narrow">
        <div style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t("Frequently asked questions")}</div>
          <h2 className="display" style={{ fontSize: "clamp(28px, 3.4vw, 40px)", margin: 0, marginBottom: 48 }}>
            {t("Questions, ")}<span style={{ color: "var(--gold-500)" }}>{t("answered honestly")}</span>
          </h2>
        </div>
        <div>
          {items.map((it, i) => (
            <div key={i} style={{ borderTop: "1px solid var(--line-strong)", borderBottom: i === items.length - 1 ? "1px solid var(--line-strong)" : "none" }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: "100%", textAlign: "left", background: "transparent", border: "none",
                  padding: "24px 0", color: "var(--cream-50)",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17,
                }}
              >
                <span style={{ flex: 1, paddingRight: 16 }}>{it.q}</span>
                <span style={{ fontSize: 22, color: "var(--gold-500)", fontWeight: 400, transform: open === i ? "rotate(45deg)" : "none", transition: "transform 200ms" }}>+</span>
              </button>
              <div style={{
                maxHeight: open === i ? 320 : 0,
                overflow: "hidden",
                transition: "max-height 300ms ease, padding 300ms ease",
                paddingBottom: open === i ? 24 : 0,
              }}>
                <p style={{ color: "var(--cream-300)", fontSize: 15, lineHeight: 1.75, margin: 0, maxWidth: 760 }}>{renderLinks(it.a)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Bottom CTA — solid blue band ──
function CTASection({ onIntake, onJoin }) {
  const isMobile = useIsMobile();
  return (
    <section className="sec-pad section-blue">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
          <h2 className="display" style={{ fontSize: isMobile ? "clamp(28px, 8vw, 36px)" : "clamp(32px, 3.8vw, 48px)", margin: 0, marginBottom: 20 }}>
            {t("You don't have to feel like this forever.")}
          </h2>
          <p style={{ color: "rgba(255,255,255,0.9)", fontSize: isMobile ? 16 : 18, lineHeight: 1.65, marginBottom: 32, maxWidth: 620, marginLeft: "auto", marginRight: "auto" }}>
            {t("Take the assessment. Get bloodwork. Talk to a real urologist. Find out what's actually going on.")}
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
            <button className="btn btn-lg" onClick={onJoin || onIntake} style={{ background: "#ffffff", color: "var(--gold-600)", ...(isMobile ? { width: "100%" } : {}) }}>
              {t("Start your membership today!")} <ArrowRight />
            </button>
            <button className="btn btn-ghost-onphoto btn-lg" style={isMobile ? { width: "100%" } : {}}>{t("Talk to support")}</button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, TrustStrip, ServicesSection, WhyUs, HowItWorks, LabsRequired, DoctorSection,
  PricingTeaser, Testimonials, FAQ, CTASection, PHOTOS,
});