// PHYSIO SAMOS — shared components: Nav, Footer, BookingModal, Marquee, etc.
const { useState, useEffect, useRef, useMemo } = React;
const useT = window.PS.useT;
// ---------- Photography (public/media, built by media-src/build-images.sh) ----------
// window.PS_MEDIA (assets/js/media-manifest.js) lists the widths that were actually
// generated for each name — the build never upscales, so a srcset must not offer a
// width the source could not fill.
const mediaWidths = (name) =>
(window.PS_MEDIA && window.PS_MEDIA[name]) || [1200];
window.PS.img = (name, w = 1200) => {
const widths = mediaWidths(name);
return `media/${name}-${widths.find((x) => x >= w) || widths[widths.length - 1]}.jpg`;
};
const srcSet = (name, ext) =>
mediaWidths(name).map((w) => `media/${name}-${w}.${ext} ${w}w`).join(", ");
// `picture { display: contents }` in main.css keeps the as the layout child, so
// every existing width/height/object-fit style on the img keeps working unchanged.
const Img = ({ name, w = 1200, sizes = "100vw", alt = "", eager = false, position, style, className }) => (
);
window.Img = Img;
// ---------- Silent looping clips ----------
// False until the first paint is out of the way, and false forever if the visitor asked
// for reduced motion or is on a narrow screen — so those visitors never fetch the clip
// at all, and phones are not charged a megabyte for decoration.
window.PS.useMotionOK = function useMotionOK(minWidth = 0) {
const [ok, setOk] = useState(false);
useEffect(() => {
const mq = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)");
if (mq && mq.matches) return;
if (window.innerWidth < minWidth) return;
const id = setTimeout(() => setOk(true), 300);
return () => clearTimeout(id);
}, [minWidth]);
return ok;
};
// The still is always rendered and stays the LCP element; the clip fades in over it only
// once it can actually play, so a browser that never fires canplay simply keeps the photo.
const Loop = ({ name, poster, w = 1200, sizes = "100vw", alt = "", eager = false, position, minWidth = 900 }) => {
const enabled = window.PS.useMotionOK(minWidth);
const [ready, setReady] = useState(false);
return (
<>
{enabled && (
)}
);
};
window.Loop = Loop;
// Theme-aware brand logos (uploads/) — lightmode = dark text for light surfaces, darkmode = cream text for dark surfaces
window.PS.logoLight = "uploads/full-logo-lightmode.png";
window.PS.logoDark = "uploads/full-logo-darkmode.png";
window.PS.useTheme = function useTheme() {
const { useState, useEffect } = React;
const [theme, setTheme] = useState(window.PS.getTheme());
useEffect(() => {
const onTheme = (e) => setTheme(e.detail);
window.addEventListener("ps:theme", onTheme);
return () => window.removeEventListener("ps:theme", onTheme);
}, []);
return theme;
};
// ---------- Icons ----------
// Icons come from window.PS_ICONS, which tools/build-icons.sh vendors out of Lucide
// (and Simple Icons for the two brand marks). Nothing here is drawn by hand: to add a
// glyph, add its name to that script and re-run it.
//
// Brand marks are filled paths rather than strokes, so they get .icon-brand instead.
const BRAND_ICONS = { instagram: true, facebook: true };
const Icon = ({ name, size = 20, className }) => {
const markup = (window.PS_ICONS || {})[name];
if (!markup) {
// A missing name is a build mistake, not a runtime state — say so once and render
// nothing rather than leaving an empty box that looks intentional.
if (!Icon._warned) { Icon._warned = {}; }
if (!Icon._warned[name]) { Icon._warned[name] = 1; console.warn(`[PS] unknown icon "${name}" — add it to tools/build-icons.sh`); }
return null;
}
return (
);
};
window.Icon = Icon;
// ---------- Levels ----------
// Wraps a run of sections at one level. Consecutive sections share a wrapper so a slab is
// one shape with one background and no seam between its parts; put them in separate
// wrappers only when the backdrop should show between them.
const Level = ({ at = "above", children }) => (
{children}
);
window.Level = Level;
// ---------- Page backdrop ----------
// One Grainient for the whole page, fixed behind everything. "Below" sections are simply
// transparent and let it through; "above" sections are opaque slabs on top of it. That
// means a page can alternate above/below as often as it likes on a single WebGL context.
//
// Colours are the site's own tokens, re-read whenever the theme flips, so the backdrop is
// a slow drift within the palette rather than a foreign gradient. Under
// prefers-reduced-motion it renders nothing and the page background shows instead.
const PageBackdrop = () => {
const theme = window.PS.useTheme();
const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduced) return null;
const read = (name, fallback) => {
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return /^#[0-9a-f]{6}$/i.test(v) ? v : fallback;
};
// Blend two hex colours; t = 0 keeps a, t = 1 gives b.
const mix = (a, b, t) => {
const ch = (h, i) => parseInt(h.slice(1 + i * 2, 3 + i * 2), 16);
const to = (n) => Math.round(n).toString(16).padStart(2, "0");
return "#" + [0, 1, 2].map((i) => to(ch(a, i) + (ch(b, i) - ch(a, i)) * t)).join("");
};
const dark = theme === "dark";
// Three steps of the palette. Light stays inside the creams with one sage breath.
//
// Dark cannot just swap in the dark-mode tokens: --sage-dark is a *light* sage there
// (#9cc6bf), so using it as the middle pole lit the whole backdrop and the below levels
// came out brighter than the slabs they sit behind, with body copy washing out on top.
// The accent is now mixed most of the way back to --bg, and gamma pulls the whole thing
// down further, so the gradient reads as a dark ground with a hint of teal in it.
const colors = dark
? { c1: read("--bg-2", "#18221f"),
c2: mix(read("--sage", "#74b0a8"), read("--bg", "#111917"), 0.72),
c3: read("--bg", "#111917") }
: { c1: read("--bg", "#f5f1ea"), c2: read("--sage-light", "#a8c8c2"), c3: read("--bg-2", "#ede7dc") };
return (
);
};
window.PageBackdrop = PageBackdrop;
// Shared tuning for the page headings' proximity effect (assets/js/variable-proximity.jsx).
// The resting weight is the h1's own 700, so every heading looks exactly as it did before and
// only the pointer changes anything. The radius is large because these are display sizes —
// upstream's default of 50 would light barely one letter of a 144px heading.
window.PS.PROX = {
fromFontVariationSettings: "'wght' 700",
toFontVariationSettings: "'wght' 900",
radius: 160,
falloff: "gaussian",
};
// ---------- Page hero aurora ----------
// A band of light across the top of the three cream page heroes. The home hero is a
// full-bleed photograph and does not get one.
//
// Colours are the site's own, re-read when the theme flips: sage-light -> sage -> terra, the
// cool-to-warm sweep the palette already runs on. Amplitude and blend are deliberately low —
// this sits behind an h1 and an eyebrow, so it has to read as light on the slab rather than
// as a picture competing with them.
const HeroAurora = () => {
const theme = window.PS.useTheme();
const reduced = window.matchMedia
&& window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduced) return null;
const read = (name, fallback) => {
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return /^#[0-9a-f]{6}$/i.test(v) ? v : fallback;
};
const dark = theme === "dark";
const stops = [
read("--sage-light", dark ? "#b3d2cc" : "#a8c8c2"),
read("--sage", dark ? "#74b0a8" : "#68a29b"),
read("--terra", dark ? "#e0855f" : "#d97757"),
];
return (
);
};
window.HeroAurora = HeroAurora;
// ---------- Filled-star rating ----------
// Shared: the About reviews section and the home hero's proof badge both draw it. Amber
// rather than a site token — a rating star that is not gold reads as a decoration.
const Stars = ({ n = 5, size = 16 }) => {
const color = "#f5a623";
return (
{Array.from({ length: 5 }).map((_, i) => (
))}
);
};
window.Stars = Stars;
// ---------- Clinic map ----------
// The clinic's coordinates, supplied by the owner. Everything that points at the building
// reads them from here, so there is one place to correct.
// The order the seven services are shown in — on the services page's stack and the home
// carousel alike, so a visitor moving between the two meets them in the same sequence.
//
// **Named by glyph, not written as indices.** `SVC_ICONS` / `SVC_STACK_ICONS` are positional
// against `CONTENT.services.items`, so an order written as raw numbers would hand every
// service the next one's place the moment the dictionary is reordered. Naming them means the
// order travels with the service.
//
// Display order only: the cards still receive their DICTIONARY index, which is what keys the
// icons, the accents and the `#service-N` deep links.
window.PS.SVC_ORDER = ["svcOrtho", "svcModalities", "svcAcupuncture",
"svcExercise", "svcWomens", "svcFoot", "svcMassage"];
// Anything in the dictionary that this list does not name is appended rather than dropped —
// a service added to CONTENT without being named here still appears, at the end, instead of
// silently vanishing from both pages.
window.PS.svcOrder = (items, icons) => {
const order = window.PS.SVC_ORDER
.map((name) => icons.indexOf(name))
.filter((i) => i >= 0 && i < items.length);
const seen = new Set(order);
items.forEach((_, i) => { if (!seen.has(i)) order.push(i); });
return order;
};
window.PS.CLINIC = {
lat: 37.794228530424185,
lon: 26.70125046521299,
// The clinic's own Google Maps place, not a coordinate search. A `?api=1&query=lat,lon`
// URL only drops an anonymous pin; this short link resolves to the listed business, with
// its name, hours and reviews. Owner-supplied — don't rebuild it from lat/lon.
maps: "https://maps.app.goo.gl/VNYBimBnzRTNz78N7",
// The clinic's contact address. It lives here rather than in the dictionaries because it is
// the same string in every language and it was previously written as a literal at six call
// sites — the same arrangement that once left the clinic page with a map pin 800m out to
// sea after the About page had been corrected. Every mailto: and every rendering of it
// reads this.
email: "info@physiosamos.gr",
// Legal identity, from the ΓΕΜΗ record (publicity.businessportal.gr/company/174307551000,
// supplied by the owner 2026-09-05): a general partnership (Ο.Ε.) founded 2024-01-08,
// registered with the Chamber of Samos. Rendered as the "business details" rows on /legal
// (legal-page.jsx) and read by tools/build-seo.js for the structured data. An empty value is
// simply not rendered, so the two still missing leave no placeholder behind.
legalName: "ATZEMIAN PHYSIO SAMOS Ο.Ε.", // registered name ("ATZEMIAN PHYSIO SAMOS G.P." in Latin script)
tradeName: "ATZEMIAN PHYSIO SAMOS", // διακριτικός τίτλος — what the public knows the clinic as
legalForm: "Ο.Ε.", // the dictionaries carry the spelled-out form per language
vat: "802322778", // ΑΦΜ
taxOffice: "", // ΔΟΥ — not on the register extract; owner to supply if wanted
gemi: "174307551000", // Αρ. ΓΕΜΗ (EUID ELGEMI.174307551000)
founded: "2024-01-08", // ημερομηνία σύστασης of the Ο.Ε. (the register)
since: 2017, // the year the clinic opened (legacy site); drives the home "years" stat
licence: "", // operating licence number + issuing authority — owner to supply
legalUpdated: "2026-09-05", // ISO date of the legal texts; /legal formats it per language
};
// Drawn from OpenStreetMap vector data by tools/build-map.py, not embedded from a tile
// server. An iframe could not be recoloured to the site's tokens, could not follow the
// theme, and carried its own zoom controls and attribution bar.
//
// Four colours, all of them site tokens: the land is --bg-2, minor streets --line-2,
// major streets --ink-3, and the marker --terra. Nothing here is interactive.
//
// The credit line is an ODbL obligation for the derived geometry, not decoration.
// `top` and `bottom` overlay content onto the map itself. The map is inert
// (`pointer-events: none`), so anything interactive placed in them has to opt back in — see
// `.clinic-map__bottom .btn` in main.css.
const ClinicMap = ({ label, className = "", top, bottom, name }) => {
const { useRef, useEffect } = React;
const m = window.PS_MAP;
const rootRef = useRef(null);
const topRef = useRef(null);
// Publish the top bar's height so the CSS can centre the marker on the map you can actually
// see rather than on the whole box. It has to be measured rather than written down: the bar
// is 93px at 1440 and 135px at 375, because the address wraps beside the button.
// Hooks run before the `!m` bail-out below, or the hook order would change between renders.
useEffect(() => {
const root = rootRef.current;
if (!root) return;
const bar = topRef.current;
if (!bar) { root.style.removeProperty("--cmap-top-h"); return; }
const apply = () => root.style.setProperty("--cmap-top-h", bar.offsetHeight + "px");
apply();
const ro = new ResizeObserver(apply);
ro.observe(bar);
return () => ro.disconnect();
}, [top, name]);
if (!m) return null;
return (
);
};
window.ClinicMap = ClinicMap;
// ---------- Photo caption ----------
// The one caption format for text sitting inside a photograph: a translucent category
// chip, the name in the display face, and a small muted line under it. Every in-image
// description on the site uses this — the bio portraits it came from, the home featured
// tiles, and the services spotlights, which each used to have their own arrangement.
//
// `size` only scales it for the box it sits in; the order and the styling stay fixed.
// Two lines beside an accent bar, and never more than two — the same shape the home-visits
// note and the social tiles use (`.contact-note`): a full-height accent on the left, the
// labels stacked to the right. The translucent category chip that used to sit above the
// title is gone; a chip, a title and a subtitle was three registers of type competing inside
// a photograph. Where a call site only had a chip, that string is now the subtitle.
const PhotoCaption = ({ title, sub, size = "md" }) => (
)}
);
};
window.Logo = Logo;
// ---------- Flags ----------
// From window.PS_FLAGS, vendored out of flag-icons by tools/build-icons.sh. Like the
// icons, none of these are drawn here.
const Flag = ({ code }) => {
const flags = window.PS_FLAGS || {};
const f = flags[code] || flags.el;
if (!f) return null;
// Sized by `.flag-svg` in main.css, not inline: an inline width beats every stylesheet
// rule, which is what stopped the touch-target block from holding the flag at 28px inside
// its enlarged 40px button. The flag fills whatever box it is given.
return (
);
};
window.Flag = Flag;
// ---------- Theme toggle ----------
const ThemeToggle = () => {
const [theme, setThemeState] = useState(window.PS.getTheme());
useEffect(() => {
const onTheme = (e) => setThemeState(e.detail);
window.addEventListener("ps:theme", onTheme);
return () => window.removeEventListener("ps:theme", onTheme);
}, []);
const dark = theme === "dark";
return (
);
};
window.ThemeToggle = ThemeToggle;
// ---------- Language flag menu ----------
const LangFlagMenu = () => {
const [t, lang, setLang] = useT();
const [open, setOpen] = useState(false);
// The page does not scroll under an open menu (owner's call, 2026-09-05). Paired with the
// sheet's own lock through PS.lockScroll's reference count, so the menu inside the sheet
// closing does not unlock the sheet.
useEffect(() => {
if (!open) return;
window.PS.lockScroll(true);
return () => window.PS.lockScroll(false);
}, [open]);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", onDown);
return () => document.removeEventListener("mousedown", onDown);
}, [open]);
const langs = window.PS.LANGS;
const current = langs.find((l) => l.code === lang) || langs[0];
return (
);
window.NavControls = NavControls;
// ---------- Booking context ----------
window.PS.openBooking = () => window.dispatchEvent(new Event("ps:open-booking"));
// ---------- Nav ----------
const Nav = ({ current = "home" }) => {
const [t] = useT();
const [mobileOpen, setMobileOpen] = useState(false);
// The page is frozen under the open sheet. `overflow: hidden` alone is not enough on a
// touch screen — see PS.lockScroll in smooth-scroll.js, which pins the body there.
useEffect(() => {
if (!mobileOpen) return;
window.PS.lockScroll(true);
return () => window.PS.lockScroll(false);
}, [mobileOpen]);
useEffect(() => {
// The static carries the Greek title and description — tools/build-seo.js writes
// them there from this same `seo` block — and once mounted both follow the active
// language, so a visitor's tab and a rendering crawler see the words the page shows.
const seo = (t.seo && t.seo[current]) || {};
document.title = seo.title || `${t.brand.name} — ${t.brand.subtitle}`;
const desc = document.querySelector('meta[name="description"]');
if (desc && seo.desc) desc.setAttribute("content", seo.desc);
document.documentElement.lang = window.PS.getLang();
}, [t, current]);
const links = [
{ key: "home", label: t.nav.home, href: "/" },
{ key: "services", label: t.nav.services, href: "/services" },
{ key: "clinic", label: t.nav.clinic, href: "/clinic" },
{ key: "about", label: t.nav.about, href: "/about" },
];
return (
{/* Portalled to on purpose. .nav carries a backdrop-filter, which makes it
the containing block for fixed-position descendants — rendered in place, this
panel's `inset: 0` resolved to the 72px nav strip, so its background covered
only that and the links spilled over the page below it with nothing behind
them. A portal puts it back on the viewport. */}
{mobileOpen && ReactDOM.createPortal(
, document.body)}
);
};
window.Nav = Nav;
// ---------- Marquee ----------
const Marquee = () => {
const { useRef, useEffect } = React;
const [t] = useT();
const items = t.marquee;
const tripled = [...items, ...items, ...items];
const bandRef = useRef(null);
const trackRef = useRef(null);
const rafRef = useRef(0);
// Hovering slows the band to a quarter speed rather than stopping it. A marquee that halts
// under the cursor reads as broken or stuck, and most of the time the pointer is only
// crossing the page on its way somewhere else.
//
// The speed change goes through the Web Animations handle on the CSS keyframes, because
// `playbackRate` keeps the track exactly where it is and only changes how fast it moves
// from there. Re-declaring `animation-duration` in a hover rule would instead re-resolve
// the animation's progress against the new duration and snap the band sideways.
useEffect(() => {
const band = bandRef.current;
const track = trackRef.current;
if (!band || !track || typeof track.getAnimations !== "function") return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const SLOW = 0.25;
let target = 1;
let rate = 1;
const ramp = () => {
const anims = track.getAnimations();
if (!anims.length) { rafRef.current = 0; return; }
rate += (target - rate) * 0.12;
if (Math.abs(target - rate) < 0.005) rate = target;
anims.forEach((a) => { a.playbackRate = rate; });
rafRef.current = rate === target ? 0 : requestAnimationFrame(ramp);
};
// Eased rather than switched: at 38s a marquee is slow enough that an instant drop to a
// quarter speed reads as a stumble.
const to = (v) => { target = v; if (!rafRef.current) rafRef.current = requestAnimationFrame(ramp); };
const enter = () => to(SLOW);
const leave = () => to(1);
band.addEventListener("mouseenter", enter);
band.addEventListener("mouseleave", leave);
return () => {
band.removeEventListener("mouseenter", enter);
band.removeEventListener("mouseleave", leave);
if (rafRef.current) cancelAnimationFrame(rafRef.current);
};
}, []);
return (
{/* No hours line under the number. It read the hours array's first entry, a fixed
index — Monday — so it printed Monday's hours on every day of the week and was
false six days in seven. Showing the *current* day instead would need
the weekday resolved in Europe/Athens rather than the visitor's own zone, and
would put back the kind of time-dependent claim the "Τώρα ανοιχτά" pill was
removed for. The full schedule is on the clinic page. */}
);
};
window.BookingModal = BookingModal;
// ---------- Footer ----------
const Footer = () => {
const [t] = useT();
const bottomRef = useRef(null);
// The bottom row is copyright on the left and the legal links on the right — unless the two
// do not fit side by side, in which case they stack and centre (owner's call, 2026-09-05).
// CSS cannot see whether a flex row wrapped, so it is measured: both children keep their
// intrinsic width (flex-shrink 0, see .footer-bottom in main.css) and the row takes
// .is-stacked when their sum plus the gap exceeds it. Re-measured on resize, after every
// language switch (the strings change width — hence the [t] dependency, which runs after the
// new strings have been committed) and through a ResizeObserver for everything else.
const fitBottom = () => {
const row = bottomRef.current;
if (!row || row.children.length < 2) return;
const [a, b] = row.children;
row.classList.toggle("is-stacked", a.offsetWidth + b.offsetWidth + 24 > row.clientWidth);
};
useEffect(fitBottom, [t]);
useEffect(() => {
window.addEventListener("resize", fitBottom);
let ro = null;
if (window.ResizeObserver && bottomRef.current) {
ro = new ResizeObserver(fitBottom);
ro.observe(bottomRef.current);
[...bottomRef.current.children].forEach((c) => ro.observe(c));
}
return () => { window.removeEventListener("resize", fitBottom); if (ro) ro.disconnect(); };
}, []);
// The footer now sits on --footer-bg, which flips with the theme, so the wordmark has
// to flip with it too — it used to be pinned to the dark-mode logo against a dark slab.
const logo = window.PS.useTheme() === "dark" ? window.PS.logoDark : window.PS.logoLight;
// Brand colours, matching the clinic page's contact tiles: these two marks are the site's
// one deliberate exception to colouring icons with site tokens, because a brand mark in the
// wrong colour reads as a mistake. Instagram's is a gradient, not a flat approximation.
const social = [
{ href: "https://www.facebook.com/people/Atzemian-Physio-Samos/100089499093406/",
icon: "facebook", label: "Facebook", brand: "#1877F2" },
{ href: "https://www.instagram.com/maria_atzemian/", icon: "instagram", label: "Instagram", ig: true },
];
return (
);
};
window.Footer = Footer;
// ---------- Reveal hook ----------
// Section bodies rise once as their section arrives. The headings inside animate themselves
// (BlurText on the h2s, the same keyframe on the h1s' letters); this is everything else —
// leads, cards, images, buttons.
//
// It was disabled before because an IntersectionObserver-driven version was unreliable, and
// the failure mode was content that never appeared. Three things fix that rather than a
// second attempt at the same thing:
//
// * The hidden start state hangs off `html.ps-anim`, added here. If this never runs, or
// runs under reduced motion, nothing is hidden and everything is simply visible.
// * The observer is backed by a rect check on scroll and resize, so a missed notification
// still resolves the moment the visitor moves.
// * Anything already on screen at mount is revealed immediately, not on the next event.
//
// Heroes are excluded. They are on screen before the first scroll and behind the preloader,
// so their "entrance" would be over before anyone saw it; their headings still animate.
window.PS.useReveal = function useReveal() {
const { useEffect } = React;
useEffect(() => {
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const root = document.documentElement;
const targets = Array.from(
document.querySelectorAll(".lvl-above section > .wrap, .lvl-above section > .wrap-wide, " +
".lvl-below section > .wrap, .lvl-below section > .wrap-wide")
).filter((el) => !el.closest(".hero-full, .page-hero"));
if (!targets.length) return;
root.classList.add("ps-anim");
targets.forEach((el) => el.setAttribute("data-reveal", ""));
const reveal = (el) => {
if (el.classList.contains("is-in")) return;
el.classList.add("is-in");
if (io) io.unobserve(el);
};
const sweep = () => {
const vh = window.innerHeight || root.clientHeight;
let remaining = 0;
targets.forEach((el) => {
if (el.classList.contains("is-in")) return;
const r = el.getBoundingClientRect();
if (r.top < vh && r.bottom > 0) reveal(el); else remaining++;
});
if (!remaining) {
window.removeEventListener("scroll", sweep);
window.removeEventListener("resize", sweep);
}
};
let io = null;
if (typeof IntersectionObserver === "function") {
io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) reveal(e.target); });
}, { rootMargin: "0px 0px -8% 0px" });
targets.forEach((el) => io.observe(el));
}
window.addEventListener("scroll", sweep, { passive: true });
window.addEventListener("resize", sweep);
sweep();
return () => {
if (io) io.disconnect();
window.removeEventListener("scroll", sweep);
window.removeEventListener("resize", sweep);
};
}, []);
};
// ---------- CTA Band ----------
// ---------- Service Drawer ----------
const ServiceDrawer = ({ service, onClose }) => {
if (!service) return null;
useEffect(() => {
const onKey = (e) => e.key === "Escape" && onClose();
document.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
}, []);
return (
<>
);
};
window.ServiceDrawer = ServiceDrawer;
// ---------- Services Accordion ----------
const ServicesAccordion = ({ limit, defaultOpen = null }) => {
const [t] = useT();
const [openIdx, setOpenIdx] = useState(defaultOpen);
const [drawer, setDrawer] = useState(null);
const list = limit ? t.services.items.slice(0, limit) : t.services.items;
return (
);
};
window.ServicesAccordion = ServicesAccordion;
// ---------- Tweaks ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": ["#f5f1ea", "#68a29b", "#2d4a47", "#d97757"],
"displayFont": "Literata",
"bodyFont": "Manrope",
"radius": 14
}/*EDITMODE-END*/;
const PSTweaksPanel = () => {
const [tw, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
// Apply tweaks live to CSS variables
useEffect(() => {
const root = document.documentElement;
if (Array.isArray(tw.palette)) {
root.style.setProperty("--bg", tw.palette[0]);
root.style.setProperty("--sage", tw.palette[1]);
root.style.setProperty("--sage-dark", tw.palette[2]);
root.style.setProperty("--terra", tw.palette[3]);
root.style.setProperty("--ink-2", tw.palette[2]);
}
root.style.setProperty("--font-display", `"${tw.displayFont}", ui-serif, Georgia, serif`);
root.style.setProperty("--font-sans", `"${tw.bodyFont}", ui-sans-serif, system-ui, sans-serif`);
root.style.setProperty("--radius", tw.radius + "px");
}, [tw]);
const TP = window.TweaksPanel, TS = window.TweakSection,
TC = window.TweakColor, TSel = window.TweakSelect,
TSl = window.TweakSlider, TT = window.TweakToggle;
return (
setTweak("palette", v)}
options={[
["#f5f1ea", "#68a29b", "#2d4a47", "#d97757"],
["#fafaf7", "#3a6b65", "#1a2f2d", "#e8dcc8"],
["#ffffff", "#86c1ba", "#0a3a4a", "#f0c674"],
["#1a2426", "#7ab8b0", "#f5f1ea", "#c8956d"],
["#f5efe8", "#c8956d", "#3a2820", "#68a29b"],
]} />
{/* Only the two families the pages actually load. The old list offered faces with
no Greek glyphs, so picking one silently swapped the site to a system fallback. */}
setTweak("displayFont", v)}
options={["Literata", "Manrope"]} />
setTweak("bodyFont", v)}
options={["Manrope", "Literata"]} />
setTweak("radius", v)} />
);
};
window.PSTweaksPanel = PSTweaksPanel;
// Tag the React app root with screen label
window.PS.mountApp = (rootSelector, App, screenLabel) => {
const rootEl = document.querySelector(rootSelector);
if (screenLabel) rootEl.setAttribute("data-screen-label", screenLabel);
// Lift the boot cover on the first painted frame that actually has content in it.
//
// Only ever touch the element when it is *our* cover. On the first page of a session the
// very same element is the real preloader, still warming the media cache behind its progress
// bar, and mountApp runs ~440ms in — long before its 700ms floor. Removing it there cut the
// preloader off mid-fetch.
// A deep link (/legal#privacy, /clinic#contact) has to be landed by hand: the browser tried
// at load, when #root held only the static fallback and the target did not exist. Both paths
// need it — the boot curtain on later pages and the preloader on the first — so it runs
// before the curtain check. ScrollStack's #service-N is left alone; that page owns its own
// maths (see services-page.jsx) and a native scrollIntoView on a transformed card lands wrong.
const landHash = () => {
const h = location.hash;
if (!h || h.length < 2 || /^#service-/.test(h)) return false;
let el = null;
try { el = document.getElementById(decodeURIComponent(h.slice(1))); } catch (e) { return false; }
if (!el) return false;
el.scrollIntoView();
if (window.PS.syncScroll) window.PS.syncScroll();
return true;
};
const uncover = () => {
const de = document.documentElement;
const landed = landHash();
if (!de.classList.contains("ps-booting")) return;
const cover = document.getElementById("ps-loader");
// Land at the top before the curtain lifts, so the page is revealed already at its start
// rather than scrolling under the visitor afterwards. Only for a real navigation: on a
// back/forward the browser is restoring a position the visitor chose, and overriding that
// would make the back button feel broken. `syncScroll` is what stops the wheel lerp
// dragging the page back a frame later — see smooth-scroll.js.
const nav = performance.getEntriesByType("navigation")[0];
if (landed) { /* a deep link already put the page where it belongs */ }
else if (!nav || nav.type === "navigate") {
window.scrollTo(0, 0);
if (window.PS.syncScroll) window.PS.syncScroll();
}
// `ps-booting` has to outlive the lift: it is what gives the curtain `position: fixed`
// and `display: flex`, so dropping it first would make the element vanish instead of
// slide. Both come off together when the animation ends.
const finish = () => {
de.classList.remove("ps-booting");
if (cover && cover.parentNode) cover.parentNode.removeChild(cover);
};
const still = window.matchMedia
&& window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!cover || still) { finish(); return; }
const lift = () => {
cover.addEventListener("animationend", finish, { once: true });
// A hidden tab runs no CSS animations at all, so `animationend` can simply never
// arrive. The curtain must still come off — a visitor returning to the tab has to find
// the page, not a panel.
setTimeout(finish, 900);
cover.classList.add("is-lifting");
};
// Nothing to sequence against any more: the outgoing sweep runs on the *previous*
// document (page-exit.js) and is over before this one exists, so the mount is the only
// thing the lift waits for. The `__psReveal` wait that used to sit here died with the
// cross-document View Transitions it was written for.
lift();
};
const safety = setTimeout(uncover, 4000); // a mount that never happens must not strand it
// Size the headings for the viewport before the curtain lifts (fit-headings.js), so the
// reader never sees the CSS size jump to the fitted one.
const done = () => { clearTimeout(safety); if (window.PS.fitHeadings) window.PS.fitHeadings(); uncover(); };
// Wait for the commit, not for two frames. `createRoot().render()` is asynchronous in React
// 18 — it schedules the work rather than doing it — so a bare double-rAF after the call can
// fire before a single node exists. On an unloaded page the two land in the same frame and it
// looks fine; under load it lifted the cover ~60-130ms *before* the content arrived, which is
// the one thing the cover exists to prevent. So: watch for the first child, then take two
// frames to let it paint.
const afterPaint = () => requestAnimationFrame(() => requestAnimationFrame(done));
//
// "First child" cannot be the signal any more: #root is not empty before React runs.
// tools/build-seo.js writes a crawlable static copy of the page into it (#ps-static) for
// crawlers and visitors without JavaScript, and React clears that on its first commit —
// so a bare firstChild check is true before a single React node exists, and the curtain
// would lift onto the fallback. Wait for a child that is *not* the fallback instead.
const hasApp = () => Array.prototype.some.call(rootEl.children, (c) => c.id !== "ps-static");
const mo = new MutationObserver(() => {
if (!hasApp()) return;
mo.disconnect();
afterPaint();
});
mo.observe(rootEl, { childList: true });
ReactDOM.createRoot(rootEl).render();
if (hasApp()) { mo.disconnect(); afterPaint(); }
};