// components.jsx — shared building blocks: Placeholder, icons, Nav, Hero, sections. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ── Stripe-pattern placeholder (used everywhere photos would go) ──────── // kind controls the pattern + base hue offset; label is the monospace // caption rendered at the bottom-left. function Placeholder({ kind = 'colour', label = '', ratio = '4/5', accent = 0, dense = false }) { // The pattern is a 4-stop diagonal hatch tinted by --color-primary; // accent index lets us subtly differ adjacent placeholders so they // don't read as identical tiles. const angle = [-22, 18, -8, 32][accent % 4]; const tint = ['var(--c-primary)', 'var(--c-primaryDark)', 'var(--c-accent)', 'var(--c-primary)'][accent % 4]; return (
[ {kind} ] {label && {label}}
); } // ── Real image with Placeholder fallback ─────────────────────────────── // Drop-in replacement for Placeholder when a real URL is available. // fit: 'cover' crops to the box (default). 'contain' letterboxes instead — // use it for composed images (before/after collages) where a crop would cut // half the comparison away. function SiteImage({ src, ratio = '4/5', kind = 'colour', label = '', accent = 0, alt = '', fit = 'cover' }) { const [err, setErr] = React.useState(false); if (!src || err) return ; return (
{alt setErr(true)}/>
); } // ── Stylist avatar — initials when no photo available ─────────────────── function StylistAvatar({ member, ratio = '3/4' }) { const [err, setErr] = React.useState(false); const initials = member.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(); const tints = ['var(--c-primary)', 'var(--c-primaryDark)', 'var(--c-accent)', 'var(--c-primary)']; const tint = tints[member.accent % 4]; if (member.photoUrl && !err) { return (
{member.name} setErr(true)}/>
); } return (
{initials}
); } // ── Tiny inline icons (no library — keeps the bundle clean) ───────────── const Icon = { arrow: (p) => , star: (p) => , phone: (p) => , whatsapp: (p) => , pin: (p) => , clock: (p) => , ig: (p) => , fb: (p) => , check: (p) => , x: (p) => , chevL: (p) => , chevR: (p) => , scissors: (p) => , sun: (p) => , moon: (p) => , diploma: (p) => , globe: (p) => , chevD: (p) => , }; // ── Language picker ───────────────────────────────────────────────────── // Most visitors never open this: detectVisitorLang() in app.jsx already // matched them against navigator.languages on first paint. It exists for // the ones it guessed wrong, so the job is to be findable, not prominent. // The list is written in each language's own name because that is what // someone looking for their language actually scans for; the two-letter // code rides along as a badge for people who scan for that instead. function LangPicker({ lang, setLang }) { const langs = window.SITE.LANGS; const [open, setOpen] = useState(false); const wrapRef = useRef(null); const current = langs.find(l => l.code === lang) || langs[0]; useEffect(() => { if (!open) return; const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('pointerdown', onDown); window.addEventListener('keydown', onKey); return () => { document.removeEventListener('pointerdown', onDown); window.removeEventListener('keydown', onKey); }; }, [open]); return (
{open && (
    {langs.map(l => (
    • ))}
)}
); } // ── Stars ─────────────────────────────────────────────────────────────── function Stars({ value = 5, size = 14 }) { return ( {Array.from({ length: 5 }).map((_, i) => )} ); } // ── Translation helper ────────────────────────────────────────────────── const t = (obj, lang) => { if (obj == null) return ''; if (typeof obj === 'string') return obj; return obj[lang] ?? obj.en ?? ''; }; // ── Portfolio embed mode helpers ──────────────────────────────────────── // When window.SITE.PORTFOLIO.enabled is true, the site is being shown // inside the studio's portfolio. Real CTAs (booking, WhatsApp, phone, // email) should not fire — interceptCta() wraps any handler with an // alert + early return. function usePortfolio() { const p = (window.SITE && window.SITE.PORTFOLIO) || { enabled: false }; return p; } // Wrap an onClick (or any event handler) so that, in portfolio mode, it // prevents the default action and shows an alert pointing to the live // site. Pass the handler you would normally use; in normal mode it is // returned unchanged. function interceptCta(originalHandler, lang = 'en') { const p = (window.SITE && window.SITE.PORTFOLIO) || { enabled: false }; if (!p.enabled) return originalHandler; return (e) => { if (e && e.preventDefault) e.preventDefault(); if (e && e.stopPropagation) e.stopPropagation(); const msg = t(p.ctaBlocked, lang); const live = p.liveUrl && p.liveUrl !== '{{LIVE_URL}}' ? `\n\n${p.liveUrl}` : ''; // eslint-disable-next-line no-alert window.alert(`${msg}${live}`); }; } // ── Portfolio mode banner ─────────────────────────────────────────────── // Fixed bar at the top of the page that announces this is a demo and // links out to the real site. Rendered only when PORTFOLIO.enabled. function PortfolioBanner({ lang }) { const p = usePortfolio(); if (!p.enabled) return null; const hasLive = p.liveUrl && p.liveUrl !== '{{LIVE_URL}}'; const hasStudio = p.studioUrl && p.studioUrl !== '{{STUDIO_URL}}'; return (
DEMO {t(p.banner, lang)}{' '} {hasLive ? ( {p.liveUrl.replace(/^https?:\/\//, '')} ) : (liveUrl not set)} {hasStudio && ( {p.studioName || 'Studio'} → )}
); } // ── Sticky nav ────────────────────────────────────────────────────────── function Nav({ lang, setLang, theme, setTheme, onBook, onNav, view, business }) { const [scrolled, setScrolled] = useState(false); const [activeSec, setActiveSec] = useState('hero'); useEffect(() => { const onScroll = () => { setScrolled(window.scrollY > 16); const sections = ['hero', 'services', 'gallery', 'about', 'reviews', 'book', 'visit']; let current = 'hero'; for (const id of sections) { const el = document.getElementById(id); if (el && el.getBoundingClientRect().top < window.innerHeight * 0.4) current = id; } setActiveSec(current); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [view]); const C = window.SITE.COPY.nav; const items = [ ['services', t(C.services, lang)], ['gallery', t(C.gallery, lang)], ['about', t(C.team, lang)], ['reviews', t(C.reviews, lang)], // "Contact" points at the booking section (id="book"), which carries // the phone / WhatsApp / address details. ['book', t(C.contact, lang)], ['visit', t(C.visit, lang)], ]; // Logo sits centered, between the two halves of the menu links. const mid = Math.ceil(items.length / 2); const renderLinks = (group) => group.map(([id, label]) => (
  • { e.preventDefault(); onNav('home', id); }}>{label}
    • )); return ( ); } // ── Hero ──────────────────────────────────────────────────────────────── function Hero({ lang, category, onBook, onScrollTo, palette }) { const C = window.SITE.COPY.hero; const cat = window.SITE.CATEGORIES[category]; const B = window.SITE.BUSINESS; return (
    {t(C.eyebrow, lang)}

    {(() => { // Split on the FIRST comma only; everything after becomes the italic line. // Re-joining on ',' (as we did before) re-inserts any later commas the // regex stripped out — producing "Galway,." in the rendered title. const full = t(cat.tagline, lang).replace(/\.$/, ''); const ci = full.indexOf(','); const head = ci >= 0 ? full.slice(0, ci) : full; const tail = ci >= 0 ? full.slice(ci + 1).trim() : ''; return (<> {head}{tail && ','} {tail && {tail}.} ); })()}

    {t(cat.about, lang)}

    {B.totalScore} · {B.reviewsCount} {t(C.rating, lang)}
    {t(C.walkin, lang)}
    {B.heroVideo ? (
    ) : ( )}
    {B.established ? new Date().getFullYear() - B.established : `${B.totalScore}★`}
    {B.established ? (lang === 'en' ? `years in ${B.area}` : `anos em ${B.area}`) : (lang === 'en' ? `${B.reviewsCount} Google reviews` : `${B.reviewsCount} avaliações Google`)}
    ); } // ── About me — portrait + Andreia's own words + the headline numbers ──── function About({ lang, onProfile }) { const C = window.SITE.COPY.about; const me = window.SITE.TEAM[0]; const B = window.SITE.BUSINESS; const stats = [ [C.meStat1Big, C.meStat1Lbl], [C.meStat2Big, C.meStat2Lbl], [C.meStat3Big, C.meStat3Lbl], ].filter(([big]) => big); return (
    {me.name} {t(me.role, lang)}
    {t(C.eyebrow, lang)}

    {t(C.title, lang)}

    {[C.line1, C.line2, C.line3].filter(Boolean).map((line, i) => (

    {t(line, lang)}

    ))} {C.line4 && (

    {t(C.line4, lang)}

    )} {me.credentials && me.credentials.length > 0 && (
    {t(C.credentialsLbl, lang)}
      {me.credentials.map((c, i) => (
    • {t(c, lang)}
      • ))}
    )}
    {onProfile && ( )} {B.instagram && ( {t(C.follow, lang)} )}
    {stats.map(([big, lbl], i) => (
    {t(big, lang)}
    {t(lbl, lang)}
    ))}
    ); } // ── Walk-in banner (module — togglable) ───────────────────────────────── function WalkInBanner({ lang }) { return (
    {t(window.SITE.COPY.walkInBanner.line, lang)}
    ); } // ── Services ──────────────────────────────────────────────────────────── function Services({ lang, category, onBook, onViewAll, anchored = true }) { const C = window.SITE.COPY.services; const cat = window.SITE.CATEGORIES[category]; const [active, setActive] = useState(cat.services[0].id); // Reset active when category changes useEffect(() => { setActive(cat.services[0].id); }, [category]); const activeCat = cat.services.find(s => s.id === active) || cat.services[0]; return (
    {cat.services.map(s => ( ))}
    {activeCat.blurb && (

    {t(activeCat.blurb, lang)}

    )}
      {activeCat.items.map((it, i) => (
    • {t(it.name, lang)}
      {it.duration} {t(C.min, lang)}
      {t(it.price, lang)}
      {(it.desc || it.note) && (
      {it.desc && {t(it.desc, lang)}} {it.note && {t(it.note, lang)}}
      )}
      • ))}
    {onViewAll && ( )}
    ); } // ── Section heading reused everywhere ─────────────────────────────────── // Centered by default so every section header lines up consistently. function SectionHead({ eyebrow, title, sub, align = 'center' }) { return (
    {eyebrow}

    {title}

    {sub &&

    {sub}

    }
    ); } // ── Gallery + Lightbox ────────────────────────────────────────────────── function Gallery({ lang }) { const C = window.SITE.COPY.gallery; const items = window.SITE.GALLERY_ITEMS; const [lightbox, setLightbox] = useState(null); // index useEffect(() => { if (lightbox == null) return; const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); if (e.key === 'ArrowLeft') setLightbox((i) => (i + items.length - 1) % items.length); if (e.key === 'ArrowRight') setLightbox((i) => (i + 1) % items.length); }; window.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [lightbox, items.length]); return ( ); } // ── Team grid with hover/expand cards ─────────────────────────────────── function Team({ lang, category, onBook, onProfile, bookingProvider }) { const C = window.SITE.COPY.team; return (
    {window.SITE.TEAM.map((m, i) => ( onBook({ stylist: m })} onProfile={() => onProfile(m.id)}/> ))}
    ); } function TeamCard({ member, lang, category, onBook, onProfile }) { const C = window.SITE.COPY.team; // The whole card is a link to the stylist profile. Hover just lifts the // card and highlights it — no dark overlay, no hidden state. Specialties // and full bio live on the profile page. return (
    { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onProfile(); } }}>
    {member.name}
    {t(member.role, lang)}
    {member.years ? {member.years} {t(C.years, lang)} : } {member.instagram}
    ); } // ── Reviews carousel ──────────────────────────────────────────────────── function Reviews({ lang }) { const C = window.SITE.COPY.reviews; const reviews = window.SITE.REVIEWS; const [idx, setIdx] = useState(0); const trackRef = useRef(null); const [dragX, setDragX] = useState(0); const dragStartRef = useRef(null); const go = (delta) => setIdx((i) => (i + delta + reviews.length) % reviews.length); // Auto-advance useEffect(() => { const id = setInterval(() => setIdx((i) => (i + 1) % reviews.length), 7000); return () => clearInterval(id); }, [reviews.length]); // Pointer-drag swipe const onPointerDown = (e) => { dragStartRef.current = e.clientX; }; const onPointerMove = (e) => { if (dragStartRef.current == null) return; setDragX(e.clientX - dragStartRef.current); }; const onPointerUp = () => { if (dragStartRef.current == null) return; if (dragX > 60) go(-1); if (dragX < -60) go(1); dragStartRef.current = null; setDragX(0); }; return (
    {(() => { const A = window.SITE.COPY.about; return [[A.stat1Big, A.stat1Lbl], [A.stat2Big, A.stat2Lbl], [A.stat3Big, A.stat3Lbl]]; })().map(([b, l], i) => (
    {t(b, lang)}
    {t(l, lang)}
    ))}
    {reviews.map((r, i) => (
    “ {t(r.text, lang)}
    {r.author}
    {t(r.service, lang)} · {r.days}{t(C.daysAgo, lang)}
    Google
    ))}
    {reviews.map((_, i) => (
    e.preventDefault()}> {t(C.seeAllTpl, lang).replace('{n}', window.SITE.BUSINESS.reviewsCount)}
    ); } // ── Brand logo ────────────────────────────────────────────────────────── // Renders the AB Aesthetics brand mark from assets/logo.webp. The logo is // multi-colour (navy AB monogram + wordmark on a soft blue badge) so it is // rendered as a regular , not as a palette-tinted CSS mask. Kept under // the legacy name HairCoLogo so existing call sites work without churn. function HairCoLogo({ size = 'nav' }) { const name = (window.SITE && window.SITE.BUSINESS && window.SITE.BUSINESS.name) || 'Salon'; return ( {name} ); } window.Components = { Placeholder, SiteImage, StylistAvatar, HairCoLogo, Icon, Stars, LangPicker, Nav, Hero, About, WalkInBanner, Services, SectionHead, Gallery, Team, TeamCard, Reviews, t, PortfolioBanner, usePortfolio, interceptCta, };