// primitives.jsx — small icon set + reusable bits
// All icons are simple geometric strokes — no brand marks, no copyrighted glyphs.
const Icon = ({ name, size = 20, stroke = 1.6, ...rest }) => {
const props = {
width: size, height: size, viewBox: "0 0 24 24",
fill: "none", stroke: "currentColor", strokeWidth: stroke,
strokeLinecap: "round", strokeLinejoin: "round",
...rest,
};
switch (name) {
case "compass": // brand mark — white lightning in blue disc with black outline
return (
);
case "arrow-right":
return ;
case "arrow-down":
return ;
case "menu":
return ;
case "x":
return ;
case "plus":
return ;
case "check":
return ;
case "search":
return ;
case "ship":
return ;
case "doc":
return ;
case "wrench":
return ;
case "shield":
return ;
case "key":
return ;
case "phone":
return ;
case "mail":
return ;
case "wa":
return ;
case "linkedin":
return ;
case "ig":
return ;
case "yt":
return ;
default:
return null;
}
};
// CarPlaceholder — clean, intentional placeholder. No drawn vehicles.
// Variants give visual variety in the references grid.
const CarPlaceholder = ({ label = "Tesla · placeholder", code = "—", tone = 0, aspect = "wide" }) => {
const tones = [
{ bg: "linear-gradient(180deg,#F4F6FA,#E5ECF6)", stripe: "rgba(11,18,32,.06)", glow: "rgba(74,144,226,.16)" },
{ bg: "linear-gradient(180deg,#EEF2F8,#DDE5F1)", stripe: "rgba(11,18,32,.05)", glow: "rgba(27,58,95,.18)" },
{ bg: "linear-gradient(180deg,#F8F9FB,#EAEEF5)", stripe: "rgba(11,18,32,.05)", glow: "rgba(10,102,194,.14)" },
{ bg: "linear-gradient(180deg,#F0F0F2,#DEE0E5)", stripe: "rgba(11,18,32,.06)", glow: "rgba(11,18,32,.10)" },
{ bg: "linear-gradient(180deg,#F1F4FA,#E0E7F2)", stripe: "rgba(11,18,32,.05)", glow: "rgba(74,144,226,.20)" },
];
const t = tones[tone % tones.length];
const ar = aspect === "wide" ? "16/9" : aspect === "square" ? "1/1" : aspect === "tall" ? "4/3" : "5/4";
return (
);
};
// Reveal — IO-driven fade/slide-up wrapper
const Reveal = ({ children, delay = 0, as = "div", className = "", style }) => {
const ref = React.useRef(null);
const [seen, setSeen] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver((es) => {
es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
io.observe(ref.current);
return () => io.disconnect();
}, []);
const Tag = as;
return (
{children}
);
};
// smooth-scroll helper
const scrollToId = (id) => {
const el = document.getElementById(id);
if (!el) return;
const top = el.getBoundingClientRect().top + window.scrollY - 60;
window.scrollTo({ top, behavior: "smooth" });
};
// CountUp — animates from 0 → target once visible
const CountUp = ({ to = 0, duration = 1400, suffix = "" }) => {
const ref = React.useRef(null);
const [val, setVal] = React.useState(0);
const [run, setRun] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver((es) => {
es.forEach(e => { if (e.isIntersecting) { setRun(true); io.disconnect(); } });
}, { threshold: 0.4 });
io.observe(ref.current);
return () => io.disconnect();
}, []);
React.useEffect(() => {
if (!run) return;
let raf, t0;
const step = (t) => {
if (!t0) t0 = t;
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
setVal(Math.round(eased * to));
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [run, to, duration]);
return {val}{suffix};
};
Object.assign(window, { Icon, CarPlaceholder, Reveal, scrollToId, CountUp });