// === Wrap Station — Reusable bits ===
// Inline SVG icons (no emoji, no external lib)
const Icon = {
Arrow: ({ size = 16 }) => (
),
ArrowUp: ({ size = 16 }) => (
),
Plus: ({ size = 14 }) => (
),
Star: ({ size = 14 }) => (
),
Phone: () => (
),
Map: () => (
),
Mail: () => (
),
Clock: () => (
),
Check: ({ size = 18 }) => (
),
Instagram: () => (
),
YouTube: () => (
),
TikTok: () => (
),
Facebook: () => (
),
};
// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, className = "" }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let fired = false;
const show = () => {
if (fired) return;
fired = true;
setTimeout(() => el.classList.add("visible"), delay);
};
// Fallback: ensure visibility within ~600ms even if observer never fires
const fallback = setTimeout(show, 600);
const io = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
clearTimeout(fallback);
show();
io.disconnect();
}
},
{ threshold: 0, rootMargin: "0px 0px -10% 0px" }
);
io.observe(el);
// If element is already in viewport on mount, fire immediately
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
clearTimeout(fallback);
show();
io.disconnect();
}
return () => { clearTimeout(fallback); io.disconnect(); };
}, [delay]);
return (
{children}
);
}
// Placeholder image (used until user uploads imagery)
function Placeholder({ label, ratio }) {
return (
{label}
);
}
// Hero car SVG illustration — sleek silhouette so the hero looks complete pre-photo
function HeroCarSilhouette() {
return (
);
}
Object.assign(window, { Icon, Reveal, Placeholder, HeroCarSilhouette });