// PHYSIO SAMOS — Clinic page (Το κέντρο / Ο χώρος μας)
const ClinicHero = () => {
const { useRef } = React;
const [t, lang] = useT();
const headingRef = useRef(null);
return (
{/* This is the longest heading on the site — three sentences, 39 characters in Greek
and French — so it is the one that sets `.page-hero__title`'s 21ch cap. The two
s that used to force it onto three lines are gone. */}
{t.clinic.eyebrow}
{" "}
{" "}
{t.clinic.lead}
{/* #contact, not #visit: the VisitSection this used to point at was replaced by
ContactSection, and the anchor went with it — this button had been scrolling
nowhere. */}
{t.clinic.visit_title}→ 22730 78420
);
};
const ClinicGallery = () => {
// The premises end to end: the Pilates studio, the massage room, then the equipment.
// Each tile owns one palette accent, which is the colour its border lights up on hover —
// so no two photographs glow the same. See border-glow.jsx and the `.bg-card` block.
const photos = [
{ src: "pilates-studio-therapist", span: true, pos: "center 45%", accent: "var(--sage-dark)" },
{ src: "massage-room-empty", pos: "center 55%", accent: "var(--terra)" },
{ src: "normatec-boots", pos: "center center", accent: "var(--sage)" },
{ src: "tecar-winback", pos: "center 40%", accent: "var(--terra-dark)" },
{ src: "pilates-balls", pos: "center center", accent: "var(--sage-light)" },
];
return (
{/* `.sec-head` like the rest, but this section is a dark band, so the eyebrow, the
title and the lead all keep their explicit light colours — `.sec-head__lead`'s
`--ink-3` would be near-invisible on `--ink`. Same trap as the services process
block: taking a section's ground away does not take its text colours away. */}
);
};
const MotionSection = () => {
const [t] = useT();
const motionOK = window.PS.useMotionOK(700);
const clips = ["clinic-device", "clinic-massage", "clinic-rehab", "clinic-studio"];
// Two-tone, like every other section head on the site: roman, then the second half in
// italic serif at --sage-dark. This one rendered its title as a single run in --ink and was
// the only head anywhere without the accent — the rooms head directly above it and the
// contact head below it both carry it, so on one page it read as three headers in two
// different styles. The split is the sentence's own comma, which every one of the five
// languages already has, so it needed no new copy — only the same _a/_b key pair
// `ui.spaces_a`/`spaces_b` uses two sections earlier.
return (
{t.clinic.tour_label}
{" "}
{t.clinic.motion_lead}
{clips.map((name, i) => (
{motionOK && (
)}
{/* Inside the frame, not under it, and in the site's one in-image caption
format — `PhotoCaption`, the same accent-bar block the photographs use.
It carries no `sub`: every string that could serve as one is already on
this page. The room names and their descriptions are the rooms section
above, and the three actions ("hands-on work on the reformer, a massage
in the treatment room, a session with physical modalities") are the lead
directly over these clips. A subtitle here would repeat one of them.
`PhotoCaption` renders the title alone when `sub` is absent. */}
))}
);
};
// ---------- Contact ----------
// Coordinates and the maps link come from window.PS.CLINIC in components.jsx.
const CLINIC = window.PS.CLINIC;
// `fill` marks the card in each column that absorbs the leftover height, so the columns end
// level without the shortest card being the one that stretches.
const ContactCard = ({ icon, accent, label, children, action, fill }) => (
{/* No inline `--cols` here on purpose: `.contact-grid` owns the ratio so a media
query can narrow it. See the rule in main.css. */}
{/* Three grid children, a quarter each for the two card columns and a half for the
map. `fill` on every card so each column's stack absorbs whatever the tallest
column leaves over and all three still start and end on one line. */}
{/* Day above its hours, not beside them — the same label-above-value pair
the contact cards and the booking modal's rows already use. Beside them,
a split day's two ranges had to stack right-aligned in the leftover
width, which read as one time that had wrapped rather than two shifts,
and left the four split rows taller than the three single ones.
Stacked, every row is the same height and the ranges get the full column.
Splitting on our own ", " separator is still what keeps a range whole: an
en dash is a valid break opportunity, so a single string broke *inside* a
time ("17:00–" / "21:00"). Keep the separator if you edit the hours.
`closed` is "this value has no digits in it", which holds in all five
languages — Κλειστά / Closed / Geschlossen / Fermé / Kapalı — and every
time has digits. It only recesses the value's colour. */}
{t.contact.hours.map((h, i) => {
const parts = h.h.split(", ");
const closed = !/\d/.test(h.h);
return (
{h.d}
{parts.map((part, j) => {part})}
);
})}
{/* Sits after the schedule inside `.contact-card__body`, so `.contact-hours`
(flex: 1 1 auto) grows and pushes it to the card's foot. The asterisk is in
the markup rather than the dictionaries, so the five translations carry the
sentence only — and it is aria-hidden because there is no matching marker
above for a screen reader to tie it back to. */}
*{t.contact.hours_note}
{/* Above the map, not below it: it is a service note, and it wears the same
full-height icon block as the social tiles. */}
{t.ui.home_visits_title}
{t.ui.home_visits_body}
{/* The address card is gone; its two pieces live on the map itself — the address
at the top, the button at the bottom. A map with the address written on it is
one object rather than a card describing a picture beside it. */}
{/* No "ΔΙΕΥΘΥΝΣΗ" eyebrow: the two lines under it are self-evidently an
address, and the label was a third register of type in a corner that
already carries a street name, a town and a button. */}
![{t.clinic.motion_items[i]}]({`media/${name}-poster.jpg`})
{motionOK && (
)}
{/* Inside the frame, not under it, and in the site's one in-image caption
format — `PhotoCaption`, the same accent-bar block the photographs use.
It carries no `sub`: every string that could serve as one is already on
this page. The room names and their descriptions are the rooms section
above, and the three actions ("hands-on work on the reformer, a massage
in the treatment room, a session with physical modalities") are the lead
directly over these clips. A subtitle here would repeat one of them.
`PhotoCaption` renders the title alone when `sub` is absent. */}