// ============================================================ // FORME AESTHETICS — Shared components // ============================================================ const { useState, useEffect, useRef, useCallback, useMemo } = React; // ─── Router primitives ───────────────────────────────────── function useHashRoute() { const get = () => { const h = window.location.hash.replace(/^#/, ''); return h || '/'; }; const [path, setPath] = useState(get); useEffect(() => { const onHash = () => { setPath(get()); window.scrollTo({ top: 0, behavior: 'instant' }); }; window.addEventListener('hashchange', onHash); if (!window.location.hash) window.location.hash = '/'; return () => window.removeEventListener('hashchange', onHash); }, []); return path; } function Link({ to, children, className, onClick, ...rest }) { const handle = (e) => { e.preventDefault(); if (window.location.hash === '#' + to) return; window.location.hash = to; if (onClick) onClick(e); }; return ( {children} ); } // ─── Logo mark ───────────────────────────────────────────── function Brand({ subtle }) { return ( F Forme Aesthetics · Mayfair ); } // ─── Nav ─────────────────────────────────────────────────── function Nav({ path, onOpenMobile }) { return (
Book a consultation
); } // ─── Mobile overlay ──────────────────────────────────────── function MobileOverlay({ open, onClose }) { useEffect(() => { if (open) document.body.style.overflow = 'hidden'; else document.body.style.overflow = ''; return () => { document.body.style.overflow = ''; }; }, [open]); return (
{ROUTES.map(r => ( {r.num} {r.label} ))} 07 Book
14 Mount Street · Mayfair · London W1K 2RJ
+44 20 7946 0421
); } // ─── Footer ──────────────────────────────────────────────── function Footer() { return ( ); } // ─── Image placeholder ───────────────────────────────────── function Placeholder({ tone = 'warm', label, style, ratio, className = '' }) { const aspect = ratio ? { aspectRatio: ratio } : null; return (
{label && {label}}
); } // ─── Eyebrow with rule ───────────────────────────────────── function Eyebrow({ children, gold, num }) { return (
{num && {num}} {children}
); } // ─── Press band ───────────────────────────────────────────── function PressBand() { return (
{PRESS.map((p) => (
{p.label} {p.name}
))}
); } // ─── Accordion ───────────────────────────────────────────── function Accordion({ items, defaultOpen = -1 }) { const [open, setOpen] = useState(defaultOpen); return (
{items.map((it, i) => (
{it.a}
))}
); } // ─── Service card ───────────────────────────────────────── function ServiceCard({ s }) { return (
{s.duration}

{s.title}

{s.italic}

{s.body}

From {s.price}
); } // ─── Pricing table ───────────────────────────────────────── function PricingTable({ services }) { return (
{services.map((s, i) => (
{s.name}
{s.desc}
{s.duration}
{s.price} {s.priceNote && {s.priceNote}}
))}
); } // ─── Page hero (compact) ─────────────────────────────────── function PageHero({ eyebrow, title, italic, lede, num }) { return (
{eyebrow}

{title} {italic && <>
{italic}}

{lede &&

{lede}

}
); } Object.assign(window, { useHashRoute, Link, Brand, Nav, MobileOverlay, Footer, Placeholder, Eyebrow, PressBand, Accordion, ServiceCard, PricingTable, PageHero, });