/* Shared primitives */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Subtle striped photo placeholder with mono label
function Placeholder({ label = "PHOTO", aspect = "4/3", tone = "sand", src = null, objectPosition = 'center', zoom = 1, eager = false, style = {}, className = "" }) {
const bg = tone === 'dark'
? 'linear-gradient(135deg, oklch(0.30 0.02 60) 0%, oklch(0.24 0.02 60) 100%)'
: tone === 'terra'
? 'linear-gradient(135deg, oklch(0.70 0.09 45) 0%, oklch(0.58 0.13 40) 100%)'
: 'linear-gradient(135deg, var(--sand) 0%, var(--cream-3) 100%)';
const fg = tone === 'dark' || tone === 'terra' ? 'var(--cream)' : 'var(--ink-soft)';
return (
{src ? (
) : (
<>
{label}
)}
{num}
{eyebrow}
)}
{!num && eyebrow && {eyebrow}}
{title}
{sub && (
{sub}
)}
);
}
// Intersection-observer reveal hook
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
// Arm the fade only if the element is currently off-screen; otherwise show immediately.
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
if (r.top > vh * 0.9) {
el.setAttribute('data-reveal-armed', '1');
} else {
el.classList.add('in');
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.08, rootMargin: '0px 0px 10% 0px' });
io.observe(el);
// Safety net: if the observer hasn't fired within 3s of the element being near viewport, reveal anyway.
const t = setTimeout(() => { el.classList.add('in'); io.disconnect(); }, 4000);
return () => { io.disconnect(); clearTimeout(t); };
}, []);
return ref;
}
// Format phone: +12099882892 -> (209) 988-2892
const PHONE = '(209) 988-2892';
const PHONE_TEL = '+12099882892';
const BOOK_URL = 'https://book.squareup.com/appointments/swme78f94upqkd/location/LHVCHPW4RR8RJ/services';
// Tiny icon set
const Icon = {
arrow: (props) => ,
arrowUp: (props) => ,
plus: (props) => ,
phone: (props) => ,
sun: (props) => ,
location: (props) => ,
clock: (props) => ,
check: (props) => ,
instagram: (props) => ,
mail: (props) => ,
car: (props) => ,
spark: (props) => ,
calendar: (props) => ,
droplet: (props) => ,
key: (props) => ,
};
// expose
Object.assign(window, {
Placeholder, Eyebrow, SectionHeader, useReveal,
PHONE, PHONE_TEL, BOOK_URL, Icon,
});