/* global React */
const { createElement: h } = React;

/* Wrapper SVG genérico */
function Svg({ size = 24, vb = "0 0 24 24", className = "", style, sw = 1.6, fill = "none", children }) {
  return h("svg", {
    className, style, width: size, height: size, viewBox: vb,
    fill, stroke: "currentColor", strokeWidth: sw,
    strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true
  }, children);
}

/* ============ MOTIVOS DECORATIVOS (placeholders) ============ */

const CalaveraMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M50 10c-19 0-32 13-32 31 0 9 4 16 9 20v9c0 4 3 6 7 6h32c4 0 7-2 7-6v-9c5-4 9-11 9-20 0-18-13-31-32-31Z" }),
  h("circle", { cx: 35, cy: 44, r: 9, fill: "currentColor", stroke: "none" }),
  h("circle", { cx: 65, cy: 44, r: 9, fill: "currentColor", stroke: "none" }),
  h("path", { d: "M50 56c-4 0-6 4-6 8s2 7 6 7 6-3 6-7-2-8-6-8Z", fill: "currentColor", stroke: "none" }),
  h("path", { d: "M40 84v8M50 84v9M60 84v8" }),
  h("path", { d: "M50 28v-9M44 22l-4-6M56 22l4-6" }),
  h("path", { d: "M22 50c4-2 8-2 12 0M66 50c4-2 8-2 12 0" })
);

const FlorMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2, ...p },
  h("circle", { cx: 50, cy: 50, r: 12 }),
  ...[...Array(12)].map((_, i) => {
    const a = (i * 30) * Math.PI / 180;
    const x1 = 50 + Math.cos(a) * 16, y1 = 50 + Math.sin(a) * 16;
    const x2 = 50 + Math.cos(a) * 34, y2 = 50 + Math.sin(a) * 34;
    return h("ellipse", { key: i, cx: (x1 + x2) / 2, cy: (y1 + y2) / 2, rx: 6, ry: 11,
      transform: `rotate(${i * 30} ${(x1 + x2) / 2} ${(y1 + y2) / 2})` });
  }),
  ...[...Array(12)].map((_, i) => {
    const a = (i * 30 + 15) * Math.PI / 180;
    const x = 50 + Math.cos(a) * 40, y = 50 + Math.sin(a) * 40;
    return h("ellipse", { key: "o" + i, cx: x, cy: y, rx: 4, ry: 8,
      transform: `rotate(${i * 30 + 15} ${x} ${y})`, opacity: .7 });
  })
);

const XoloMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M30 24c-3 6-4 14-3 22-5 6-7 14-7 22 0 8 6 14 14 14h32c8 0 14-6 14-14 0-8-2-16-7-22 1-8 0-16-3-22-3 6-7 9-12 10h-16c-5-1-9-4-12-10Z" }),
  h("path", { d: "M30 24l-4-10 12 8M70 24l4-10-12 8" }),
  h("circle", { cx: 40, cy: 52, r: 3.5, fill: "currentColor", stroke: "none" }),
  h("circle", { cx: 60, cy: 52, r: 3.5, fill: "currentColor", stroke: "none" }),
  h("path", { d: "M50 60v8M44 70h12" })
);

const JaguarMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M22 28l8 12M78 28l-8 12" }),
  h("path", { d: "M50 22c-18 0-30 14-30 32 0 14 13 24 30 24s30-10 30-24c0-18-12-32-30-32Z" }),
  h("path", { d: "M36 50l-10-4M64 50l10-4M36 54l-10 2M64 54l10 2" }),
  h("circle", { cx: 40, cy: 46, r: 3.5, fill: "currentColor", stroke: "none" }),
  h("circle", { cx: 60, cy: 46, r: 3.5, fill: "currentColor", stroke: "none" }),
  h("path", { d: "M50 56l-5 8h10l-5-8ZM50 64v8" }),
  h("path", { d: "M30 66c4 4 8 6 12 6M70 66c-4 4-8 6-12 6" })
);

const SerpienteMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 3, ...p },
  h("path", { d: "M20 78c0-14 14-16 14-28S20 36 20 24c0-8 7-12 14-12 10 0 14 8 14 16 0 14-14 16-14 28s14 14 14 26" }),
  h("path", { d: "M62 78c0-12 14-14 14-26S62 38 62 26" }),
  h("path", { d: "M30 18c2-3 6-3 8 0M62 78l-4 6h8l-4-6Z" }),
  h("circle", { cx: 31, cy: 16, r: 1.6, fill: "currentColor", stroke: "none" })
);

const AguilaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M50 18c-6 0-10 4-10 10 0 3 1 5 3 7-12 2-26 10-31 22 12-4 20-3 26 0-8 6-12 14-12 24 6-8 14-12 20-13-2 6-2 12 0 18 4-6 8-10 14-12 6 2 10 6 14 12 2-6 2-12 0-18 6 1 14 5 20 13 0-10-4-18-12-24 6-3 14-4 26 0-5-12-19-20-31-22 2-2 3-4 3-7 0-6-4-10-10-10Z" }),
  h("path", { d: "M50 18l-3-8 3 4 3-4-3 8Z", fill: "currentColor", stroke: "none" })
);

const ObsidianaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M50 8l22 26-8 52H36l-8-52L50 8Z" }),
  h("path", { d: "M50 8v78M28 34h44M37 60h26" }),
  h("path", { d: "M50 8L37 60M50 8l13 52", opacity: .55 })
);

const HuesoMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("g", { transform: "rotate(45 50 50)" },
    h("path", { d: "M50 22V78" }),
    h("path", { d: "M50 22c0-6-4-10-9-10s-9 4-9 9c-5 0-9 4-9 9s4 9 9 9c0 5 4 9 9 9s9-4 9-9" }),
    h("path", { d: "M50 78c0 6 4 10 9 10s9-4 9-9c5 0 9-4 9-9s-4-9-9-9c0-5-4-9-9-9s-9 4-9 9", transform: "rotate(180 50 50)" })
  )
);

const FuegoMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M50 12c4 14-8 18-8 30 0 6 4 8 4 8-8-2-10-10-10-10-6 8-8 16-8 24 0 16 13 26 30 26s30-10 30-26c0-18-14-30-22-44-2 10-10 12-10 20 0 0-4-4-4-12 0-8 4-14 8-16-6 0-10 2-10 2Z" }),
  h("path", { d: "M50 74c6 0 10-4 10-10 0-6-6-10-10-16-4 6-10 10-10 16 0 6 4 10 10 10Z", opacity: .6 })
);

const OroMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("circle", { cx: 50, cy: 50, r: 30 }),
  h("circle", { cx: 50, cy: 50, r: 20 }),
  ...[...Array(16)].map((_, i) => {
    const a = (i * 22.5) * Math.PI / 180;
    return h("path", { key: i, d: `M${50 + Math.cos(a) * 30} ${50 + Math.sin(a) * 30}L${50 + Math.cos(a) * 38} ${50 + Math.sin(a) * 38}` });
  }),
  h("path", { d: "M44 58l6-16 6 16M46 53h8", strokeWidth: 2 })
);

const ManoMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M30 50V32c0-3 2-5 5-5s5 2 5 5v14m0 0V24c0-3 2-5 5-5s5 2 5 5v22m0 0V28c0-3 2-5 5-5s5 2 5 5v22m0-6c0-3 2-5 5-5s5 2 5 5v18c0 14-9 26-25 26S30 70 30 56v-6" }),
  h("circle", { cx: 50, cy: 60, r: 8 }),
  h("path", { d: "M50 52v16M42 60h16", opacity: .6 })
);

const OjoMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M14 50c10-16 24-24 36-24s26 8 36 24c-10 16-24 24-36 24S24 66 14 50Z" }),
  h("circle", { cx: 50, cy: 50, r: 12 }),
  h("circle", { cx: 50, cy: 50, r: 4, fill: "currentColor", stroke: "none" }),
  h("path", { d: "M50 12v-6M22 22l-4-5M78 22l4-5M50 88v6M22 78l-4 5M78 78l4 5" })
);

const CorazonMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M50 82C30 66 18 54 18 38c0-11 8-18 17-18 7 0 12 4 15 9 3-5 8-9 15-9 9 0 17 7 17 18 0 16-12 28-32 44Z" }),
  h("path", { d: "M38 40l6 6 6-8 6 8 6-6", opacity: .6 }),
  h("path", { d: "M50 30v6", opacity: .6 })
);

const VelaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("rect", { x: 36, y: 38, width: 28, height: 48, rx: 3 }),
  h("path", { d: "M50 38V28" }),
  h("path", { d: "M50 28c4-4 6-8 6-13 0 5-12 5-12 0 0 5 2 9 6 13Z", fill: "currentColor", stroke: "none" }),
  h("path", { d: "M36 50h28M36 62h28", opacity: .5 })
);

const TarotMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  h("rect", { x: 28, y: 14, width: 44, height: 72, rx: 4, transform: "rotate(-8 50 50)" }),
  h("circle", { cx: 50, cy: 50, r: 12, transform: "rotate(-8 50 50)" }),
  ...[...Array(8)].map((_, i) => {
    const a = (i * 45) * Math.PI / 180;
    return h("path", { key: i, d: `M${50 + Math.cos(a) * 12} ${50 + Math.sin(a) * 12}L${50 + Math.cos(a) * 18} ${50 + Math.sin(a) * 18}`, transform: "rotate(-8 50 50)" });
  }),
  h("path", { d: "M44 50l6-8 6 8-6 4Z", transform: "rotate(-8 50 50)", fill: "currentColor", stroke: "none" })
);

const HumoMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M38 86h24l-2-14H40l-2 14Z" }),
  h("path", { d: "M50 72V58" }),
  h("path", { d: "M50 58c-6-4-6-10 0-14s6-10 0-14M50 58c6-5 6-11 0-15" }),
  h("path", { d: "M40 50c-4-3-4-8 0-11M60 50c4-3 4-8 0-11", opacity: .6 })
);

const RuedaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  h("circle", { cx: 50, cy: 50, r: 30 }),
  h("circle", { cx: 50, cy: 50, r: 8 }),
  ...[...Array(8)].map((_, i) => {
    const a = (i * 45) * Math.PI / 180;
    return h("path", { key: i, d: `M${50 + Math.cos(a) * 8} ${50 + Math.sin(a) * 8}L${50 + Math.cos(a) * 30} ${50 + Math.sin(a) * 30}` });
  }),
  ...[...Array(8)].map((_, i) => {
    const a = (i * 45) * Math.PI / 180;
    return h("path", { key: "t" + i, d: `M${50 + Math.cos(a) * 30} ${50 + Math.sin(a) * 30}l${Math.cos(a) * 6} ${Math.sin(a) * 6}` });
  })
);

const MariposaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  h("path", { d: "M50 30v44" }),
  h("circle", { cx: 50, cy: 28, r: 4 }),
  h("path", { d: "M50 24l-4-8M50 24l4-8" }),
  h("path", { d: "M50 36c-8-12-30-16-34-4-4 10 6 18 18 18 10 0 16-6 16-14Z" }),
  h("path", { d: "M50 36c8-12 30-16 34-4 4 10-6 18-18 18-10 0-16-6-16-14Z" }),
  h("path", { d: "M50 56c-6 8-22 12-26 4-3-7 4-13 12-13 8 0 14 4 14 9Z" }),
  h("path", { d: "M50 56c6 8 22 12 26 4 3-7-4-13-12-13-8 0-14 4-14 9Z" })
);

/* Sol azteca para el logo */
const SolAzteca = (p) => h(Svg, { vb: "0 0 100 100", sw: 2, ...p },
  h("circle", { cx: 50, cy: 50, r: 18 }),
  h("circle", { cx: 50, cy: 50, r: 30, opacity: .5 }),
  ...[...Array(8)].map((_, i) => {
    const a = (i * 45) * Math.PI / 180;
    return h("path", { key: i, d: `M${50 + Math.cos(a) * 30} ${50 + Math.sin(a) * 30}L${50 + Math.cos(a) * 44} ${50 + Math.sin(a) * 44}` });
  }),
  ...[...Array(8)].map((_, i) => {
    const a = (i * 45 + 22.5) * Math.PI / 180;
    return h("path", { key: "p" + i, d: `M${50 + Math.cos(a) * 30} ${50 + Math.sin(a) * 30}l${Math.cos(a) * 9} ${Math.sin(a) * 9}` });
  }),
  /* mini calavera central */
  h("path", { d: "M50 40c-7 0-12 5-12 11 0 4 2 7 4 8v3c0 1 1 2 2 2h12c1 0 2-1 2-2v-3c2-1 4-4 4-8 0-6-5-11-12-11Z" }),
  h("circle", { cx: 45, cy: 51, r: 2.5, fill: "currentColor", stroke: "none" }),
  h("circle", { cx: 55, cy: 51, r: 2.5, fill: "currentColor", stroke: "none" })
);

/* Cráneo con vela — marca de la tienda (para el centro del menú, en dorado) */
const CraneoVela = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  /* flama */
  h("path", { d: "M50 8c3 6 7 9 7 15 0 5-3 8-7 8s-7-3-7-8c0-6 4-9 7-15Z", fill: "currentColor", stroke: "none" }),
  /* mecha */
  h("path", { d: "M50 31v-4" }),
  /* vela + escurrimientos de cera */
  h("path", { d: "M43 31h14v8c0 1-1 2-2 2H45c-1 0-2-1-2-2v-8Z" }),
  h("path", { d: "M46 41v4M54 41v3", opacity: .85 }),
  /* cráneo */
  h("path", { d: "M50 41c-13 0-22 9-22 22 0 6 3 11 7 14v6c0 2 2 4 4 4h22c2 0 4-2 4-4v-6c4-3 7-8 7-14 0-13-9-22-22-22Z" }),
  /* grieta */
  h("path", { d: "M54 43l-4 6 3 3-2 4", sw: 1.4, opacity: .85 }),
  /* ojos */
  h("circle", { cx: 41, cy: 62, r: 6.5, fill: "currentColor", stroke: "none" }),
  h("circle", { cx: 59, cy: 62, r: 6.5, fill: "currentColor", stroke: "none" }),
  /* lágrima bajo el ojo */
  h("path", { d: "M41 70c-2 3-3 5 0 6 3-1 2-3 0-6Z", fill: "currentColor", stroke: "none", opacity: .9 }),
  /* nariz */
  h("path", { d: "M50 66l-3 7h6l-3-7Z", fill: "currentColor", stroke: "none" }),
  /* dientes */
  h("path", { d: "M38 81h24M44 81v6M50 81v6M56 81v6" }),
  /* ramita de olivo */
  h("path", { d: "M31 91c7 3 31 3 38 0", sw: 1.4, opacity: .7 })
);

/* ============ ICONOS UI ============ */
const IconSearch = (p) => h(Svg, { ...p }, h("circle", { cx: 11, cy: 11, r: 7 }), h("path", { d: "M21 21l-4.5-4.5" }));
const IconBag = (p) => h(Svg, { ...p }, h("path", { d: "M6 8h12l1 12H5L6 8Z" }), h("path", { d: "M9 8V6a3 3 0 0 1 6 0v2" }));
const IconUser = (p) => h(Svg, { ...p }, h("circle", { cx: 12, cy: 8, r: 4 }), h("path", { d: "M4 21c0-4 4-7 8-7s8 3 8 7" }));
const IconChevron = (p) => h(Svg, { ...p }, h("path", { d: "M6 9l6 6 6-6" }));
const IconArrow = (p) => h(Svg, { ...p }, h("path", { d: "M4 12h16M14 6l6 6-6 6" }));
const IconClose = (p) => h(Svg, { ...p }, h("path", { d: "M6 6l12 12M18 6L6 18" }));
const IconPlus = (p) => h(Svg, { ...p }, h("path", { d: "M12 5v14M5 12h14" }));
const IconMinus = (p) => h(Svg, { ...p }, h("path", { d: "M5 12h14" }));
const IconTruck = (p) => h(Svg, { ...p }, h("path", { d: "M2 7h11v8H2zM13 10h4l3 3v2h-7z" }), h("circle", { cx: 6, cy: 17, r: 1.6 }), h("circle", { cx: 17, cy: 17, r: 1.6 }));
const IconLock = (p) => h(Svg, { ...p }, h("rect", { x: 5, y: 10, width: 14, height: 10, rx: 2 }), h("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" }));
const IconRefresh = (p) => h(Svg, { ...p }, h("path", { d: "M4 9a8 8 0 0 1 14-3l2 2M20 15a8 8 0 0 1-14 3l-2-2" }), h("path", { d: "M20 4v4h-4M4 20v-4h4" }));
const IconChat = (p) => h(Svg, { ...p }, h("path", { d: "M4 5h16v11H8l-4 4V5Z" }));
const IconStar = (p) => h(Svg, { fill: "currentColor", sw: 0, ...p }, h("path", { d: "M12 3l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8 6.7 19.5l1.1-6L3.4 9.3l6-.8L12 3Z" }));
const IconHeart = (p) => h(Svg, { ...p }, h("path", { d: "M12 20C7 16 4 13 4 9.5 4 7 6 5 8.5 5c1.7 0 3 1 3.5 2 .5-1 1.8-2 3.5-2C18 5 20 7 20 9.5 20 13 17 16 12 20Z" }));
const IconWhats = (p) => h(Svg, { ...p }, h("path", { d: "M4 20l1.4-4A8 8 0 1 1 9 19.5L4 20Z" }), h("path", { d: "M9 9c0 4 2 6 6 6M9 9c0-1 1-1 1.5 0l.5 1-1 1M15 15c1 0 1-1 0-1.5l-1-.5-1 1", sw: 1.3 }));
const IconMail = (p) => h(Svg, { ...p }, h("rect", { x: 3, y: 6, width: 18, height: 12, rx: 2 }), h("path", { d: "M4 8l8 5 8-5" }));
const IconClock = (p) => h(Svg, { ...p }, h("circle", { cx: 12, cy: 12, r: 8 }), h("path", { d: "M12 8v4l3 2" }));
const IconFilter = (p) => h(Svg, { ...p }, h("path", { d: "M3 5h18M6 12h12M10 19h4" }));
const IconGrid = (p) => h(Svg, { ...p }, h("rect", { x: 4, y: 4, width: 7, height: 7 }), h("rect", { x: 13, y: 4, width: 7, height: 7 }), h("rect", { x: 4, y: 13, width: 7, height: 7 }), h("rect", { x: 13, y: 13, width: 7, height: 7 }));

/* Glifo rombo decorativo */
const GlyphDiamond = (p) => h(Svg, { vb: "0 0 24 24", fill: "currentColor", sw: 0, ...p },
  h("path", { d: "M12 2l4 10-4 10-4-10 4-10Z", opacity: .9 }),
  h("circle", { cx: 12, cy: 12, r: 1.6, fill: "var(--bg)" })
);

/* Estrella de 4 puntas (destellos del hero) */
const Star4 = (p) => h(Svg, { vb: "0 0 24 24", fill: "currentColor", sw: 0, ...p },
  h("path", { d: "M12 1c1 6 5 10 11 11-6 1-10 5-11 11-1-6-5-10-11-11 6-1 10-5 11-11Z" })
);

/* Redes (glifos simples) */
const IconIG = (p) => h(Svg, { ...p }, h("rect", { x: 4, y: 4, width: 16, height: 16, rx: 5 }), h("circle", { cx: 12, cy: 12, r: 4 }), h("circle", { cx: 17, cy: 7, r: 1, fill: "currentColor", stroke: "none" }));
const IconTT = (p) => h(Svg, { ...p }, h("path", { d: "M14 4v9a4 4 0 1 1-3-3.9V12a1.5 1.5 0 1 0 1.5 1.5V4h1.5c.3 2 1.7 3.3 3.5 3.5V10c-1.2 0-2.4-.4-3-1" }));
const IconFB = (p) => h(Svg, { ...p }, h("path", { d: "M14 7h2V4h-2c-2 0-3 1.5-3 3.5V10H9v3h2v7h3v-7h2.2l.5-3H14V7.8c0-.5.3-.8 1-.8Z" }));
const IconPin = (p) => h(Svg, { ...p }, h("path", { d: "M9 20l2-7M12 4a6 6 0 0 1 2 11.6c-1.5.6-3-.4-2.8-2" }), h("circle", { cx: 12, cy: 9, r: 5 }));
const IconYT = (p) => h(Svg, { ...p }, h("rect", { x: 3, y: 6, width: 18, height: 12, rx: 4 }), h("path", { d: "M11 9.5l4 2.5-4 2.5z", fill: "currentColor", stroke: "none" }));

/* ====== Motivos witchy / decorativos (v2) ====== */
const LunaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M64 10c-22 4-38 23-38 45s16 41 38 45c-8-3-30-17-30-45s22-42 30-45Z" }),
  h("circle", { cx: 44, cy: 38, r: 2.4, fill: "currentColor", stroke: "none" }),
  h("path", { d: "M40 50c-2 4-2 8 2 11M42 64c3 2 6 2 9 0" }),
  h("path", { d: "M70 30l3-7 3 7 7 3-7 3-3 7-3-7-7-3 7-3Z", sw: 1.4, opacity: .8 }));

const SolMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  h("circle", { cx: 50, cy: 50, r: 22 }),
  ...[...Array(12)].map((_, i) => { const a = i * 30 * Math.PI / 180;
    return h("path", { key: i, d: `M${50 + Math.cos(a) * 24} ${50 + Math.sin(a) * 24}L${50 + Math.cos(a) * (i % 2 ? 38 : 34)} ${50 + Math.sin(a) * (i % 2 ? 38 : 34)}` }); }),
  h("circle", { cx: 43, cy: 46, r: 2.4, fill: "currentColor", stroke: "none" }),
  h("circle", { cx: 57, cy: 46, r: 2.4, fill: "currentColor", stroke: "none" }),
  h("path", { d: "M42 58c4 5 12 5 16 0" }));

const TazaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M28 36h40v30c0 9-7 16-16 16h-8c-9 0-16-7-16-16V36Z" }),
  h("path", { d: "M68 44h8c6 0 10 4 10 10s-4 10-10 10h-8" }),
  h("path", { d: "M40 22c-3 4-3 7 0 10M52 20c-3 4-3 7 0 10", opacity: .7 }),
  h("path", { d: "M38 52l10 8 10-8", opacity: .8 }));

const BolsaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.4, ...p },
  h("path", { d: "M26 38h48l5 46H21l5-46Z" }),
  h("path", { d: "M37 40v-6a13 13 0 0 1 26 0v6" }),
  h("circle", { cx: 50, cy: 60, r: 7 }),
  h("path", { d: "M50 53v14M43 60h14", sw: 1.5, opacity: .7 }));

const EsferaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  h("circle", { cx: 50, cy: 56, r: 30 }),
  h("path", { d: "M40 30h20v-6h-20zM50 24v-8M50 16a4 4 0 1 1 0-1" }),
  h("path", { d: "M22 50c10 6 46 6 56 0M26 68c8 4 40 4 48 0", opacity: .6 }),
  h("path", { d: "M50 26v60", opacity: .4 }));

const RosaMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  h("path", { d: "M50 20c-10 0-16 7-16 15 0 6 4 11 10 13-8 0-14 5-14 13 0 9 8 15 20 15s20-6 20-15c0-8-6-13-14-13 6-2 10-7 10-13 0-8-6-15-16-15Z" }),
  h("path", { d: "M50 30c4 3 6 8 4 14M50 30c-4 3-6 8-4 14M40 52c5-2 15-2 20 0", sw: 1.5, opacity: .7 }),
  h("path", { d: "M50 89V70M50 82c-6-2-10-7-10-14M50 78c6-1 10-6 10-12", opacity: .8 }));

const PentaculoMotif = (p) => h(Svg, { vb: "0 0 100 100", sw: 2.2, ...p },
  h("circle", { cx: 50, cy: 50, r: 40 }),
  h("path", { d: "M50 14 L61 42 L91 42 L67 60 L76 88 L50 70 L24 88 L33 60 L9 42 L39 42 Z" }));

/* ====== Planchette (cursor + hero) ====== */
function planchetteSvg(w, h2) {
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h2}" viewBox="0 0 80 106">`
    + `<defs>`
    + `<radialGradient id="pgem" cx="50%" cy="42%" r="62%"><stop offset="0%" stop-color="#d6f8cf"/><stop offset="40%" stop-color="#5cb673"/><stop offset="100%" stop-color="#114e2c"/></radialGradient>`
    + `<linearGradient id="pgld" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#F4E2A6"/><stop offset="50%" stop-color="#C49A4A"/><stop offset="100%" stop-color="#7E5E22"/></linearGradient>`
    + `</defs>`
    + `<g transform="translate(0,106) scale(1,-1)">`
    + `<path d="M40 3 C19 3 6 18 6 38 C6 64 24 84 40 102 C56 84 74 64 74 38 C74 18 61 3 40 3Z" fill="#10201622" stroke="url(#pgld)" stroke-width="3.4"/>`
    + `<path d="M40 9 C23 9 12 21 12 39 C12 61 27 78 40 93 C53 78 68 61 68 39 C68 21 57 9 40 9Z" fill="none" stroke="#7E5E22" stroke-width="1" opacity=".8"/>`
    + `<circle cx="40" cy="34" r="15" fill="#0b1610" stroke="url(#pgld)" stroke-width="2.6"/>`
    + `<circle cx="40" cy="34" r="10" fill="url(#pgem)"/>`
    + `<path d="M40 24v20M30 34h20" stroke="#dff7d6" stroke-width="1" opacity=".6"/>`
    + `<circle cx="40" cy="34" r="2.2" fill="#0b1610"/>`
    + `<g stroke="url(#pgld)" stroke-width="1.8" fill="none">`
    + `<circle cx="40" cy="70" r="11"/>`
    + `</g>`
    + `<g stroke="#C49A4A" stroke-width="1.3">`
    + Array.from({ length: 12 }).map((_, i) => { const a = i * 30 * Math.PI / 180; return `<line x1="${(40 + Math.cos(a) * 11).toFixed(1)}" y1="${(70 + Math.sin(a) * 11).toFixed(1)}" x2="${(40 + Math.cos(a) * 15).toFixed(1)}" y2="${(70 + Math.sin(a) * 15).toFixed(1)}"/>`; }).join("")
    + `</g>`
    + `<circle cx="36" cy="68" r="1.5" fill="#C49A4A"/><circle cx="44" cy="68" r="1.5" fill="#C49A4A"/>`
    + `<path d="M35 73c3 3 7 3 10 0" fill="none" stroke="#C49A4A" stroke-width="1.3"/>`
    + `</g>`
    + `</svg>`;
}
const PLANCHETTE_CURSOR = `url("data:image/svg+xml,${encodeURIComponent(planchetteSvg(48, 64))}") 24 3, auto`;

/* Mapa motivo por clave */
const MOTIFS = {
  calavera: CalaveraMotif, flor: FlorMotif, xolo: XoloMotif, jaguar: JaguarMotif,
  serpiente: SerpienteMotif, aguila: AguilaMotif, obsidiana: ObsidianaMotif, hueso: HuesoMotif,
  fuego: FuegoMotif, oro: OroMotif, mano: ManoMotif, ojo: OjoMotif, corazon: CorazonMotif,
  vela: VelaMotif, tarot: TarotMotif, humo: HumoMotif, rueda: RuedaMotif, mariposa: MariposaMotif,
  luna: LunaMotif, sol: SolMotif, taza: TazaMotif, bolsa: BolsaMotif, esfera: EsferaMotif,
  rosa: RosaMotif, pentaculo: PentaculoMotif, craneoVela: CraneoVela
};

Object.assign(window, {
  Svg, MOTIFS, SolAzteca, CraneoVela, GlyphDiamond, Star4,
  CalaveraMotif, FlorMotif, XoloMotif, JaguarMotif, SerpienteMotif, AguilaMotif,
  ObsidianaMotif, HuesoMotif, FuegoMotif, OroMotif, ManoMotif, OjoMotif, CorazonMotif,
  VelaMotif, TarotMotif, HumoMotif, RuedaMotif, MariposaMotif,
  LunaMotif, SolMotif, TazaMotif, BolsaMotif, EsferaMotif, RosaMotif, PentaculoMotif,
  planchetteSvg, PLANCHETTE_CURSOR,
  IconSearch, IconBag, IconUser, IconChevron, IconArrow, IconClose, IconPlus, IconMinus,
  IconTruck, IconLock, IconRefresh, IconChat, IconStar, IconHeart, IconWhats, IconMail,
  IconClock, IconFilter, IconGrid, IconIG, IconTT, IconFB, IconPin, IconYT
});