// Shared visual primitives for Satindica
const fmtCLP = (n) => '$' + n.toLocaleString('es-CL');
// Striped placeholder used in product cards / hero — original SVG, no real product imagery
function ProductGlyph({ variant = 1, label = 'producto' }) {
// 8 variants: subtle hue shifts within emerald/graphite range
const palettes = [
['#0d2a1a', '#1a5c38', '#2ECC71'],
['#102a30', '#16494f', '#2ECC71'],
['#1a1a1a', '#2a2a2a', '#C9A84C'],
['#0e1f14', '#1a5c38', '#7be0a6'],
['#1c1c1c', '#2a2a2a', '#2ECC71'],
['#0d2a1a', '#16494f', '#C9A84C'],
['#111111', '#1a5c38', '#2ECC71'],
['#1c1c1c', '#3a3a3a', '#C9A84C'],
];
const [bg, mid, accent] = palettes[(variant - 1) % palettes.length];
// Geometry: a centered diamond + ring + striped backdrop
const stripes = [];
for (let i = 0; i < 14; i++) {
stripes.push(
);
}
return (
);
}
function Badge({ tone = 'emerald', children }) {
const tones = {
emerald: { bg: 'rgba(46,204,113,0.12)', bd: 'rgba(46,204,113,0.55)', fg: '#2ECC71' },
gold: { bg: 'rgba(201,168,76,0.12)', bd: 'rgba(201,168,76,0.55)', fg: '#C9A84C' },
red: { bg: 'rgba(220,80,80,0.12)', bd: 'rgba(220,80,80,0.55)', fg: '#E27272' },
neutral: { bg: 'rgba(255,255,255,0.06)', bd: 'rgba(255,255,255,0.18)', fg: '#cfcfcf' },
};
const t = tones[tone] || tones.emerald;
return (
{children}
);
}
function Logo({ size = 22 }) {
return (
);
}
// Tiny custom icons (pure geometry — no detailed illustrations)
const Icon = {
search: (s = 16) => (
),
user: (s = 16) => (
),
cart: (s = 16) => (
),
arrow: (s = 16) => (
),
star: (s = 14) => (
),
// Category glyphs — geometric, all share visual language
cat: {
semillas: (
),
iluminacion: (
),
fertilizantes: (
),
sustratos: (
),
carpas: (
),
riego: (
),
parafernalia: (
),
kits: (
),
},
social: {
ig: (
),
tt: (
),
yt: (
),
},
};
Object.assign(window, { ProductGlyph, Badge, Logo, Icon, fmtCLP });