);
}
/* crossfading rotation of full-bleed hero photographs.
Each photo sits stacked + absolutely positioned; only the active one is opaque.
Reduced-motion: holds on the first frame (no rotation). */
const HERO_PHOTOS = [
{ id:'heroPasadena', src:'assets/hero-pasadena.jpg', pos:'center 62%' },
{ id:'heroInterior', src:'assets/hero-interior.jpg', pos:'center 50%' },
{ id:'heroLazooSk', src:'assets/hero-lazoo-sketch.jpg', pos:'center 50%' },
{ id:'heroLazoo', src:'assets/hero-lazoo.jpg', pos:'center 64%' },
];
function HeroPhotos({ interval = 6000 }) {
const [i, setI] = React.useState(0);
React.useEffect(() => {
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce || HERO_PHOTOS.length < 2) return;
const t = setInterval(() => setI(p => (p + 1) % HERO_PHOTOS.length), interval);
return () => clearInterval(t);
}, [interval]);
return (
{HERO_PHOTOS.map((p, idx) => (
))}
);
}
/* full-bleed background media for a dark hero */
function HeroBg({ media, scrim = 'rgba(16,13,56,0.62)', sketch = 'sketch-commercial' }) {
if (media === 'minimal') {
return (
);
}
if (media === 'sketch') {
return (
);
}
// real hero photographs, full bleed, crossfading
return (
);
}
function Hero({ onNav, dir = 'quiet', media = 'photo' }) {
const eyebrow = 'Design · Build · Consult';
const sub = 'A single design–build team carrying every project from first sketch to final walkthrough. Custom residential and commercial work across Southern California for nearly three decades.';
/* ---------- QUIET: full-bleed, minimal text bottom-left ---------- */
return (
{media === 'minimal' && }