// pages.jsx — all page components
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

// ════════════════════════════════════════════════════════════════
// LOCATOR HOME (domain root — pick a location)
// ════════════════════════════════════════════════════════════════
function LocatorHome() {
  const { go } = useRoute();
  const LOCS = window.HP_LOCATIONS;
  const SERVICES = window.HP_SERVICES;
  const totalReviews = LOCS.reduce((sum, l) => sum + (l.reviewCount || 0), 0);
  const ratedLoc = LOCS.find(l => l.reviewCount > 0);

  return (
    <main className="page-fade">
      {/* Hero */}
      <section style={{ paddingTop: 96, paddingBottom: 64 }}>
        <div className="wrap" style={{ maxWidth: 980 }}>
          <div className="eyebrow"><span className="dot-mark"/>Chinese Massage Therapy · Katy &amp; Fulshear, TX</div>
          <h1 className="t-display" style={{ marginTop: 20, textWrap: "balance" }}>
            Deep Tissue &amp; Chinese Massage in <em>Katy</em> and Fulshear.
          </h1>
          <p className="t-body-l" style={{ marginTop: 24, maxWidth: 640 }}>
            Swedish, deep tissue, prenatal, couples, and foot reflexology — customized pressure, hot stones always included. Same-day appointments usually available.
          </p>
          {ratedLoc && (
            <div style={{ marginTop: 32, display: "inline-flex", alignItems: "center", gap: 16, padding: "12px 18px", background: "var(--ivory)", border: "1px solid var(--line)", borderRadius: 999, fontSize: 14 }}>
              <Stars value={Math.round(ratedLoc.rating)} size={14} />
              <span className="tnum" style={{ color: "var(--warm-dark)", fontWeight: 600 }}>{ratedLoc.rating}</span>
              <span style={{ color: "var(--warm-500)" }}>·</span>
              <span style={{ color: "var(--warm-700)" }}>
                {LOCS.filter(l => l.reviewCount > 0).length > 1
                  ? `${totalReviews} Google reviews across both studios`
                  : `${ratedLoc.reviewCount} Google reviews at ${ratedLoc.cityShort}`}
              </span>
            </div>
          )}
        </div>
      </section>

      {/* LOCATION CARDS */}
      <section id="locations" style={{ paddingTop: 24, paddingBottom: 96 }}>
        <div className="wrap">
          <div className="section-head">
            <div className="row">
              <div>
                <div className="eyebrow"><span className="dot-mark"/>Locations</div>
                <h2 className="t-h2" style={{ marginTop: 8 }}>Two studios, same standards.</h2>
              </div>
              <span className="t-small" style={{ color: "var(--gray-500)" }}>Same menu, same prices</span>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(380px, 1fr))", gap: 24 }}>
            {LOCS.map((l) => (
              <LocationCard key={l.id} loc={l} onPick={() => go(`/${l.id}`)} />
            ))}
          </div>
        </div>
      </section>

      {/* Services teaser */}
      <section style={{ paddingTop: 64, paddingBottom: 96, borderTop: "1px solid var(--line-soft)", background: "var(--gray-50)" }}>
        <div className="wrap">
          <div className="section-head">
            <div className="row">
              <div>
                <div className="eyebrow"><span className="dot-mark"/>The menu</div>
                <h2 className="t-h2" style={{ marginTop: 8 }}>Six services. Same prices at both studios.</h2>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
            {SERVICES.map((s) => (
              <div key={s.id} style={{
                background: "var(--white)", padding: 24,
                display: "flex", flexDirection: "column", gap: 8,
                minHeight: 144,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <h3 className="t-h3" style={{ fontSize: 18 }}>{s.shortName}</h3>
                  {s.badge && <span className="badge">{s.badge}</span>}
                </div>
                <p className="t-small" style={{ flex: 1, color: "var(--gray-500)" }}>{s.tagline}</p>
                <div style={{ paddingTop: 8, display: "flex", alignItems: "baseline", gap: 6 }}>
                  <span className="t-micro" style={{ color: "var(--gray-500)" }}>from</span>
                  <span className="price tnum">${s.fromPrice}</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24, display: "flex", gap: 24 }}>
            <a className="btn-tertiary" onClick={() => go(`/${LOCS[0].id}/services`)}>See full menu at {LOCS[0].cityShort}</a>
            <a className="btn-tertiary" onClick={() => go(`/${LOCS[1].id}/services`)}>See full menu at {LOCS[1].cityShort}</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function LocationCard({ loc, onPick }) {
  const swatch = loc.accent === "clay" ? "#5E7591" : "#7A8B6F";
  return (
    <article onClick={onPick} className="card" style={{
      overflow: "hidden", cursor: "pointer", transition: "all .2s ease",
      display: "flex", flexDirection: "column",
    }}
    onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--gray-700)"; }}
    onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--line)"; }}
    >
      {/* Image — reduced from 16:10 to 5:3 (slightly shorter) */}
      <div style={{ position: "relative", aspectRatio: "5/3" }}>
        <image-slot id={`loc-${loc.id}`} src={loc.photo} shape="rect" placeholder={`Hero — ${loc.name}`} alt={`${loc.name} massage studio interior`} style={{ width: "100%", height: "100%" }}></image-slot>
        <div style={{ position: "absolute", top: 16, left: 16, display: "flex", alignItems: "center", gap: 8, background: "var(--white)", padding: "5px 12px 5px 6px", borderRadius: 999, border: "1px solid var(--line)" }}>
          <span style={{ width: 18, height: 18, borderRadius: "50%", background: swatch, color: "#fff", display: "grid", placeItems: "center", fontSize: 9, fontWeight: 600 }}>{loc.monogram}</span>
          <span className="t-micro" style={{ color: "var(--gray-950)" }}>{loc.cityShort}</span>
        </div>
        {loc.isNew && (
          <div style={{ position: "absolute", top: 16, right: 16 }}>
            <span className="badge badge-new">New</span>
          </div>
        )}
      </div>

      <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 16, flex: 1 }}>
        <div>
          <h3 className="t-h2" style={{ fontSize: 28 }}>{loc.name}</h3>
          <p className="t-small" style={{ marginTop: 6, color: "var(--gray-700)" }}>{loc.tagline}</p>
        </div>

        {/* Stats row — micro caps */}
        <div className="t-micro" style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", color: "var(--gray-500)" }}>
          <span><b style={{ color: "var(--gray-950)" }}>{loc.rooms}</b> rooms</span>
          <span style={{ width: 3, height: 3, borderRadius: "50%", background: "var(--gray-500)" }}/>
          <span>Since {loc.sinceYear}</span>
          <span style={{ width: 3, height: 3, borderRadius: "50%", background: "var(--gray-500)" }}/>
          {loc.reviewCount > 0 ? (
            <span>{loc.rating} ★ ({loc.reviewCount} reviews)</span>
          ) : (
            <span>No reviews yet</span>
          )}
        </div>

        {/* Address — promoted to 16px */}
        <div style={{ fontSize: 16, color: "var(--gray-700)", lineHeight: 1.55, borderTop: "1px solid var(--line)", paddingTop: 20 }}>
          {loc.streetLine1}<br className="show-sm"/>{loc.streetLine2}
        </div>

        <button className="btn btn-primary" style={{ marginTop: "auto", padding: "14px 24px", justifyContent: "center" }} onClick={(e) => { e.stopPropagation(); onPick(); }}>
          Enter {loc.cityShort} studio →
        </button>
      </div>
    </article>
  );
}

// ════════════════════════════════════════════════════════════════
// LOCATION HOME
// ════════════════════════════════════════════════════════════════
function LocationHome() {
  const { loc, go } = useRoute();
  const SERVICES = window.HP_SERVICES;
  const today = new Date().toLocaleDateString("en-US", { weekday: "long" });

  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"/>{loc.name} · {loc.city}
              {loc.isNew && <span className="badge badge-new" style={{ marginLeft: 8 }}>New</span>}
            </div>
            <h1 className="t-display" style={{ marginTop: 20, textWrap: "balance" }}>
              Chinese Massage Therapy in <em>{loc.cityShort}</em>, TX.
            </h1>
            <p className="t-body-l" style={{ marginTop: 24, maxWidth: 480, color: "var(--gray-700)" }}>
              Deep tissue, prenatal, couples &amp; foot reflexology — customized pressure, hot stones always included. {loc.isNew ? "Now open in " + loc.cityShort + "." : "Serving " + loc.cityShort + " since " + loc.sinceYear + "."}
            </p>
            {loc.reviewCount > 0 && (
              <a
                onClick={(e) => { e.preventDefault(); go(`/${loc.id}/reviews`); }}
                href={`/${loc.id}/reviews`}
                style={{ marginTop: 20, display: "inline-flex", alignItems: "center", gap: 10, padding: "10px 16px", background: "var(--ivory)", border: "1px solid var(--line)", borderRadius: 999, fontSize: 13, textDecoration: "none", cursor: "pointer", transition: "background .15s ease" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--warm-100)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "var(--ivory)"}
              >
                <Stars value={loc.rating} size={13} />
                <span className="tnum" style={{ fontWeight: 600, color: "var(--warm-dark)" }}>{loc.rating}</span>
                <span style={{ color: "var(--warm-500)" }}>·</span>
                <span style={{ color: "var(--warm-700)" }}>{loc.reviewCount} Google reviews</span>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--warm-500)" strokeWidth="1.8" style={{ marginLeft: 2 }}><polyline points="9 6 15 12 9 18"/></svg>
              </a>
            )}
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => go(`/${loc.id}/book`)}>Book at {loc.cityShort}</button>
              <button className="btn btn-secondary" onClick={() => go(`/${loc.id}/services`)}>View services</button>
            </div>
          </div>
          <div style={{ aspectRatio: "5/6" }}>
            <image-slot id={`${loc.id}-hero`} src={loc.photo} shape="rounded" radius="6" placeholder={`Treatment room — ${loc.name}`} alt={`Treatment room at 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 }}>
            <Stat v={loc.rooms} l={`Rooms · ${loc.couplesSuites} couples suites`} />
            <Stat v={loc.therapistCount} l="Therapists on staff" />
            <Stat v={`'${String(loc.sinceYear).slice(2)}`} l={loc.isNew ? "Just opened" : `Open ${loc.yearsOpen} years`} />
            <Stat v={loc.reviewCount > 0 ? loc.rating : "—"} l={loc.reviewCount > 0 ? `${loc.reviewCount} Google reviews` : "Be one of our first"} />
          </div>
        </div>
      </section>

      {/* Why choose us */}
      <section style={{ paddingTop: 0, paddingBottom: 96, borderTop: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ paddingTop: 64 }}>
          <div className="section-head" style={{ marginBottom: 40 }}>
            <div className="eyebrow"><span className="dot-mark"/>Why Healing Pearl</div>
            <h2 className="t-h2" style={{ marginTop: 8, maxWidth: 640 }}>What sets us apart in {loc.cityShort}.</h2>
          </div>
          <div className="why-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            <WhyCard
              title="Authentic Chinese technique"
              body="Trained in traditional methods — meridian work, deep tissue, and reflexology. Not a generic spa massage."
            />
            <WhyCard
              title="Hot stones, always included"
              body="Warm basalt stones are part of every Swedish & Deep Tissue session. No upcharge, no upsell."
            />
            <WhyCard
              title="Same-day appointments"
              body="Most weekday slots are open same-day. Book online in under a minute or call us."
            />
            <WhyCard
              title="Family-owned since 2020"
              body="Independently run by Sunny Wu. The same therapists, the same standards — every visit."
            />
          </div>
        </div>
      </section>

      {/* Book by symptom — quick entry point */}
      <section style={{ paddingTop: 0, paddingBottom: 64, borderTop: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ paddingTop: 64 }}>
          <BookBySymptom base={`/${loc.id}/services`} />
        </div>
      </section>

      {/* Services list */}
      <section style={{ paddingTop: 0, paddingBottom: 96, borderTop: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ paddingTop: 64 }}>
          <div className="section-head">
            <div className="row">
              <div>
                <div className="eyebrow"><span className="dot-mark"/>Our menu</div>
                <h2 className="t-h2" style={{ marginTop: 8 }}>Six services. Same prices at both studios.</h2>
              </div>
              <a className="btn-tertiary" onClick={() => go(`/${loc.id}/services`)}>Full menu</a>
            </div>
          </div>

          <div className="card" style={{ overflow: "hidden" }}>
            {SERVICES.map((s, i) => (
              <div key={s.id}
                className="svc-row-loc"
                onClick={() => go(`/${loc.id}/services/${s.id}`)}
                style={{
                  display: "grid",
                  gridTemplateColumns: "72px 1fr auto auto",
                  gap: 16, alignItems: "center",
                  padding: "20px 24px",
                  minHeight: 96,
                  borderTop: i > 0 ? "1px solid var(--line)" : "none",
                  cursor: "pointer",
                  transition: "background .12s ease",
                }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--gray-50)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >
                <div style={{ width: 64, height: 64, borderRadius: 4, overflow: "hidden", flexShrink: 0 }}>
                  <img src={s.photo} alt={`${s.name} at Healing Pearl Massage`} width="64" height="64" loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <h3 className="t-h3" style={{ fontSize: 17, fontWeight: 600 }}>{s.name}</h3>
                    {s.badge && <span className="badge">{s.badge}</span>}
                    {s.privateSuite && <span className="badge badge-quiet">Private suite</span>}
                  </div>
                  <p className="t-small svc-row-tagline" style={{ margin: "4px 0 0", color: "var(--gray-500)" }}>{s.tagline}</p>
                </div>
                <div className="price svc-row-price" style={{ textAlign: "right", whiteSpace: "nowrap" }}>${s.fromPrice}<span style={{ fontSize: 12, color: "var(--gray-500)", marginLeft: 2, fontFamily: "var(--font-sans)" }}>+</span></div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gray-500)" strokeWidth="1.5"><polyline points="9 6 15 12 9 18"/></svg>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Hours + address */}
      <section style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          <div className="card" style={{ padding: 32 }}>
            <div className="eyebrow"><span className="dot-mark"/>Hours</div>
            <h3 className="t-h3" style={{ marginTop: 12, marginBottom: 24 }}>Open today, until 8:00 PM</h3>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 24px", fontSize: 14 }} className="tnum">
              {loc.hours.map(([day, time]) => {
                const active = day === today;
                return (
                  <React.Fragment key={day}>
                    <div style={{ color: active ? "var(--gray-950)" : "var(--gray-700)", fontWeight: active ? 600 : 400 }}>{day}</div>
                    <div style={{ color: active ? "var(--gray-950)" : "var(--gray-700)", fontWeight: active ? 600 : 400, textAlign: "right" }}>{time}</div>
                  </React.Fragment>
                );
              })}
            </div>
          </div>

          <div className="card" style={{ padding: 32 }}>
            <div className="eyebrow"><span className="dot-mark"/>Visit</div>
            <h3 className="t-h3" style={{ marginTop: 12, marginBottom: 24 }}>{loc.name}</h3>
            <div className="t-body" style={{ color: "var(--gray-700)" }}>
              {loc.streetLine1}<br className="show-sm"/>
              {loc.streetLine2}<br className="show-sm"/>
              <a href={`tel:${loc.phoneTel}`} className="tnum" style={{ color: "var(--gray-950)" }}>{loc.phone}</a>
            </div>
            <div style={{ marginTop: 24 }}>
              <a className="btn-tertiary" onClick={() => go(`/${loc.id}/visit`)}>Get directions</a>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ paddingTop: 96, paddingBottom: 96, borderTop: "1px solid var(--line-soft)" }}>
        <div className="wrap faq-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="eyebrow"><span className="dot-mark"/>FAQ</div>
            <h2 className="t-h2" style={{ marginTop: 12 }}>Common questions.</h2>
            <p className="t-body" style={{ marginTop: 16, color: "var(--gray-600)" }}>
              Quick answers to what guests ask most. Don't see your question?{" "}
              <a href={`tel:${loc.phoneTel}`} style={{ color: "var(--ink)", textDecoration: "underline" }}>Give us a call</a>.
            </p>
          </div>
          <FAQList />
        </div>
      </section>

      <BigCTA
        title={`Book at ${loc.cityShort}.`}
        sub="Same-day appointments usually available."
        primary={{ label: `Book at ${loc.cityShort}`, onClick: () => go(`/${loc.id}/book`) }}
        secondary={{ label: `Call ${loc.phone}`, onClick: () => window.location.href = `tel:${loc.phoneTel}` }}
      />
    </main>
  );
}

function FAQList() {
  const [open, setOpen] = useStateP(null);
  const { loc, go } = useRoute();
  const faqs = window.HP_FAQ || [];
  return (
    <div>
      {faqs.map((item, i) => (
        <div key={i} style={{ borderTop: "1px solid var(--line)", padding: "0" }}>
          <button
            onClick={() => setOpen(open === i ? null : i)}
            style={{
              width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
              gap: 16, padding: "20px 0", background: "none", border: "none", cursor: "pointer",
              textAlign: "left", fontSize: 16, fontWeight: 600, color: "var(--ink)",
              fontFamily: "var(--font-serif)",
            }}
            aria-expanded={open === i}
          >
            <span>{item.q}</span>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--gray-500)" strokeWidth="1.5"
              style={{ flexShrink: 0, transform: open === i ? "rotate(180deg)" : "none", transition: "transform .2s" }}>
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
          {open === i && (
            <p style={{ margin: "0 0 20px", color: "var(--gray-600)", fontSize: 15, lineHeight: 1.7, paddingRight: 32 }}>
              {item.a}
            </p>
          )}
        </div>
      ))}
      <div style={{ borderTop: "1px solid var(--line)" }} />
      {loc && (
        <p className="t-small" style={{ marginTop: 20, color: "var(--gray-500)" }}>
          Have a different question?{" "}
          <a
            onClick={(e) => { e.preventDefault(); go(`/${loc.id}/visit`); }}
            href={`/${loc.id}/visit`}
            style={{ color: "var(--ink)", textDecoration: "underline", cursor: "pointer" }}
          >
            Send us a note →
          </a>
        </p>
      )}
    </div>
  );
}

function WhyCard({ title, body }) {
  return (
    <div className="why-card" style={{ padding: "28px 24px", background: "var(--ivory)", border: "1px solid var(--line)", borderRadius: 6, display: "flex", flexDirection: "column", gap: 10 }}>
      <h3 className="t-h3" style={{ fontSize: 17, fontWeight: 600, margin: 0, fontFamily: "var(--font-serif)" }}>{title}</h3>
      <p className="t-small" style={{ margin: 0, color: "var(--gray-600)", lineHeight: 1.6 }}>{body}</p>
    </div>
  );
}

function Stat({ v, l }) {
  return (
    <div>
      <div className="stat-num">{v}</div>
      <div className="stat-label">{l}</div>
    </div>
  );
}

function BigCTA({ title, sub, primary, secondary }) {
  const { loc, go } = useRoute();
  const t = title || (loc ? `Book at ${loc.cityShort}.` : "Ready when you are.");
  const s = sub || "Same-day appointments usually available.";
  const p = primary || { label: loc ? `Book at ${loc.cityShort}` : "Find a studio", onClick: () => go(loc ? `/${loc.id}/book` : "/") };
  return (
    <section style={{ paddingTop: 64, paddingBottom: 64, background: "var(--accent-tint)", borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)" }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
        <div>
          <h2 className="display" style={{ fontSize: "clamp(26px, 3vw, 36px)", margin: 0 }}>{t}</h2>
          <p style={{ marginTop: 8, color: "var(--ink-3)", fontSize: 14 }}>{s}</p>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-primary" onClick={p.onClick}>{p.label}</button>
          {secondary && <button className="btn btn-ghost" onClick={secondary.onClick}>{secondary.label}</button>}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LocatorHome, LocationHome });