// PHYSIO SAMOS — Home page const { useState, useEffect } = React; // Same six as the About reviews column, so a reviewer keeps their colour across pages. const REVIEW_AVATAR_COLORS = ["#68a29b", "#d97757", "#2d4a47", "#c8956d", "#86c1ba", "#3a6b65"]; const HomeHero = () => { const { useRef } = React; const [t] = useT(); const headingRef = useRef(null); return ( <>
); }; const StatsRow = () => { const [t] = useT(); return (
{/* The figure and its suffix are separate now: CountUp animates a number, and "k+" or "+" is not part of one. These are not in the dictionaries — only the labels below them are — so splitting them costs no key parity. */} {[ // Years open is computed, not written: the clinic opened in CLINIC.since (2017), so the // figure steps up by itself each January — "9+" in 2026, "10+" in 2027 — instead of // going stale the way a hardcoded 9 would (owner's call, 2026-09-05). { n: new Date().getFullYear() - window.PS.CLINIC.since, suffix: "+", v: t.hero.stat_years }, { n: 1.2, suffix: "k+", v: t.hero.stat_patients }, { n: 24, suffix: "", v: t.hero.stat_protocols }, ].map((s, i) => (
{/* Staggered by index so the three do not tick in lockstep. */} {s.suffix}
{s.v}
))}
); }; // One glyph per entry in CONTENT.values.items, named rather than indexed so a reordered // dictionary cannot hand a value someone else's icon. const VALUE_ICONS = ["valAssess", "valTech", "valPilates", "valWomens"]; const ValuesSection = () => { const [t] = useT(); return (
{t.values.eyebrow}



{t.values.lead}

{/* The premises. Labels reuse strings the clinic page already carries, rather than inventing five more in five languages. The owner paired the two beds on 2026-09-05: the frame in `massage-room-shelf` is the TREATMENT room and the one in `treatment-room-bed` is the MASSAGE room — the slugs were named from a guess at the photographs and read the wrong way round. Renaming them is a manifest edit plus a rebuild and has not been done; the pairing below is the owner's word. */}
({ image: window.PS.img(slug, 800), srcSet: (window.PS_MEDIA[slug] || []).map((w) => `media/${slug}-${w}.jpg ${w}w`).join(", "), sizes: "(max-width: 560px) 100vw, (max-width: 900px) 90vw, 45vw", label, alt: label, }))} defaultIndex={0} height={460} gap={10} radius={16} expandRatio={0.52} trigger="hover" dim={0.08} grayscale={false} accentColor="#a8c8c2" overlayColor="#1a1f1e" textColor="#f5f1ea" />
{/* --rule, not --line: this block sits on a below level now, over the animated gradient rather than a flat slab, and --line disappeared against it. Mixed from --ink so it inverts with the theme and stays a step stronger than the card borders. The stacked layout below 900px reads the same property. */}
{t.values.items.map((v, i) => (
0 ? 28 : 0, }}>

{v.title}

{v.body}

))}
); }; const FeaturedImageBlock = () => { const [t] = useT(); return (
{/* The gym floor mid-exercise, which is what the caption names. `position` is horizontal because the crop is: a 16:9 photo in a near-square tile crops on the x axis, so a vertical value here would do nothing at all — the trap the old `center 32%` fell into. */}
{/* Stamatina working a knee, hands-on — which is what the caption says. The device frames from the same session (ultrasound applicator on the knee) were the closer match for "her face is barely visible", but an instrument under a "Manual Therapy" label claims the wrong thing. She is centre-left, so the crop leans that way rather than centring on the empty screen behind her. */}
{/* The primary specialism only, not the whole `focus` string. This card's column is 258px at 901 and never exceeds 456px, so the full list ran to four lines of uppercase mono above the quote (five in French) — and the team row directly beside it already prints the string in full, so nothing is lost. Splitting on the separator every language uses; a string without one falls through to itself, which is the old behaviour rather than an empty label. */} {t.team.members[0].focus.split(" · ")[0]} {/* The whole sentence, not a slice. It was cut at 110 characters, which broke mid-word in Greek ("βελτίωσ…") and — because Turkish is 109 characters — rendered that language's full stop followed by an ellipsis. It is the owner's own words either way, so truncating it was the wrong trade; the type steps down instead. */}

“{t.team.members[0].quote}”

{/* Name only. The role line that sat under it came off at the owner's request (2026-09-05): with three titles it ran to two lines of 12px in a footer that wants one, and the About page carries the full line beside her portrait. */}
— {t.team.members[0].name}
); }; // Home services showcase: a snap carousel of cards, three per view on desktop. Each card // gets a line icon and its own muted accent — related tones, not the brand pair repeated. const SVC_ACCENTS = ["#5F9A94", "#C08552", "#A9827C", "#8A9A5B", "#B49B57", "#547671", "#7C8FA6"]; // One Lucide glyph per service, in the order of CONTENT.services.items. Named rather // than indexed so a reordered dictionary cannot silently hand a service the wrong icon. const SVC_ICONS = ["svcOrtho", "svcExercise", "svcWomens", "svcFoot", "svcMassage", "svcAcupuncture", "svcModalities"]; // Three copies of the list, so the track can wrap in either direction without the user // ever reaching an edge. The middle copy is home; once a scroll settles outside it, we // jump back by exactly one copy width — which is always a valid snap point, so the swap // is invisible. const SVC_REPEATS = 3; // How long each card holds before the carousel steps on. The countdown bar across the top // of the active card is driven from the same number, through --svc-dur, so the bar can never // disagree with the timer. const SVC_AUTOPLAY = 5200; const ServicesCardCarousel = () => { const [t] = useT(); const trackRef = React.useRef(null); const rootRef = React.useRef(null); const rafRef = React.useRef(0); const [activeKey, setActiveKey] = React.useState(null); const [paused, setPaused] = React.useState(false); const items = t.services.items; const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; const copyWidth = () => { const el = trackRef.current; return el ? el.scrollWidth / SVC_REPEATS : 0; }; // One card plus one gap. The carousel steps by a single card now rather than a full page // of three, because "time left until the next one" only means anything if the next one is // a card and not a screenful. const cardStep = () => { const el = trackRef.current; if (!el || el.children.length < 2) return 0; return el.children[1].offsetLeft - el.children[0].offsetLeft; }; // Whichever card sits nearest the middle of the scrollport is the active one. Derived from // scroll position rather than tracked as an index, so a trackpad swipe, a snap settle and // the autoplay timer all agree without any of them telling the others. const measureActive = () => { rafRef.current = 0; const el = trackRef.current; if (!el) return; const mid = el.scrollLeft + el.clientWidth / 2; let best = null, bestD = Infinity; Array.from(el.children).forEach((c) => { const d = Math.abs(c.offsetLeft + c.offsetWidth / 2 - mid); if (d < bestD) { bestD = d; best = c.dataset.svcKey; } }); setActiveKey((prev) => (prev === best ? prev : best)); }; const scheduleMeasure = () => { if (!rafRef.current) rafRef.current = requestAnimationFrame(measureActive); }; React.useEffect(() => { const el = trackRef.current; if (!el) return; el.scrollLeft = copyWidth(); measureActive(); }, [items.length]); React.useEffect(() => { const el = trackRef.current; if (!el) return; let timer; const recentre = () => { const w = copyWidth(); if (!w) return; // Wait for the scroll to settle before teleporting: doing it mid-animation would // fight the smooth scroll, which is targeting an absolute position. if (el.scrollLeft < w * 0.5) el.scrollLeft += w; else if (el.scrollLeft > w * 1.5) el.scrollLeft -= w; measureActive(); }; const onScroll = () => { scheduleMeasure(); clearTimeout(timer); timer = setTimeout(recentre, 150); }; el.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", scheduleMeasure); return () => { el.removeEventListener("scroll", onScroll); window.removeEventListener("resize", scheduleMeasure); clearTimeout(timer); if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [items.length]); const step = (dir) => { const el = trackRef.current; if (!el) return; const w = copyWidth(); // Recentre before the step rather than after it: the jump is instantaneous and // invisible, and it leaves the smooth scroll a safe range to animate through instead // of running into the end of the track. The scroll listener above stays as the // safety net for trackpad swipes, which arrive without going through here. if (w) { if (dir < 0 && el.scrollLeft - el.clientWidth < w * 0.25) el.scrollLeft += w; else if (dir > 0 && el.scrollLeft + el.clientWidth > w * 1.75) el.scrollLeft -= w; } el.scrollBy({ left: dir * (cardStep() || el.clientWidth), behavior: reduced ? "auto" : "smooth" }); }; // The timer restarts whenever the active card changes, so a manual step resets the // countdown instead of leaving the bar mid-way through someone else's turn. React.useEffect(() => { if (reduced || paused || activeKey === null) return; const id = setTimeout(() => step(1), SVC_AUTOPLAY); return () => clearTimeout(id); }, [activeKey, paused, reduced]); // The middle copy is the one at rest, so it is the one that carries the real links; // the outer two are scenery and stay out of the accessibility tree and the tab order. const REAL_COPY = 1; // Same sequence as the services page's stack (PS.SVC_ORDER). `i` stays the DICTIONARY // index throughout — it is what keys the accent, the glyph and the `#service-N` link — // so only the position changes here. const loop = []; const order = window.PS.svcOrder(items, SVC_ICONS); for (let r = 0; r < SVC_REPEATS; r++) { order.forEach((i) => loop.push({ sv: items[i], i, key: `${r}-${i}`, real: r === REAL_COPY })); } // **Hover no longer pauses it** — the carousel advances whether the pointer is over it or // not. It used to stop on `mouseenter`, which meant a pointer resting anywhere over the row // froze the rotation indefinitely, and on a wide screen that is most of where the pointer // sits while reading. Focus still pauses: a keyboard user who has tabbed into a card should // not have it scrolled out from under them, and that is about the caret, not the mouse. const hold = (on) => () => setPaused(on); return (
{loop.map(({ sv, i, key, real }) => { const c = SVC_ACCENTS[i % SVC_ACCENTS.length]; const isActive = key === activeKey; return ( {/* The service's own glyph, blown up and pushed into the corner until it is texture rather than an icon. */} {/* Keyed on the active card so React remounts it at every change, which is what restarts the CSS animation from zero. */}

{sv.title}

{sv.subtitle}

{t.ui.read_more} → ); })}
); }; const ServicesPreview = () => { const [t] = useT(); return (
{t.services.eyebrow}

{" "}

{t.services.lead}

{t.services.see_all} →
); }; const ConditionsSection = () => { const [t] = useT(); return (
{t.conditions.eyebrow}

{" "}

{t.conditions.lead}

{t.conditions.groups.map((g, i) => (

{g.title}

    {g.items.map((it, j) => (
  • {it}
    • ))}
))}
); }; const TeamPreview = () => { const [t] = useT(); // Same design language as the service cards (accent tick, mono role, accent link), // but the section keeps its portraits-beside-text layout rather than becoming cards. const accents = ["#5F9A94", "#C08552"]; const photos = ["team-maria-portrait", "team-stamatina-portrait"]; return (
{t.team.members.map((m, i) => (
{/* Just the accent tick: the list beside these portraits already carries each name, so repeating it here said the same thing twice. The colour is what ties a photo to its row. */}
))}
{t.team.eyebrow}


{t.team.lead}

{/* The accent is the name's colour now, rather than a rule beside it. */} {t.team.members.map((m, i) => (
{m.name}
{m.focus}
))}
); }; // ---------- FAQ ---------- // Moved here when the contact page was folded away. const FAQSection = () => { const [t, lang] = useT(); const [openIdx, setOpenIdx] = useState(0); const faqs = t.faq.items; return (
{t.faq.eyebrow}


{t.faq.lead}

{/* Fills the corner the heading leaves empty beside a tall list of questions. Coloured from --line-strong, the same hairline the questions are ruled with, so it reads as part of the same drawing rather than a new element. */}
{/* No rows/columns/size: it fills the corner it is given and works the grid out from the measured area, so the density holds at any width. */}
{faqs.map((f, i) => { const open = openIdx === i; return (
{/* Always mounted: opening and closing is a height transition (grid-template-rows 0fr -> 1fr, see .faq-a in main.css) and a node that unmounts cannot animate shut. Closed, it is zero height, clipped, and hidden from assistive tech. */}
{f.a}
); })}
); }; const App = () => { window.PS.useReveal(); return ( <>