/* CUPA Inspira — componentes de UI reutilizables */
const C = { red: "#7a1410", green: "#0d3e23", cream: "#fbf3dc", brown: "#5b4a36" };
/* ---------- iconos ---------- */
function IconArrow({ size = 16, color = "currentColor" }) {
return (
);
}
function IconInstagram({ size = 18, color = "currentColor" }) {
return (
);
}
function IconLeaf({ size = 22, color }) {
return (
);
}
function IconDrop({ size = 22, color }) {
return (
);
}
function IconNews({ size = 22, color }) {
return (
);
}
function IconWhats({ size = 18, color = "currentColor" }) {
return (
);
}
function IconLock({ size = 18, color = "currentColor" }) {
return (
);
}
function IconThumb({ size = 18, color = "currentColor", down }) {
return (
);
}
function IconCheck({ size = 18, color = "currentColor" }) {
return (
);
}
function IconPin({ size = 18, color = "currentColor" }) {
return (
);
}
function IconBuilding({ size = 18, color = "currentColor" }) {
return (
);
}
/* ---------- badge de estado ---------- */
function StatusBadge({ status }) {
const active = status === "activo";
const color = active ? C.green : "#b5701a";
const label = active ? "Activo" : "Necesita apoyo";
return (
{active ? "●" : "◐"}{label}
);
}
/* ---------- botón ---------- */
function Btn({ children, variant = "primary", href, onClick, icon = true, size = "md" }) {
const [hover, setHover] = React.useState(false);
const pads = size === "lg" ? "16px 28px" : size === "sm" ? "9px 16px" : "13px 22px";
const fz = size === "lg" ? 17 : size === "sm" ? 14 : 15.5;
const base = {
display: "inline-flex", alignItems: "center", gap: 9, padding: pads,
fontFamily: "var(--sans)", fontWeight: 600, fontSize: fz, letterSpacing: "0.01em",
borderRadius: 999, cursor: "pointer", border: "1.5px solid transparent",
transition: "all .22s cubic-bezier(.2,.7,.3,1)", whiteSpace: "nowrap",
transform: hover ? "translateY(-1px)" : "none",
};
const styles = {
primary: { ...base, background: hover ? "#5e0f0c" : C.red, color: C.cream, boxShadow: hover ? "0 10px 22px rgba(122,20,16,.28)" : "0 2px 0 rgba(94,15,12,.5)" },
green: { ...base, background: hover ? "#082a17" : C.green, color: C.cream, boxShadow: hover ? "0 10px 22px rgba(13,62,35,.26)" : "0 2px 0 rgba(8,42,23,.5)" },
outline: { ...base, background: hover ? "rgba(91,74,54,.06)" : "transparent", color: C.brown, borderColor: "rgba(91,74,54,.4)" },
ghostCream: { ...base, background: hover ? "rgba(251,243,220,.14)" : "transparent", color: C.cream, borderColor: "rgba(251,243,220,.45)" },
creamSolid: { ...base, background: hover ? "#fffaf0" : C.cream, color: C.red, boxShadow: hover ? "0 10px 22px rgba(0,0,0,.18)" : "none" },
};
const El = href ? "a" : "button";
return (
setHover(true)} onMouseLeave={() => setHover(false)}
{...(href && href.startsWith("http") ? { target: "_blank", rel: "noreferrer" } : {})}>
{children}
{icon && }
);
}
/* ---------- eyebrow / etiqueta ---------- */
function Eyebrow({ children, color = C.red, align = "left" }) {
return (
{children}
);
}
function Tag({ children, color = C.green }) {
return (
{children}
);
}
/* ---------- encabezado de sección de página ---------- */
function PageHead({ eyebrow, title, intro, color = C.red }) {
return (
{eyebrow}
{title}
{intro &&
{intro}
}
);
}
Object.assign(window, { C, IconArrow, IconInstagram, IconLeaf, IconDrop, IconNews, IconWhats, IconLock, IconThumb, IconCheck, IconPin, IconBuilding, StatusBadge, PageHead, Btn, Eyebrow, Tag });