// components.jsx — shared chrome: Logo, Header, Footer, primitive bits
const { useState, useEffect, useRef, useMemo } = React;
// ─── Router context ─────────────────────────────────────────────
const RouterCtx = React.createContext({ path: "/", go: () => {}, loc: null });
const useRoute = () => React.useContext(RouterCtx);
// ─── Logo mark — leaf+pearl icon (official artwork via CSS mask) ─
function LogoMark({ size = 28, color = "var(--terra)" }) {
return (
);
}
// ─── Header ─────────────────────────────────────────────────────
function Header() {
const { path, go, loc } = useRoute();
const [scrolled, setScrolled] = useState(false);
const [switcherOpen, setSwitcherOpen] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false);
const switcherRef = useRef(null);
const LOCS = window.HP_LOCATIONS;
const inBooking = !!loc && path.startsWith(`/${loc.id}/book`);
// Close drawer on route change
useEffect(() => { setDrawerOpen(false); }, [path]);
// Lock body scroll while drawer open
useEffect(() => {
if (drawerOpen) {
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => { document.body.style.overflow = prev; };
}
}, [drawerOpen]);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
// Close switcher on outside click
useEffect(() => {
if (!switcherOpen) return;
const onDocClick = (e) => {
if (switcherRef.current && !switcherRef.current.contains(e.target)) setSwitcherOpen(false);
};
document.addEventListener("mousedown", onDocClick);
return () => document.removeEventListener("mousedown", onDocClick);
}, [switcherOpen]);
// Close switcher on route change
useEffect(() => { setSwitcherOpen(false); }, [path]);
const isDomain = !loc;
const nav = isDomain
? [
{ label: "Locations", to: "/", match: (p) => p === "/" },
{ label: "About", to: "/about" },
]
: [
{ label: "Services", to: `/${loc.id}/services` },
{ label: "Reviews", to: `/${loc.id}/reviews` },
{ label: "Our Studio", to: `/${loc.id}/about` },
{ label: "Visit", to: `/${loc.id}/visit`, alt: [`/${loc.id}/contact`, `/${loc.id}/area`] },
];
const isActive = (n) => {
if (n.match) return n.match(path);
if (path === n.to) return true;
if (n.alt && n.alt.some(a => path === a || path.startsWith(a + "/"))) return true;
return n.to !== "/" && path.startsWith(n.to);
};
return (
{/* Mobile hamburger — visible only < 720px */}
setDrawerOpen(true)}
aria-label="Open menu"
style={{
appearance: "none", background: "var(--white)", border: "1px solid var(--line)",
width: 44, height: 44, borderRadius: 8, display: "grid", placeItems: "center", cursor: "pointer",
}}
>
{/* Mobile drawer */}
{drawerOpen && (
setDrawerOpen(false)}
onNavigate={go}
/>
)}
{/* Breadcrumb bar — shop pages only, hidden during booking */}
{loc && !inBooking &&
);
}
// ─── Mobile drawer ──────────────────────────────────────────────
function MobileDrawer({ loc, path, nav, isActive, locs, inBooking, onClose, onNavigate }) {
return (
);
}
// ─── Last visited band ──────────────────────────────────────────
function LastVisitedBar() {
const { path, go } = useRoute();
const [lastId, setLastId] = useState(null);
useEffect(() => {
try {
const id = localStorage.getItem("hp_last_loc");
if (id && window.HP_LOCATIONS.find(l => l.id === id)) setLastId(id);
} catch {}
}, []);
if (!lastId) return null;
// Don't show the "back to last visited" hint on the locator itself —
// the locator IS the place users go to pick a studio, so the shortcut is redundant noise.
if (path === "/") return null;
const last = window.HP_LOCATIONS.find(l => l.id === lastId);
if (!last) return null;
const c = last.accent === "clay" ? "#5E7591" : "#7A8B6F";
return (
);
}
// ─── Breadcrumbs ────────────────────────────────────────────────
function Breadcrumbs() {
const { path, go, loc } = useRoute();
const segs = path.split("/").filter(Boolean);
// segs[0] === loc.id
const sub = segs[1];
const sub2 = segs[2];
const labelMap = {
services: "Services",
reviews: "Reviews",
about: "Our Studio",
studio: "Our Studio",
visit: "Visit",
contact: "Visit",
area: "Visit",
book: "Book",
};
let here = sub ? (labelMap[sub] || sub) : null;
let parentCrumb = null;
if (sub === "services" && sub2) {
const svc = window.HP_SERVICES.find(s => s.id === sub2);
parentCrumb = { label: "Services", to: `/${loc.id}/services` };
here = svc ? svc.shortName : sub2;
}
return (
);
}
// ─── Footer ─────────────────────────────────────────────────────
function Footer() {
const { loc, go } = useRoute();
const LOCS = window.HP_LOCATIONS;
const SERVICES = window.HP_SERVICES;
const isDomain = !loc;
return (
);
}
function FooterCol({ title, items, go, span = 3 }) {
return (
);
}
// ─── Stars ──────────────────────────────────────────────────────
function Stars({ value = 5, size = 14, color = "var(--accent)" }) {
return (
{[1,2,3,4,5].map(i => (
))}
);
}
// ─── Section header (eyebrow + H2 in display serif + optional meta) ─
function SectionHead({ eyebrow, title, sub, align = "left", maxWidth = 720 }) {
return (
{eyebrow &&
}
{title}
{sub &&
{sub}
}
);
}
// ─── Leaf divider — ornamental section break, uses the leaf mark ─
function LeafDivider({ width = 200 }) {
return (