/* global React */
const { useState } = React;
const INK = "#1A1A1A";
const GREEN = "#1A6B3C";
const GREEN_DEEP = "#0F4D29";
const BRIGHT = "#2E9E5B";
const BRIGHT_HI = "#3DB86D";
const YELLOW = "#F2C12E";
const YELLOW_HI = "#FFD34A";
const OFF = "#F5F5F0";
const PAPER = "#FFFFFF";
// ---------- Button ----------
function Button({ children, variant = "primary", size = "md", onClick, style, href, as }) {
const base = {
fontFamily: "'DM Sans', sans-serif",
fontWeight: 800,
boxSizing: "border-box",
border: `2.5px solid ${INK}`,
borderRadius: 12,
cursor: "pointer",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
gap: 10,
boxShadow: `6px 6px 0 0 ${INK}`,
transition: "transform 150ms cubic-bezier(.2,.7,.2,1), box-shadow 150ms cubic-bezier(.2,.7,.2,1), background 150ms",
textDecoration: "none",
letterSpacing: "-0.01em",
lineHeight: 1,
};
const sizes = {
sm: { padding: "10px 16px", fontSize: 14 },
md: { padding: "14px 22px", fontSize: 16 },
lg: { padding: "18px 30px", fontSize: 18 },
xl: { padding: "22px 36px", fontSize: 22 },
};
const variants = {
primary: { background: BRIGHT, color: "#fff" },
primaryHover: { background: BRIGHT_HI },
secondary: { background: YELLOW, color: INK },
secondaryHover: { background: YELLOW_HI },
ghostDark: { background: "transparent", color: "#fff", borderColor: "#fff", boxShadow: "none" },
outline: { background: "transparent", color: INK, boxShadow: `4px 4px 0 0 ${INK}` },
};
const [hover, setHover] = useState(false);
const [press, setPress] = useState(false);
const variantStyle = variants[variant] || variants.primary;
const hoverBg = variant === "primary" ? BRIGHT_HI : variant === "secondary" ? YELLOW_HI : variantStyle.background;
const hoverStyle = hover && !press ? { transform: "translate(-1px,-1px)", boxShadow: variant === "ghostDark" ? "none" : `7px 7px 0 0 ${INK}`, background: hoverBg } : {};
const pressStyle = press ? { transform: "translate(3px,3px)", boxShadow: variant === "ghostDark" ? "none" : `2px 2px 0 0 ${INK}`, background: variant === "primary" ? "#248048" : variant === "secondary" ? "#D9A719" : variantStyle.background } : {};
const Tag = as || (href ? "a" : "button");
const extra = href ? { href } : {};
return (
setHover(true)}
onMouseLeave={() => { setHover(false); setPress(false); }}
onMouseDown={() => setPress(true)}
onMouseUp={() => setPress(false)}
onClick={onClick}
style={{ ...base, ...sizes[size], ...variantStyle, ...hoverStyle, ...pressStyle, ...style }}
>
{children}
);
}
// ---------- Pill ----------
function Pill({ children, tone = "off", style }) {
const tones = {
off: { background: OFF, color: INK, border: `2.5px solid ${INK}` },
paper: { background: PAPER, color: INK, border: `2.5px solid ${INK}` },
yellow: { background: YELLOW, color: INK, border: `2.5px solid ${INK}` },
green: { background: BRIGHT, color: "#fff", border: `2.5px solid ${INK}` },
dark: { background: GREEN, color: OFF, border: `2.5px solid ${INK}` },
};
return (
{children}
);
}
// ---------- Eyebrow ----------
function Eyebrow({ children, color = BRIGHT, style }) {
return (
{children}
);
}
// ---------- Yellow marker highlight ----------
function HL({ children, tone = "yellow" }) {
if (tone === "green") {
return {children};
}
return {children};
}
// ---------- Icon: simple inline stroke SVG so it picks up currentColor ----------
function Icon({ name, size = 24, stroke = 1.75, style }) {
const paths = {
check: ,
clock: <>,
video: <>,
pdf: <>,
chart: <>,
trophy: <>,
eye: <>,
volumeOff: <>,
puzzle: ,
key: <>,
map: <>,
brain: ,
arrowRight: <>,
arrowDown: <>,
lightning: ,
lock: <>,
shield: ,
sparkles: <>,
target: <>,
};
return (
);
}
// ---------- IconCapsule (40x40 yellow box around an icon) ----------
function IconCapsule({ name, tone = "yellow", size = 48 }) {
const tones = {
yellow: { bg: YELLOW, fg: INK },
green: { bg: BRIGHT, fg: "#fff" },
ink: { bg: INK, fg: YELLOW },
paper: { bg: PAPER, fg: INK },
};
const t = tones[tone];
return (
);
}
Object.assign(window, {
Button, Pill, Eyebrow, HL, Icon, IconCapsule,
INK, GREEN, GREEN_DEEP, BRIGHT, BRIGHT_HI, YELLOW, YELLOW_HI, OFF, PAPER,
});