// Shared components for the Zeejay Lab UI kit
// All export to window for cross-script use (Babel scopes are isolated).
const { useState, useRef, useEffect } = React;
const useIsMobile = () => {
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth <= 768);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return isMobile;
};
window.useIsMobile = useIsMobile;
// ── Icons (inline Lucide-style SVGs, 2px stroke) ─────────────────────────
const Icon = ({ d, stroke = "currentColor", size = 16, children, ...rest }) => (
);
const ArrowRight = (p) => ;
const ArrowLeft = (p) => ;
const ChevL = (p) => ;
const Brain = (p) => ;
const Chart = (p) => ;
const Sparkles = (p) => ;
const Clock = (p) => ;
const Check = (p) => ;
const Zap = (p) => ;
const Book = (p) => ;
const Github = (p) => ;
// ── Tomato logo mark ─────────────────────────────────────────────────────
const TomatoMark = ({ size = 28 }) => (
);
// ── Primitives ───────────────────────────────────────────────────────────
const Kicker = ({ children }) => (
{children}
);
const Hairline = ({ maxWidth }) => (
);
const Button = ({ children, variant = "primary", size = "md", href, onClick, icon, style }) => {
const btnStyles = {
primary: { background: "var(--brand-primary)", color: "#fff", border: "none" },
outline: { background: "#fff", color: "var(--fg-1)", border: "1px solid var(--border)" },
ghost: { background: "transparent", color: "var(--fg-3)", border: "none" },
}[variant];
const pad = size === "lg" ? "14px 26px" : "10px 20px";
const fs = size === "lg" ? 16 : 14;
const Tag = href ? "a" : "button";
return (
{ if (variant==="primary") e.currentTarget.style.background = "#12325c"; }}
onMouseLeave={(e) => { if (variant==="primary") e.currentTarget.style.background = "var(--brand-primary)"; }}
>
{children}
{icon}
);
};
const FolioCard = ({ children, style, onClick, hover = true, ...rest }) => {
const [h, setH] = useState(false);
return (
setH(true)} onMouseLeave={() => setH(false)}
style={{
background: "#fff",
border: "1px solid var(--border)",
borderRadius: 24,
padding: 24,
boxShadow: hover && h ? "0 8px 32px rgba(22,59,107,0.12)" : "0 1px 0 rgba(15,23,42,0.02)",
transform: hover && h ? "scale(1.015)" : "scale(1)",
transition: "all 300ms cubic-bezier(0.4,0,0.2,1)",
display: "flex", flexDirection: "column", gap: 16,
cursor: onClick ? "pointer" : "default",
...style
}} {...rest}>
{children}
);
};
const ImagePanel = ({ src, alt, ratio = "4/3", contentFit = "contain", pad = 20, style }) => (
{src &&
}
setH(true)} onMouseLeave={() => setH(false)}
style={{
border: "1px solid var(--border)",
background: h ? "var(--brand-primary)" : "#fff",
borderRadius: 16, padding: "12px 16px", fontSize: 14,
color: h ? "#fff" : "var(--fg-2)",
boxShadow: "0 2px 4px rgba(15,23,42,0.03)",
transition: "all 200ms ease", cursor: "default",
...style
}}>{children}
);
};
const Chip = ({ icon, children, style }) => {
const [h, setH] = useState(false);
return (
setH(true)} onMouseLeave={() => setH(false)}
style={{
display: "inline-flex", alignItems: "center", gap: 8,
border: "1px solid var(--border)",
background: h ? "var(--brand-primary)" : "#fff",
padding: "8px 16px", borderRadius: 9999, fontSize: 13,
color: h ? "#fff" : "var(--fg-3)",
transition: "all 200ms ease", cursor: "default",
...style
}}>
{icon && {icon}}
{children}
);
};
const SectionHead = ({ kicker, title, description }) => (
{kicker}
{title}
{description &&
{description}
}
);
// Flip card — signature interaction
const FlipCard = ({ front, back, size = 380 }) => {
const [open, setOpen] = useState(false);
return (
setOpen(true)}
onMouseLeave={() => setOpen(false)}
onClick={() => setOpen(o => !o)}
>