// pages3.jsx — About (brand), Contact (legacy), ServiceArea (legacy), OurStudio, Visit

// ════════════════════════════════════════════════════════════════
// ABOUT — brand-level (canonical brand story + founder + team)
// ════════════════════════════════════════════════════════════════
function About() {
  const { go } = useRoute();
  const LOCS = window.HP_LOCATIONS;
  const founder = window.HP_BRAND.founder;
  const principles = [
    { title: "Authentic, not adapted", body: "Traditional technique, practiced as it's meant to be — no generic, watered-down version." },
    { title: "Tailored, every time", body: "Three pressure levels at no extra cost. Pre-session intake, mid-session check-ins." },
    { title: "Generous by default", body: "Hot stones come with our signature massage. So do warm linens, hot towels, and time to rest." },
    { title: "A family, not a chain", body: "Two intimate studios, the same therapists week to week. We learn your name and your knots." },
  ];
  const roles = [
    { title: "Senior Therapist", note: "5+ years experience" },
    { title: "Reflexology Specialist", note: "4+ years experience" },
    { title: "Pre‑Natal Specialist", note: "Certified, pregnancy-safe positioning" },
  ];

  return (
    <main className="page-fade">
      {/* Hero */}
      <section style={{ paddingTop: 96, paddingBottom: 64 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="eyebrow"><span className="dot-mark"/>About Healing Pearl · M&amp;E Pearl LLC</div>
            <h1 className="t-display" style={{ marginTop: 20, textWrap: "balance" }}>
              Started in 2020. <em>Still</em> family-run.
            </h1>
            <p className="t-body-l" style={{ marginTop: 24, maxWidth: 540 }}>
              Healing Pearl was founded in a four-room studio in Katy. Six years and a second studio later — same family, same standards, same hot stones included with every signature session.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => go(`/${LOCS[0].id}/book`)}>Book a session</button>
              <button className="btn btn-secondary" onClick={() => { const el = document.getElementById("about-locations"); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" }); }}>Find a studio</button>
            </div>
          </div>
          <div style={{ display: "grid", placeItems: "center" }}>
            <LogoBadge size={360} />
          </div>
        </div>
      </section>

      {/* Founder */}
      <section style={{ paddingTop: 64, paddingBottom: 64, borderTop: "1px solid var(--line-soft)", background: "var(--gray-50)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: ".55fr 1.45fr", gap: 64, alignItems: "center" }}>
          <div style={{ aspectRatio: "1/1", maxWidth: 320 }}>
            <image-slot id="founder" src={window.HP_PHOTOS.team[0]} shape="rounded" radius="6" placeholder={`Portrait — ${founder.name}`} alt={`${founder.name}, ${founder.role} at Healing Pearl Massage`} style={{ width: "100%", height: "100%" }}></image-slot>
          </div>
          <div>
            <div className="eyebrow"><span className="dot-mark"/>Our founder</div>
            <h2 className="t-h1" style={{ marginTop: 20 }}>{founder.name}</h2>
            <div className="t-small" style={{ marginTop: 8, color: "var(--gray-500)" }}>{founder.role} · Since {founder.since}</div>
            <p className="t-body-l" style={{ marginTop: 20, maxWidth: 640 }}>
              {founder.bio}
            </p>
            <p className="t-small" style={{ marginTop: 12, color: "var(--gray-500)", maxWidth: 640 }}>
              Sunny rotates between the Katy and Fulshear studios — call ahead if you'd like to book a session with her specifically.
            </p>
          </div>
        </div>
      </section>

      {/* Principles */}
      <section style={{ paddingTop: 56, paddingBottom: 72 }}>
        <div className="wrap">
          <div style={{ marginBottom: 48 }}><LeafDivider /></div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, marginBottom: 24 }}>
            <h2 style={{ fontSize: 18, margin: 0, fontWeight: 600 }}>What we believe</h2>
            <span style={{ fontSize: 12, color: "var(--muted)" }}>The list hasn't changed since 2020.</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
            {principles.map((p, i) => (
              <div key={i} style={{ background: "var(--surface)", padding: 24 }}>
                <div style={{ fontSize: 11, color: "var(--accent)", letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600, marginBottom: 10 }}>0{i + 1}</div>
                <h3 style={{ fontSize: 16, margin: "0 0 6px", fontWeight: 600 }}>{p.title}</h3>
                <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 13, lineHeight: 1.55 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team — role-based */}
      <section style={{ paddingTop: 24, paddingBottom: 72 }}>
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, marginBottom: 20 }}>
            <h2 style={{ fontSize: 18, margin: 0, fontWeight: 600 }}>Our team</h2>
            <span style={{ fontSize: 12, color: "var(--muted)" }}>3–4 therapists per studio. Texas-licensed, traditional Chinese technique.</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {/* Founder card */}
            <div className="card" style={{ padding: 20, background: "var(--accent-tint)" }}>
              <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--accent)", color: "#fff", display: "grid", placeItems: "center", fontWeight: 600, fontSize: 14, marginBottom: 12 }}>{founder.name.charAt(0)}</div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>{founder.name}</div>
              <div style={{ fontSize: 12, color: "var(--accent-2)", marginTop: 2, fontWeight: 600 }}>{founder.role}</div>
              <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>Since {founder.since} · Both studios</div>
            </div>
            {/* Role cards */}
            {roles.map((r, i) => (
              <div key={i} className="card" style={{ padding: 20 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--surface-2)", color: "var(--ink-3)", display: "grid", placeItems: "center", fontSize: 18, marginBottom: 12 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
                </div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>{r.title}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>{r.note}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Where to find us */}
      <section id="about-locations" style={{ paddingTop: 32, paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 20, gap: 16 }}>
            <h2 style={{ fontSize: 18, margin: 0, fontWeight: 600 }}>Where to find us</h2>
            <span style={{ fontSize: 12, color: "var(--muted)" }}>Same menu, same prices</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))", gap: 16 }}>
            {LOCS.map(l => {
              const c = l.accent === "clay" ? "#5E7591" : "#7A8B6F";
              return (
                <article key={l.id} className="card" onClick={() => go(`/${l.id}`)} style={{ padding: 24, cursor: "pointer", display: "flex", flexDirection: "column", gap: 12 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span style={{ width: 32, height: 32, borderRadius: "50%", background: c, color: "#fff", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 600 }}>{l.monogram}</span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 17, fontWeight: 600 }}>{l.name}</div>
                      <div style={{ fontSize: 12, color: "var(--muted)" }}>{l.cityShort}</div>
                    </div>
                    {l.isNew && <span style={{ padding: "2px 8px", background: "var(--ink)", color: "#fff", borderRadius: 3, fontSize: 10, fontWeight: 600 }}>NEW</span>}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>
                    <b style={{ color: "var(--ink)" }}>{l.rooms}</b> rooms · Since {l.sinceYear}
                    {l.reviewCount > 0 && <> · {l.rating} ★ ({l.reviewCount})</>}
                  </div>
                  <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>{l.storyShort}</p>
                  <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.55 }}>
                    {l.streetLine1}<br className="show-sm"/>{l.streetLine2}
                  </div>
                  <div style={{ marginTop: "auto", paddingTop: 8 }}>
                    <a style={{ fontSize: 12, color: "var(--accent)", fontWeight: 600, cursor: "pointer" }}>Visit {l.cityShort} →</a>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <BigCTA
        title="Ready to come in?"
        sub="Same-day appointments usually available at both studios."
        primary={{ label: "Find a studio", onClick: () => go("/") }}
      />

      {/* Legal-entity disclosure (small, but plainly visible — required for
          A2P 10DLC / SMS sender verification by carriers). */}
      <section style={{ paddingTop: 24, paddingBottom: 64 }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <p className="t-small" style={{ color: "var(--gray-500)", margin: 0 }}>
            Healing Pearl Massage is owned and operated by{" "}
            <strong style={{ color: "var(--gray-700)", fontWeight: 600 }}>M&amp;E Pearl LLC</strong>,
            a Texas Limited Liability Company doing business as Healing Pearl Massage.
          </p>
        </div>
      </section>
    </main>
  );
}

// ════════════════════════════════════════════════════════════════
// CONTACT — legacy fallback only (not in nav)
// ════════════════════════════════════════════════════════════════
function Contact() {
  const { go } = useRoute();
  return (
    <main className="page-fade">
      <section style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="wrap" style={{ maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot-mark"/>Contact</div>
          <h1 className="display" style={{ fontSize: "clamp(36px, 4.8vw, 56px)", margin: 0 }}>Pick a studio to reach the right team.</h1>
          <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
            {window.HP_LOCATIONS.map(l => (
              <div key={l.id} className="card" style={{ padding: 22 }}>
                <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>{l.name}</div>
                <div style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.7 }}>
                  {l.streetLine1}<br className="show-sm"/>{l.streetLine2}<br className="show-sm"/>{l.phone}
                </div>
                <button className="btn btn-ghost" style={{ marginTop: 14 }} onClick={() => go(`/${l.id}/visit`)}>Visit {l.cityShort} →</button>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ════════════════════════════════════════════════════════════════
// SERVICE AREA — legacy fallback only (not in nav)
// ════════════════════════════════════════════════════════════════
function ServiceArea() {
  const { go } = useRoute();
  const LOCS = window.HP_LOCATIONS;
  return (
    <main className="page-fade">
      <section style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="wrap" style={{ maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot-mark"/>Service area</div>
          <h1 className="display" style={{ fontSize: "clamp(36px, 4.8vw, 56px)", margin: 0 }}>Two studios across west Houston.</h1>
          <p style={{ marginTop: 14, fontSize: 15, color: "var(--ink-3)" }}>Pick a studio for the full list of neighborhoods it serves.</p>
          <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
            {LOCS.map(l => (
              <div key={l.id} className="card" style={{ padding: 22 }} onClick={() => go(`/${l.id}/visit`)}>
                <div style={{ fontSize: 16, fontWeight: 600 }}>{l.name}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{l.cityShort}</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 14 }}>
                  {l.nearbyAreas.map(a => (
                    <span key={a} style={{ padding: "5px 10px", borderRadius: 4, background: "var(--surface-2)", fontSize: 12, color: "var(--ink-2)" }}>{a}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { About, Contact, ServiceArea });

// ════════════════════════════════════════════════════════════════
// OUR STUDIO — shop-level (this studio's room, parking, team — not the founder)
// ════════════════════════════════════════════════════════════════
function OurStudio() {
  const { loc, go } = useRoute();
  const roles = [
    { title: "Senior Therapist", note: "5+ years experience" },
    { title: "Reflexology Specialist", note: "4+ years experience" },
    { title: "Pre‑Natal Specialist", note: "Certified · pregnancy-safe" },
    { title: "Couples Suite Lead", note: "Synchronized 2-therapist sessions" },
  ];
  const stats = [
    { v: loc.rooms,                       l: `Rooms · ${loc.couplesSuites} couples suites` },
    { v: loc.therapistCount,              l: "Therapists on staff" },
    { v: `Since ${loc.sinceYear}`,        l: loc.isNew ? "Just opened" : `${loc.yearsOpen} years of practice` },
    { v: loc.reviewCount > 0 ? loc.rating : "—", l: loc.reviewCount > 0 ? `${loc.reviewCount} Google reviews` : "Be one of our first" },
  ];

  return (
    <main className="page-fade">
      {/* Hero */}
      <section style={{ paddingTop: 96, paddingBottom: 64 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="eyebrow">
              <span className="dot-mark"/>Our Studio · {loc.name}
              {loc.isNew && <span className="badge badge-new" style={{ marginLeft: 8 }}>New</span>}
            </div>
            <h1 className="t-display" style={{ marginTop: 20, textWrap: "balance" }}>
              {loc.isNew ? <>The new <em>Fulshear</em> studio.</> : <>The <em>Woodcreek Reserve</em> studio.</>}
            </h1>
            <p className="t-body-l" style={{ marginTop: 24, maxWidth: 540 }}>
              {loc.neighborhood}
            </p>
            <a className="btn-tertiary" onClick={() => go("/about")} style={{ marginTop: 24 }}>Read the Healing Pearl story</a>
          </div>
          <div style={{ aspectRatio: "4/5" }}>
            <image-slot id={`${loc.id}-studio-hero`} src={loc.photo} shape="rounded" radius="6" placeholder={`Interior — ${loc.name}`} alt={`Interior of Healing Pearl Massage ${loc.name} in ${loc.city}`} style={{ width: "100%", height: "100%" }}></image-slot>
          </div>
        </div>
      </section>

      {/* Stats strip */}
      <section style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="wrap">
          <div className="card" style={{ padding: "32px 40px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {stats.map((s, i) => <Stat key={i} v={s.v} l={s.l}/>)}
          </div>
        </div>
      </section>

      {/* Inside this studio — 3 facts */}
      <section style={{ paddingTop: 16, paddingBottom: 64, borderTop: "1px solid var(--line-soft)" }}>
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, marginBottom: 24 }}>
            <h2 style={{ fontSize: 18, margin: 0, fontWeight: 600 }}>Inside the {loc.cityShort} studio</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
            {[
              { t: `${loc.rooms} treatment rooms`, b: `${loc.couplesSuites} couples suites with pocket doors, ${loc.singleRooms} single rooms. Each room has dimmable ambiance and a heated table.` },
              { t: "Easy parking", b: loc.parking },
              { t: "Getting here", b: loc.transit },
            ].map((p, i) => (
              <div key={i} style={{ background: "var(--surface)", padding: 22 }}>
                <div style={{ fontSize: 11, color: "var(--accent)", letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600, marginBottom: 10 }}>0{i + 1}</div>
                <h3 style={{ fontSize: 15, margin: "0 0 6px", fontWeight: 600 }}>{p.t}</h3>
                <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 13, lineHeight: 1.55 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery — surfaces real photos if loc.gallery exists */}
      {loc.gallery && loc.gallery.length > 0 && (
        <section style={{ paddingTop: 32, paddingBottom: 64 }}>
          <div className="wrap">
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, marginBottom: 24 }}>
              <h2 style={{ fontSize: 18, margin: 0, fontWeight: 600 }}>A look inside</h2>
              <span className="t-small" style={{ color: "var(--warm-500)" }}>{loc.gallery.length} photos</span>
            </div>
            <Gallery items={loc.gallery} />
          </div>
        </section>
      )}

      {/* Team — role-based, no names */}
      <section style={{ paddingTop: 32, paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 20, gap: 16 }}>
            <h2 style={{ fontSize: 18, margin: 0, fontWeight: 600 }}>Our {loc.cityShort} team</h2>
            <span style={{ fontSize: 12, color: "var(--muted)" }}>{loc.therapistCount} licensed therapists. Same hands, week to week.</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {roles.map((r, i) => (
              <div key={i} className="card" style={{ padding: 20 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--accent-tint)", color: "var(--accent-2)", display: "grid", placeItems: "center", marginBottom: 12 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
                </div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>{r.title}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>{r.note}</div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 18, fontSize: 12, color: "var(--muted)", maxWidth: 600 }}>
            Founder Sunny Wu rotates between Katy and Fulshear — read more about her on the <a onClick={() => go("/about")} style={{ color: "var(--accent)", fontWeight: 600, cursor: "pointer" }}>brand About page</a>.
          </p>
        </div>
      </section>
    </main>
  );
}

// ════════════════════════════════════════════════════════════════
// VISIT — shop-level (Contact + Service Area merged), minimal
// ════════════════════════════════════════════════════════════════
function Visit() {
  const { loc, go } = useRoute();
  const LOCS = window.HP_LOCATIONS;
  const otherLocs = LOCS.filter(l => l.id !== loc.id);
  const today = new Date().toLocaleDateString("en-US", { weekday: "long" });
  const [submitted, setSubmitted] = React.useState(false);
  const [formOpen, setFormOpen] = React.useState(false);
  const otherLoc = otherLocs[0];
  const otherSwatch = otherLoc.accent === "clay" ? "#5E7591" : "#7A8B6F";

  return (
    <main className="page-fade">
      {/* Hero */}
      <section style={{ paddingTop: 64, paddingBottom: 40 }}>
        <div className="wrap" style={{ maxWidth: 880 }}>
          <div className="eyebrow"><span className="dot-mark"/>Visit · {loc.name}</div>
          <h1 className="t-h1" style={{ marginTop: 16 }}>Come find us in {loc.cityShort}.</h1>
          <p className="t-body-l" style={{ marginTop: 14, maxWidth: 580 }}>
            Address, hours, parking — plus the neighborhoods this studio serves. For bookings, call or text directly.
          </p>
        </div>
      </section>

      {/* Address + Map */}
      <section style={{ paddingTop: 24, paddingBottom: 48 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "stretch" }}>

          {/* LEFT — address + hours + parking, with hairlines between */}
          <div className="card" style={{ padding: 32, display: "flex", flexDirection: "column" }}>

            {/* Block 1 — Name + contact details */}
            <div>
              <div className="eyebrow"><span className="dot-mark"/>Address &amp; contact</div>
              <h2 className="t-h3" style={{ marginTop: 12, fontFamily: "var(--font-serif)", fontWeight: 500, letterSpacing: "-0.02em", fontSize: 24, fontVariationSettings: '"opsz" 48' }}>{loc.name}</h2>

              {/* Address — body w/ extra leading */}
              <div style={{ marginTop: 16, fontSize: 15, color: "var(--gray-700)", lineHeight: 1.8 }}>
                {loc.streetLine1}<br className="show-sm"/>{loc.streetLine2}
              </div>

              {/* Phone — promoted */}
              <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 10 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gray-500)" strokeWidth="1.6" style={{ flexShrink: 0 }}>
                  <path d="M22 16.92V21a1 1 0 0 1-1.09 1 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 3.23 4.09 1 1 0 0 1 4.22 3h4.09a1 1 0 0 1 1 .75c.13.62.34 1.49.65 2.4a1 1 0 0 1-.23 1L8.21 8.7a16 16 0 0 0 6 6l1.6-1.6a1 1 0 0 1 1-.23c.91.31 1.78.52 2.4.65a1 1 0 0 1 .75 1Z"/>
                </svg>
                <a href={`tel:${loc.phoneTel}`} className="tnum" style={{ fontSize: 20, fontWeight: 600, color: "var(--gray-950)" }}>{loc.phone}</a>
              </div>
              {/* Email — separate line */}
              <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 10 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gray-500)" strokeWidth="1.6" style={{ flexShrink: 0 }}>
                  <rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>
                </svg>
                <a href={`mailto:${loc.email}`} style={{ fontSize: 14, color: "var(--gray-700)" }}>{loc.email}</a>
              </div>

              {/* CTAs */}
              <div style={{ marginTop: 24, display: "flex", gap: 12, alignItems: "center" }}>
                <button className="btn btn-primary" onClick={() => go(`/${loc.id}/book`)}>Book a session</button>
                <a
                  className="btn-tertiary"
                  href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(loc.address)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                >Get directions</a>
              </div>
            </div>

            {/* Hairline divider */}
            <div style={{ height: 1, background: "var(--gray-200)", margin: "32px 0" }}/>

            {/* Block 2 — Hours */}
            <div>
              <div className="eyebrow"><span className="dot-mark"/>Hours</div>
              <div className="tnum" style={{ marginTop: 14, display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 24px", fontSize: 14 }}>
                {loc.hours.map(([d, h]) => {
                  const active = d === today;
                  return (
                    <React.Fragment key={d}>
                      <div style={{ color: active ? "var(--gray-950)" : "var(--gray-700)", fontWeight: active ? 600 : 400 }}>{d}</div>
                      <div style={{ color: active ? "var(--gray-950)" : "var(--gray-700)", fontWeight: active ? 600 : 400, textAlign: "right" }}>{h}</div>
                    </React.Fragment>
                  );
                })}
              </div>
            </div>

            {/* Hairline divider */}
            <div style={{ height: 1, background: "var(--gray-200)", margin: "32px 0" }}/>

            {/* Block 3 — Parking & Directions */}
            <div>
              <div className="eyebrow"><span className="dot-mark"/>Parking &amp; directions</div>
              <div style={{ marginTop: 14, fontSize: 14, color: "var(--gray-700)", lineHeight: 1.65 }}>
                <div className="t-micro" style={{ color: "var(--gray-500)", marginBottom: 4 }}>Parking</div>
                <div>{loc.parking}</div>
                <div className="t-micro" style={{ color: "var(--gray-500)", marginBottom: 4, marginTop: 12 }}>From the road</div>
                <div>{loc.transit}</div>
              </div>
            </div>
          </div>

          {/* RIGHT — map full-height + neighborhoods card below */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div style={{ flex: 1, minHeight: 360, borderRadius: 6, overflow: "hidden", border: "1px solid var(--line)", position: "relative" }}>
              <iframe
                title={`Map — ${loc.name}`}
                src={`https://maps.google.com/maps?q=${encodeURIComponent(loc.address)}&output=embed&z=17`}
                width="100%" height="100%"
                style={{ border: 0, display: "block", minHeight: 360 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "end", padding: 14, pointerEvents: "none" }}>
                <a
                  href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(loc.address)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-cream"
                  style={{ pointerEvents: "auto" }}
                >Open in Google Maps →</a>
              </div>
            </div>

            {/* Neighborhoods + cross-sell — promoted */}
            <div className="card" style={{ padding: 28 }}>
              <div className="eyebrow"><span className="dot-mark"/>Neighborhoods served</div>
              <div style={{ marginTop: 14, display: "flex", flexWrap: "wrap", gap: 6 }}>
                {loc.nearbyAreas.map(a => (
                  <span key={a} style={{ padding: "8px 14px", borderRadius: 999, background: "var(--accent-tint)", border: "1px solid var(--line)", fontSize: 13, color: "var(--gray-950)", fontWeight: 500 }}>{a}</span>
                ))}
              </div>

              {/* Cross-sell — promoted with tint + monogram dot */}
              <div onClick={() => go(`/${otherLoc.id}`)} style={{
                marginTop: 20, padding: "14px 16px",
                background: "var(--gray-50)",
                border: "1px solid var(--line)",
                borderRadius: 6,
                display: "flex", alignItems: "center", gap: 14,
                cursor: "pointer",
              }}>
                <span style={{ width: 32, height: 32, borderRadius: "50%", background: otherSwatch, color: "#fff", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 600, flexShrink: 0 }}>{otherLoc.monogram}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, color: "var(--gray-950)", fontWeight: 600 }}>Coming from farther?</div>
                  <div style={{ fontSize: 12, color: "var(--gray-700)", marginTop: 2 }}>{otherLoc.name} may be closer — {otherLoc.cityShort}</div>
                </div>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--gray-500)" strokeWidth="1.6"><polyline points="9 6 15 12 9 18"/></svg>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Question / form — full-width, collapsed by default */}
      <section style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="wrap">
          {!formOpen && !submitted ? (
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              gap: 24, flexWrap: "wrap",
              padding: "20px 28px",
              background: "var(--gray-50)",
              border: "1px solid var(--line)", borderRadius: 6,
            }}>
              <div>
                <div className="t-h3" style={{ fontSize: 18, fontWeight: 600 }}>Have a question?</div>
                <div className="t-small" style={{ marginTop: 4, color: "var(--gray-500)" }}>
                  For bookings, call <a href={`tel:${loc.phoneTel}`} className="tnum" style={{ color: "var(--gray-700)", fontWeight: 600 }}>{loc.phone}</a>. For everything else — gift cards, groups, press — send a note.
                </div>
              </div>
              <button className="btn btn-secondary" onClick={() => setFormOpen(true)}>Send a note →</button>
            </div>
          ) : (
            <div className="card" style={{ padding: 32, maxWidth: 640, margin: "0 auto" }}>
              <div className="eyebrow"><span className="dot-mark"/>Send a note</div>
              <h3 className="t-h3" style={{ marginTop: 12, fontSize: 20 }}>For gift cards, groups, or anything else.</h3>
              <p className="t-small" style={{ marginTop: 6, color: "var(--gray-500)" }}>
                We respond within one business day. For bookings, call <a href={`tel:${loc.phoneTel}`} className="tnum" style={{ color: "var(--gray-700)", fontWeight: 600 }}>{loc.phone}</a> directly.
              </p>

              {!submitted ? (
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    const fd = new FormData(e.target);
                    const name = (fd.get("name") || "").toString().trim();
                    const phone = (fd.get("phone") || "").toString().trim();
                    const email = (fd.get("email") || "").toString().trim();
                    const message = (fd.get("message") || "").toString().trim();
                    const body =
                      `Name: ${name}\n` +
                      `Phone: ${phone}\n` +
                      (email ? `Email: ${email}\n` : "") +
                      `Location: ${loc.name} (${loc.cityShort})\n\n` +
                      message;
                    const subject = `Inquiry from ${name || "the website"}`;
                    const to = loc.email || "healingpearlmassage@gmail.com";
                    window.location.href =
                      `mailto:${to}?subject=${encodeURIComponent(subject)}` +
                      `&body=${encodeURIComponent(body)}`;
                    setSubmitted(true);
                  }}
                  style={{ marginTop: 20 }}
                >
                  <FieldLabeled label="Full name" required>
                    <input name="name" style={inpLight} required/>
                  </FieldLabeled>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <FieldLabeled label="Phone" required>
                      <input name="phone" type="tel" style={inpLight} placeholder="(___) ___-____" required/>
                    </FieldLabeled>
                    <FieldLabeled label="Email">
                      <input name="email" type="email" style={inpLight} placeholder="you@email.com"/>
                    </FieldLabeled>
                  </div>
                  <FieldLabeled label="Message" required>
                    <textarea name="message" rows="4" style={{ ...inpLight, resize: "vertical", minHeight: 96 }} placeholder="Tell us what you need." required/>
                  </FieldLabeled>
                  <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
                    <button type="submit" className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }}>Send message</button>
                    <button type="button" className="btn btn-secondary" onClick={() => setFormOpen(false)}>Cancel</button>
                  </div>
                  <p className="t-micro" style={{ marginTop: 12, color: "var(--gray-500)", lineHeight: 1.5 }}>
                    This opens your email app pre-filled — just hit Send. Prefer to email directly?{" "}
                    <a href={`mailto:${loc.email || "healingpearlmassage@gmail.com"}`} style={{ color: "var(--gray-700)" }}>
                      {loc.email || "healingpearlmassage@gmail.com"}
                    </a>
                  </p>
                </form>
              ) : (
                <div style={{ padding: "20px 0", textAlign: "center" }}>
                  <div style={{ display: "inline-flex", width: 48, height: 48, borderRadius: "50%", background: "var(--accent-tint)", color: "var(--accent)", placeItems: "center", marginBottom: 12, alignItems: "center", justifyContent: "center" }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <div className="t-h3" style={{ fontSize: 18 }}>Your email is ready.</div>
                  <p className="t-small" style={{ marginTop: 6, color: "var(--gray-500)" }}>
                    Check your mail app and hit Send. If it didn't open, email us directly at{" "}
                    <a href={`mailto:${loc.email || "healingpearlmassage@gmail.com"}`} style={{ color: "var(--gray-700)" }}>
                      {loc.email || "healingpearlmassage@gmail.com"}
                    </a>.
                  </p>
                </div>
              )}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

const inpLight = {
  width: "100%", background: "var(--white)", color: "var(--gray-950)",
  border: "1px solid var(--line)", borderRadius: 4,
  // 16px font prevents iOS Safari auto-zoom on focus.
  // 12/14 padding gives ~46px height (WCAG 2.5.5 touch target).
  padding: "12px 14px", fontSize: 16, fontFamily: "inherit", outline: "none",
};
function FieldLabeled({ label, required, children }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <div className="t-micro" style={{ color: "var(--gray-700)", marginBottom: 6, fontWeight: 600, letterSpacing: 0, textTransform: "none", fontSize: 13 }}>
        {label}{required && <span style={{ color: "var(--gray-500)", marginLeft: 4 }}>*</span>}
      </div>
      {children}
    </label>
  );
}
// Legacy alias kept for any other callers
function FieldLight({ label, children }) {
  return <FieldLabeled label={label}>{children}</FieldLabeled>;
}

// ─── Gallery ────────────────────────────────────────────────────
function Gallery({ items }) {
  const [active, setActive] = React.useState(null);

  return (
    <div>
      <div className="gallery-grid" style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 8,
      }}>
        {items.map((t, i) => (
          <button key={i} onClick={() => setActive(i)} style={{
            appearance: "none", border: 0, padding: 0, cursor: "pointer",
            overflow: "hidden", borderRadius: 4, background: "var(--warm-100)",
            aspectRatio: "4/3", position: "relative",
          }}>
            <img
              src={t.src}
              alt={t.caption || ""}
              loading="lazy"
              decoding="async"
              onError={(e) => {
                e.currentTarget.style.display = "none";
                const p = e.currentTarget.parentElement;
                if (p) {
                  p.style.display = "grid";
                  p.style.placeItems = "center";
                  p.innerHTML = '<span style="font-size:11px;color:var(--gray-500)">Photo unavailable</span>';
                }
              }}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          </button>
        ))}
      </div>

      {/* Lightbox */}
      {active !== null && (
        <Lightbox items={items} index={active} onClose={() => setActive(null)} setIndex={setActive} />
      )}
    </div>
  );
}

function Lightbox({ items, index, setIndex, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIndex((i) => (i + 1) % items.length);
      if (e.key === "ArrowLeft")  setIndex((i) => (i - 1 + items.length) % items.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [items.length, setIndex, onClose]);

  const item = items[index];
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 1000,
      background: "rgba(15, 12, 10, .92)",
      display: "grid", placeItems: "center",
      padding: 32,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", maxWidth: "min(1200px, 92vw)", maxHeight: "88vh" }}>
        <img src={item.src} alt={item.caption} loading="eager" decoding="async" style={{ maxWidth: "100%", maxHeight: "82vh", display: "block", borderRadius: 4 }}/>
        <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center", color: "rgba(255,255,255,.85)", fontSize: 13 }}>
          <span>{item.caption}</span>
          <span className="tnum t-micro" style={{ color: "rgba(255,255,255,.55)" }}>{index + 1} / {items.length}</span>
        </div>
      </div>

      {/* Close */}
      <button onClick={onClose} style={lightboxCtl({ top: 24, right: 24 })}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
      </button>
      {/* Prev */}
      <button onClick={(e) => { e.stopPropagation(); setIndex((i) => (i - 1 + items.length) % items.length); }} style={lightboxCtl({ left: 24, top: "50%", transform: "translateY(-50%)" })}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6"><polyline points="15 6 9 12 15 18"/></svg>
      </button>
      {/* Next */}
      <button onClick={(e) => { e.stopPropagation(); setIndex((i) => (i + 1) % items.length); }} style={lightboxCtl({ right: 24, top: "50%", transform: "translateY(-50%)" })}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6"><polyline points="9 6 15 12 9 18"/></svg>
      </button>
    </div>
  );
}

function lightboxCtl(pos) {
  return {
    position: "absolute",
    width: 44, height: 44, borderRadius: "50%",
    background: "rgba(255,255,255,.12)", border: "1px solid rgba(255,255,255,.18)",
    display: "grid", placeItems: "center",
    cursor: "pointer",
    ...pos,
  };
}

// MapMock — kept minimal; references --jade alias which now resolves to --accent
function MapMock({ locId }) {
  return (
    <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", background: "var(--surface-2)" }}>
      <defs>
        <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse">
          <path d="M0 6 L6 0" stroke="var(--line)" strokeWidth=".8"/>
        </pattern>
      </defs>
      <rect width="400" height="250" fill="url(#hatch)"/>
      <path d="M0 80 Q 200 60 400 130" stroke="var(--surface)" strokeWidth="14" fill="none"/>
      <path d="M180 0 L220 250" stroke="var(--surface)" strokeWidth="10" fill="none"/>
      <path d="M0 200 L 400 180" stroke="var(--surface)" strokeWidth="8" fill="none"/>
      <rect x="40" y="120" width="80" height="50" fill="var(--surface)" stroke="var(--line)"/>
      <rect x="260" y="40" width="100" height="30" fill="var(--surface)" stroke="var(--line)"/>
      <rect x="280" y="190" width="90" height="45" fill="var(--surface)" stroke="var(--line)"/>
      <g transform="translate(200 120)">
        <circle r="20" fill="var(--accent)" opacity=".15"/>
        <circle r="10" fill="var(--accent)"/>
      </g>
    </svg>
  );
}

Object.assign(window, { OurStudio, Visit });