// pages2.jsx — Services, ServiceDetail, Reviews, About, Contact, ServiceArea

// ════════════════════════════════════════════════════════════════
// SERVICES INDEX — magazine-style list with inline pricing
// ════════════════════════════════════════════════════════════════
function ServicesIndex() {
  const { loc, go } = useRoute();
  const SERVICES = window.HP_SERVICES;
  const base = loc ? `/${loc.id}/services` : `/services`;

  return (
    <main className="page-fade">
      {/* Page header */}
      <section style={{ paddingTop: 56, paddingBottom: 40 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot-mark"/>Services{loc ? ` · ${loc.cityShort}` : ""}</div>
          <h1 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 72px)", margin: 0, textWrap: "balance" }}>
            Six rituals. One promise.
          </h1>
          <p style={{ marginTop: 16, fontSize: 16, color: "var(--ink-3)", lineHeight: 1.65, maxWidth: 620 }}>
            Each session is shaped to you — the pressure you need today, the focus you came for. Hot stones included. Same prices at both studios.
          </p>
        </div>
      </section>

      {/* Book by symptom — quick entry point */}
      <section style={{ paddingTop: 16, paddingBottom: 56 }}>
        <div className="wrap">
          <BookBySymptom base={base} />
        </div>
      </section>

      {/* Magazine index */}
      <section style={{ paddingBottom: 64 }}>
        <div className="wrap">
          <div style={{ borderTop: "1px solid var(--ink)" }}>
            {SERVICES.map((s, i) => (
              <ServiceRow key={s.id} s={s} index={i} onClick={() => go(`${base}/${s.id}`)} />
            ))}
          </div>

          {/* footer note */}
          <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, fontSize: 12, color: "var(--muted)" }}>
            <div>Prices in USD. Gratuity not included. Memberships and gift cards available.</div>
          </div>
        </div>
      </section>

      {loc && (
        <BigCTA
          title="Pick your ritual."
          sub={`Available at ${loc.name}. Same-day appointments usually open.`}
          primary={{ label: `Book at ${loc.cityShort}`, onClick: () => go(`/${loc.id}/book`) }}
        />
      )}
    </main>
  );
}

function BookBySymptom({ base }) {
  const { go } = useRoute();
  const items = [
    { sx: "Neck & back tension",       svc: "swedish-deep-tissue",  svcName: "Swedish & Deep Tissue" },
    { sx: "Pregnancy discomfort",      svc: "essential-oil-prenatal", svcName: "Pre-Natal Massage" },
    { sx: "Sore, tired feet",          svc: "foot-reflexology",     svcName: "Foot Reflexology" },
    { sx: "Headache & eye strain",     svc: "face-and-head-massage", svcName: "Face & Head Massage" },
    { sx: "Date night or celebration", svc: "couples-massage",      svcName: "Couples Massage" },
    { sx: "Full reset, head to toe",   svc: "combo-massage",        svcName: "Combo Massage" },
  ];
  return (
    <div style={{ padding: "32px", background: "var(--ivory)", border: "1px solid var(--line)", borderRadius: 6 }}>
      <div className="eyebrow" style={{ marginBottom: 8 }}><span className="dot-mark"/>Not sure where to start?</div>
      <h2 className="t-h3" style={{ marginTop: 4, marginBottom: 20, fontSize: 22, fontWeight: 600 }}>Book by what you need.</h2>
      <div className="symptom-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
        {items.map(item => (
          <a
            key={item.svc}
            onClick={(e) => { e.preventDefault(); go(`${base}/${item.svc}`); }}
            href={`${base}/${item.svc}`}
            className="symptom-card"
            style={{
              display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
              padding: "14px 18px", background: "var(--white)", border: "1px solid var(--line)",
              borderRadius: 6, textDecoration: "none", color: "inherit", cursor: "pointer",
              transition: "all .15s ease",
            }}
          >
            <div style={{ minWidth: 0 }}>
              <div className="t-small" style={{ fontWeight: 600, color: "var(--ink)" }}>{item.sx}</div>
              <div className="t-micro" style={{ marginTop: 2, color: "var(--gray-500)" }}>→ {item.svcName}</div>
            </div>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--gray-500)" strokeWidth="1.5" style={{ flexShrink: 0 }}><polyline points="9 6 15 12 9 18"/></svg>
          </a>
        ))}
      </div>
    </div>
  );
}

function ServiceRow({ s, index, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      className="svc-row-full"
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: "1.4fr 1.6fr auto 24px",
        gap: 40,
        alignItems: "center",
        padding: "32px 8px",
        borderBottom: "1px solid var(--line)",
        cursor: "pointer",
        transition: "background .2s ease",
        background: hover ? "var(--gray-50)" : "transparent",
      }}
    >
      {/* Name + badge */}
      <div>
        <h3 className="t-h2" style={{ fontSize: 28, lineHeight: 1.15 }}>
          {s.name}
        </h3>
        <div style={{ marginTop: 10, display: "flex", gap: 6, flexWrap: "wrap" }}>
          {s.badge && <span className="badge">{s.badge}</span>}
          {s.privateSuite && <span className="badge badge-quiet">Private suite</span>}
        </div>
      </div>

      {/* Tagline */}
      <p className="t-small" style={{ margin: 0, color: "var(--gray-700)" }}>{s.tagline}</p>

      {/* Duration + price pairs — tight columnar block */}
      <div className="tnum" style={{ display: "flex", flexDirection: "column", alignItems: "end", gap: 6 }}>
        {s.durations.map(d => (
          <div key={d.min} style={{ display: "grid", gridTemplateColumns: "auto auto", gap: 14, whiteSpace: "nowrap", alignItems: "baseline" }}>
            <span style={{ color: "var(--gray-500)", fontSize: 13, textAlign: "right" }}>{d.min} min</span>
            <span style={{ fontSize: 20, fontWeight: 600, color: "var(--gray-950)", minWidth: 56, textAlign: "right" }}>${d.price}</span>
          </div>
        ))}
      </div>

      {/* Arrow only — full row is the click target */}
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={hover ? "var(--gray-950)" : "var(--gray-500)"} strokeWidth="1.5" style={{ transform: hover ? "translateX(3px)" : "none", transition: "all .2s ease" }}>
        <polyline points="9 6 15 12 9 18"/>
      </svg>
    </article>
  );
}

// ════════════════════════════════════════════════════════════════
// SERVICE DETAIL
// ════════════════════════════════════════════════════════════════
function ServiceDetail({ serviceId }) {
  const { loc, go } = useRoute();
  const s = window.HP_SERVICES.find(x => x.id === serviceId);
  if (!s) return <div className="wrap" style={{ padding: 80 }}>Service not found.</div>;

  const bookHref = loc ? `/${loc.id}/book` : `/`;
  const defaultDur = s.durations.find(d => d.popular) || s.durations[0];
  const [selectedDur, setSelectedDur] = React.useState(defaultDur);

  const handleBook = () => go(`${bookHref}?svc=${s.id}&dur=${selectedDur.min}`);

  return (
    <main className="page-fade">
      {/* Hero — two-column: service info + sticky booking panel */}
      <section style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="wrap" style={{ maxWidth: 1100 }}>
          <div className="svc-detail-grid" style={{ display: "grid", gridTemplateColumns: "1fr 400px", gap: 56, alignItems: "stretch" }}>

            {/* Left: info + photo (photo fills remaining height to match panel) */}
            <div style={{ display: "flex", flexDirection: "column" }}>
              <a
                onClick={(e) => { e.preventDefault(); go(loc ? `/${loc.id}/services` : `/`); }}
                href={loc ? `/${loc.id}/services` : `/`}
                className="t-small"
                style={{ color: "var(--gray-500)", textDecoration: "none", marginBottom: 14, display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer" }}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><polyline points="15 18 9 12 15 6"/></svg>
                <span>All services{loc ? ` at ${loc.cityShort}` : ""}</span>
              </a>
              <div className="eyebrow"><span className="dot-mark"/>{s.shortName}{s.badge ? ` · ${s.badge}` : ""}</div>
              <h1 className="t-h1" style={{ marginTop: 16 }}>{s.name}</h1>
              <p className="t-body-l" style={{ marginTop: 16, color: "var(--gray-700)" }}>{s.tagline}</p>
              {s.summary && (
                <p style={{ marginTop: 14, fontSize: 15, color: "var(--gray-700)", lineHeight: 1.7 }}>{s.summary}</p>
              )}
              <div style={{ marginTop: 32, flex: 1, minHeight: 220, borderRadius: 8, overflow: "hidden" }}>
                <image-slot id={`svc-detail-${s.id}`} src={s.photo} shape="rect" placeholder={`Photo — ${s.shortName}`} alt={`${s.name} — Healing Pearl Massage`} style={{ width: "100%", height: "100%", objectFit: "cover" }}></image-slot>
              </div>
            </div>

            {/* Right: booking panel */}
            <div className="card svc-booking-panel" style={{ padding: 28, position: "sticky", top: 88 }}>
              <div className="eyebrow"><span className="dot-mark"/>Reserve</div>
              <h2 style={{ fontFamily: "var(--font-serif)", fontSize: 26, fontWeight: 500, marginTop: 10, letterSpacing: "-0.02em", lineHeight: 1.2 }}>
                Choose your length
              </h2>
              <p style={{ marginTop: 8, fontSize: 13, color: "var(--gray-500)", lineHeight: 1.6 }}>
                Pressure &amp; focus customized at intake. Hot stones included.
              </p>

              {/* Duration options */}
              <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 8 }}>
                {s.durations.map(d => {
                  const sel = selectedDur.min === d.min;
                  return (
                    <button
                      key={d.min}
                      onClick={() => setSelectedDur(d)}
                      style={{
                        appearance: "none", width: "100%",
                        display: "flex", alignItems: "center", justifyContent: "space-between",
                        padding: "13px 16px", borderRadius: 6, cursor: "pointer",
                        border: sel ? "2px solid var(--ink)" : "1px solid var(--line)",
                        background: sel ? "var(--ink)" : "var(--white)",
                        color: sel ? "var(--white)" : "var(--ink)",
                        fontFamily: "var(--font-sans)",
                        transition: "all .15s ease",
                      }}
                    >
                      <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{ fontSize: 15, fontWeight: 500 }}>{d.min} min</span>
                        {d.popular && (
                          <span style={{
                            fontSize: 10, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase",
                            padding: "2px 7px", borderRadius: 999,
                            background: sel ? "rgba(255,255,255,.18)" : "var(--accent-tint)",
                            color: sel ? "rgba(255,255,255,.9)" : "var(--accent)",
                          }}>Most popular</span>
                        )}
                      </span>
                      <span className="tnum" style={{ fontSize: 17, fontWeight: 600 }}>${d.price}</span>
                    </button>
                  );
                })}
              </div>

              {/* Book button */}
              <button
                className="btn btn-primary"
                onClick={handleBook}
                style={{ width: "100%", justifyContent: "center", marginTop: 18, padding: "15px 24px", fontSize: 15 }}
              >
                Book {selectedDur.min} min · ${selectedDur.price}
              </button>

              <div style={{ marginTop: 16, padding: "12px 14px", background: "var(--gray-50)", borderRadius: 6, fontSize: 12, color: "var(--gray-500)", lineHeight: 1.6, borderTop: "1px solid var(--line-soft)" }}>
                Same-day bookings usually available.
              </div>

            </div>
          </div>
        </div>
      </section>

      {/* What to expect + Contraindications */}
      <section style={{ paddingTop: 56, paddingBottom: 80, borderTop: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ maxWidth: 1100 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>

            <div>
              <div className="eyebrow"><span className="dot-mark"/>What to expect</div>
              <h2 className="t-h2" style={{ marginTop: 12, fontSize: 28 }}>Every session, fully appointed.</h2>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {[...s.included, ...s.expect].map((it, i) => (
                  <li key={i} style={{ display: "flex", gap: 12, alignItems: "start", fontSize: 14, color: "var(--gray-700)", lineHeight: 1.6 }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" style={{ flexShrink: 0, marginTop: 3 }}><polyline points="20 6 9 17 4 12"/></svg>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <div className="eyebrow"><span className="dot-mark" style={{ background: "var(--gray-500)" }}/>Please consider before booking</div>
              <h2 className="t-h2" style={{ marginTop: 12, fontSize: 28 }}>Contraindications.</h2>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {s.contraindications.map((it, i) => (
                  <li key={i} style={{ display: "flex", gap: 12, alignItems: "start", fontSize: 14, color: "var(--gray-700)", lineHeight: 1.6 }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gray-500)" strokeWidth="1.8" style={{ flexShrink: 0, marginTop: 3 }}><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>

          </div>
        </div>
      </section>

      {/* Related services — internal linking */}
      <section style={{ paddingTop: 0, paddingBottom: 96, borderTop: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ maxWidth: 1100, paddingTop: 64 }}>
          <div className="section-head" style={{ marginBottom: 32 }}>
            <div className="row">
              <div>
                <div className="eyebrow"><span className="dot-mark"/>Also at Healing Pearl</div>
                <h2 className="t-h2" style={{ marginTop: 8, fontSize: 28 }}>You may also like.</h2>
              </div>
              <a
                onClick={(e) => { e.preventDefault(); go(loc ? `/${loc.id}/services` : `/`); }}
                href={loc ? `/${loc.id}/services` : `/`}
                className="btn-tertiary"
              >
                Full menu
              </a>
            </div>
          </div>
          <div className="related-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {window.HP_SERVICES.filter(x => x.id !== s.id).slice(0, 3).map(other => (
              <a
                key={other.id}
                onClick={(e) => { e.preventDefault(); go(`${bookHref.replace("/book", "")}/services/${other.id}`); }}
                href={loc ? `/${loc.id}/services/${other.id}` : `/services/${other.id}`}
                className="related-card"
                style={{ display: "block", textDecoration: "none", color: "inherit", border: "1px solid var(--line)", borderRadius: 6, overflow: "hidden", background: "var(--ivory)", cursor: "pointer", transition: "all .15s ease" }}
              >
                <div style={{ aspectRatio: "16/10", overflow: "hidden", background: "var(--gray-100)" }}>
                  <img src={other.photo} alt={`${other.name} at Healing Pearl Massage`} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
                <div style={{ padding: "18px 20px" }}>
                  <h3 className="t-h3" style={{ fontSize: 17, fontWeight: 600, margin: 0, fontFamily: "var(--font-serif)" }}>{other.name}</h3>
                  <p className="t-small" style={{ margin: "6px 0 0", color: "var(--gray-600)", lineHeight: 1.55 }}>{other.tagline}</p>
                  <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span className="tnum" style={{ fontSize: 14, fontWeight: 600 }}>${other.fromPrice}<span style={{ fontSize: 11, color: "var(--gray-500)", marginLeft: 2 }}>+</span></span>
                    <span className="t-small" style={{ color: "var(--accent)", fontWeight: 600 }}>View →</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
          {loc && (
            <div style={{ marginTop: 32, textAlign: "center" }}>
              <a
                onClick={(e) => { e.preventDefault(); go(`/${loc.id}`); }}
                href={`/${loc.id}`}
                className="t-small"
                style={{ color: "var(--gray-600)", textDecoration: "underline", cursor: "pointer" }}
              >
                ← Back to {loc.name} home
              </a>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}
// ════════════════════════════════════════════════════════════════
// REVIEWS
// ════════════════════════════════════════════════════════════════
function Reviews() {
  const { loc, go } = useRoute();
  const REVIEWS = window.HP_REVIEWS;
  const [filter, setFilter] = React.useState("all");
  const hasReviews = !loc?.isNew && (loc?.reviewCount ?? 0) > 0;

  return (
    <main className="page-fade">
      <section style={{ paddingTop: 56, paddingBottom: 32 }}>
        <div className="wrap" style={{ maxWidth: 880 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot-mark"/>Guest reviews</div>
          <h1 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 72px)", margin: 0, textWrap: "balance" }}>
            {hasReviews ? "What guests say." : "Be one of our first reviewers."}
          </h1>
          <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-3)", lineHeight: 1.65, maxWidth: 580 }}>
            {hasReviews
              ? `Pulled live from Google for ${loc?.name || "all studios"}. We don't moderate or curate — what you see is exactly what guests said.`
              : `${loc.name} just opened. We're still building our review base — your honest feedback after a session helps the next guest decide.`}
          </p>
        </div>
      </section>

      {hasReviews ? (
        <>
          {/* Summary bar */}
          <section style={{ paddingTop: 16 }}>
            <div className="wrap">
              <div className="card" style={{ padding: "28px 36px", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 40, alignItems: "center" }}>
                <div style={{ textAlign: "center" }}>
                  <div style={{ fontSize: 48, lineHeight: 1, fontWeight: 600 }}>{loc?.rating ?? 4.5}</div>
                  <div style={{ marginTop: 6 }}><Stars value={Math.round(loc?.rating ?? 4.5)} size={14} /></div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 6 }}>{loc?.reviewCount ?? 137} Google reviews</div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.6 }}>
                  <p style={{ margin: 0, color: "var(--gray-700)", fontSize: 14 }}>
                    Highlighted reviews are pulled directly from Google. We don't curate or filter — what you see below is what clients have actually written.
                  </p>
                  <p style={{ margin: 0, fontSize: 12, color: "var(--muted)" }}>
                    See the full rating breakdown on our Google Business profile.
                  </p>
                </div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "end", gap: 8 }}>
                  <a className="btn btn-ghost" href={loc.reviewUrl} target="_blank" rel="noopener noreferrer">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21.35 11.1h-9.18v2.92h5.27c-.23 1.45-1.71 4.25-5.27 4.25-3.17 0-5.76-2.62-5.76-5.86s2.59-5.86 5.76-5.86c1.81 0 3.02.77 3.71 1.43l2.53-2.43C16.86 4.21 14.7 3.3 12.17 3.3 7.27 3.3 3.3 7.27 3.3 12.17s3.97 8.87 8.87 8.87c5.12 0 8.5-3.6 8.5-8.67 0-.59-.06-1.04-.14-1.27Z"/></svg>
                    Write a Google review
                  </a>
                  <div style={{ fontSize: 11, color: "var(--muted)" }}>Live from Google Places</div>
                </div>
              </div>
            </div>
          </section>

          {/* Filter */}
          <section style={{ paddingTop: 40 }}>
            <div className="wrap">
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {["all", "5★", "couples", "deep tissue", "pre-natal", "foot reflexology"].map(f => (
                  <button key={f} onClick={() => setFilter(f)} style={{
                    appearance: "none",
                    background: filter === f ? "var(--ink)" : "transparent",
                    color: filter === f ? "#fff" : "var(--ink-3)",
                    border: "1px solid " + (filter === f ? "var(--ink)" : "var(--line)"),
                    padding: "6px 14px",
                    borderRadius: 999,
                    fontSize: 12,
                    cursor: "pointer",
                    fontFamily: "inherit",
                  }}>{f}</button>
                ))}
              </div>
            </div>
          </section>

          {/* Reviews grid — equal-height cards with line-clamp */}
          <section style={{ paddingTop: 24, paddingBottom: 80 }}>
            <div className="wrap">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, alignItems: "stretch" }}>
                {REVIEWS.map((r, i) => (
                  <div key={i} className="card" style={{ padding: 20, display: "flex", flexDirection: "column" }}>
                    <Stars value={r.rating} size={12} />
                    <p style={{ margin: "10px 0 14px", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, display: "-webkit-box", WebkitLineClamp: 4, WebkitBoxOrient: "vertical", overflow: "hidden", flex: 1 }}>
                      "{r.text}"
                    </p>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--line)" }}>
                      <div style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--accent)", color: "#fff", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 600 }}>{r.initials}</div>
                      <div>
                        <div style={{ fontSize: 13, color: "var(--ink)", fontWeight: 600 }}>{r.name}</div>
                        <div style={{ fontSize: 11, color: "var(--muted)" }}>{r.time} · Google</div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, textAlign: "center" }}>
                <a className="btn btn-ghost" href={loc?.reviewUrl} target="_blank" rel="noopener noreferrer">See all {loc?.reviewCount ?? 137} reviews on Google →</a>
              </div>
            </div>
          </section>
        </>
      ) : (
        // ─── Empty state for new locations ───────────────────
        <section style={{ paddingTop: 8, paddingBottom: 80 }}>
          <div className="wrap">
            <div className="card" style={{ padding: "48px 40px", textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", borderRadius: 999, background: "var(--accent-tint)", color: "var(--accent-2)", fontSize: 12, fontWeight: 600 }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}/>
                New studio
              </div>
              <h2 style={{ fontSize: 24, margin: "20px 0 10px", fontWeight: 600 }}>No reviews yet — and that's where you come in.</h2>
              <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.65, maxWidth: 480, margin: "0 auto" }}>
                If you've already visited {loc.name}, leave a Google review — it helps the next guest. If you're new, book a session and judge for yourself.
              </p>
              <div style={{ marginTop: 24, display: "inline-flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
                <button className="btn btn-primary" onClick={() => go(`/${loc.id}/book`)}>Book a session</button>
                <a className="btn btn-ghost" href={loc.reviewUrl} target="_blank" rel="noopener noreferrer">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21.35 11.1h-9.18v2.92h5.27c-.23 1.45-1.71 4.25-5.27 4.25-3.17 0-5.76-2.62-5.76-5.86s2.59-5.86 5.76-5.86c1.81 0 3.02.77 3.71 1.43l2.53-2.43C16.86 4.21 14.7 3.3 12.17 3.3 7.27 3.3 3.3 7.27 3.3 12.17s3.97 8.87 8.87 8.87c5.12 0 8.5-3.6 8.5-8.67 0-.59-.06-1.04-.14-1.27Z"/></svg>
                  Write a Google review
                </a>
              </div>
            </div>

            {/* Show our sister studio's reviews for reassurance */}
            <div style={{ marginTop: 64 }}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 18, gap: 16 }}>
                <h3 style={{ fontSize: 16, margin: 0, fontWeight: 600 }}>From our other studio</h3>
                <span style={{ fontSize: 12, color: "var(--muted)" }}>Same team, same standards · 137 Google reviews at Katy</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, alignItems: "stretch" }}>
                {REVIEWS.slice(0, 6).map((r, i) => (
                  <div key={i} className="card" style={{ padding: 20, display: "flex", flexDirection: "column" }}>
                    <Stars value={r.rating} size={12} />
                    <p style={{ margin: "10px 0 14px", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, display: "-webkit-box", WebkitLineClamp: 4, WebkitBoxOrient: "vertical", overflow: "hidden", flex: 1 }}>
                      "{r.text}"
                    </p>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--line)" }}>
                      <div style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--surface-2)", color: "var(--ink-3)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 600 }}>{r.initials}</div>
                      <div>
                        <div style={{ fontSize: 13, color: "var(--ink)", fontWeight: 600 }}>{r.name}</div>
                        <div style={{ fontSize: 11, color: "var(--muted)" }}>At Katy studio · Google</div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      <BigCTA
        title={hasReviews ? `Join ${loc?.reviewCount ?? 137} guests who've exhaled here.` : "Be one of the first."}
        sub="Same-day appointments usually available."
        primary={{ label: `Book at ${loc?.cityShort ?? "Katy"}`, onClick: () => go(`/${loc?.id ?? "woodcreek"}/book`) }}
      />
    </main>
  );
}

Object.assign(window, { ServicesIndex, ServiceDetail, Reviews });