/* global React */
// ============================================================================
// BioBits.CL — Shared primitives + icon set
// Icons are inline stroke SVGs (Lucide-style, 1.6px) drawn at currentColor.
// Exported to window for use across babel script files.
// ============================================================================
const { createElement: h } = React;

// ---- Icons (Lucide-style line icons) --------------------------------------
function Icon({ d, paths, size = 20, stroke = 1.6, fill, viewBox = "0 0 24 24", ...rest }) {
  return h("svg", {
    width: size, height: size, viewBox, fill: fill || "none",
    stroke: fill ? "none" : "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", ...rest
  }, paths ? paths.map((p, i) => h("path", { key: i, d: p })) : h("path", { d }));
}

const Icons = {
  arrowRight: (p) => h(Icon, { ...p, d: "M5 12h14M13 6l6 6-6 6" }),
  arrowUpRight: (p) => h(Icon, { ...p, d: "M7 17 17 7M7 7h10v10" }),
  play: (p) => h(Icon, { ...p, fill: "currentColor", d: "M6 4.5v15l13-7.5z" }),
  paw: (p) => h(Icon, { ...p, paths: [
    "M6.5 11.5a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z",
    "M17.5 11.5a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z",
    "M10 8.3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",
    "M14 8.3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",
    "M12 12.5c-2.5 0-4.5 1.7-4.5 3.8C7.5 18 8.7 19 10 19c.8 0 1.3-.4 2-.4s1.2.4 2 .4c1.3 0 2.5-1 2.5-2.7 0-2.1-2-3.8-4.5-3.8Z"
  ] }),
  eye: (p) => h(Icon, { ...p, paths: ["M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z", "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"] }),
  scan: (p) => h(Icon, { ...p, paths: ["M3 7V5a2 2 0 0 1 2-2h2", "M17 3h2a2 2 0 0 1 2 2v2", "M21 17v2a2 2 0 0 1-2 2h-2", "M7 21H5a2 2 0 0 1-2-2v-2", "M3 12h18"] }),
  shield: (p) => h(Icon, { ...p, paths: ["M12 3 5 6v5c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6l-7-3Z", "m9 12 2 2 4-4"] }),
  alert: (p) => h(Icon, { ...p, paths: ["M12 3 2 20h20L12 3Z", "M12 10v5", "M12 18h.01"] }),
  check: (p) => h(Icon, { ...p, d: "m4 12 5 5L20 6" }),
  x: (p) => h(Icon, { ...p, d: "M6 6l12 12M18 6 6 18" }),
  menu: (p) => h(Icon, { ...p, d: "M3 6h18M3 12h18M3 18h18" }),
  data: (p) => h(Icon, { ...p, paths: ["M4 20V10", "M10 20V4", "M16 20v-7", "M22 20H2"] }),
  pin: (p) => h(Icon, { ...p, paths: ["M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z", "M12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"] }),
  weight: (p) => h(Icon, { ...p, paths: ["M6.5 7h11l2 13H4.5l2-13Z", "M9 7a3 3 0 1 1 6 0"] }),
  ruler: (p) => h(Icon, { ...p, paths: ["M3 8h18v8H3z", "M7 8v3M11 8v4M15 8v3M19 8v4"] }),
  cpu: (p) => h(Icon, { ...p, paths: ["M6 6h12v12H6z", "M9 9h6v6H9z", "M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"] }),
  pen: (p) => h(Icon, { ...p, paths: ["M12 20h9", "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z"] }),
  film: (p) => h(Icon, { ...p, paths: ["M4 4h16v16H4z", "M4 9h16M4 15h16M9 4v16M15 4v16"] }),
  send: (p) => h(Icon, { ...p, paths: ["M22 2 11 13", "M22 2 15 22l-4-9-9-4 20-7Z"] }),
  search: (p) => h(Icon, { ...p, paths: ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", "m21 21-4.3-4.3"] }),
  globe: (p) => h(Icon, { ...p, paths: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", "M3 12h18", "M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z"] }),
  instagram: (p) => h(Icon, { ...p, paths: ["M4 8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8Z", "M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z", "M17 7h.01"] }),
  youtube: (p) => h(Icon, { ...p, paths: ["M22 8.2a3 3 0 0 0-2.1-2.1C18 5.5 12 5.5 12 5.5s-6 0-7.9.6A3 3 0 0 0 2 8.2 31 31 0 0 0 1.5 12 31 31 0 0 0 2 15.8a3 3 0 0 0 2.1 2.1c1.9.6 7.9.6 7.9.6s6 0 7.9-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 22.5 12 31 31 0 0 0 22 8.2Z", "m10 15 5-3-5-3v6Z"] }),
  tiktok: (p) => h(Icon, { ...p, paths: ["M16 4c.5 2.5 2 4 4.5 4.3v3C18.8 11.2 17.2 10.6 16 9.6V15a5.5 5.5 0 1 1-5.5-5.5c.4 0 .8 0 1.2.1v3.1a2.5 2.5 0 1 0 1.8 2.4V4H16Z"] }),
  leaf: (p) => h(Icon, { ...p, paths: ["M4 20s0-9 8-13c5-2.5 9-2 9-2s.5 4-2 9c-4 8-13 8-13 8Z", "M4 20 14 10"] }),
  waves: (p) => h(Icon, { ...p, paths: ["M2 7c2 0 2 1.5 4 1.5S8 7 10 7s2 1.5 4 1.5S16 7 18 7s2 1.5 4 1.5", "M2 12c2 0 2 1.5 4 1.5S8 12 10 12s2 1.5 4 1.5S16 12 18 12s2 1.5 4 1.5", "M2 17c2 0 2 1.5 4 1.5S8 17 10 17s2 1.5 4 1.5S16 17 18 17s2 1.5 4 1.5"] }),
  mountain: (p) => h(Icon, { ...p, paths: ["m3 20 6-11 4 6 2-3 6 8H3Z"] }),
};

// ---- Button ---------------------------------------------------------------
function Btn({ variant = "primary", size, icon, iconRight, children, ...rest }) {
  const IconR = iconRight && Icons[iconRight];
  const IconL = icon && Icons[icon];
  return h("button", { className: `bb-btn bb-btn--${variant}${size ? " bb-btn--" + size : ""}`, ...rest },
    IconL && h(IconL, { size: 16, className: "ico" }),
    children,
    IconR && h(IconR, { size: 16, className: "ico" })
  );
}

// ---- Chip -----------------------------------------------------------------
function Chip({ variant = "cyan", dot, children }) {
  return h("span", { className: `bb-chip${variant !== "cyan" ? " bb-chip--" + variant : ""}` },
    dot && h("span", { className: "dot" }), children);
}

// ---- Conservation status badge --------------------------------------------
const STATUS = {
  LC: { c: "var(--status-lc)", label: "Preocupación Menor" },
  NT: { c: "var(--status-nt)", label: "Casi Amenazado" },
  VU: { c: "var(--status-vu)", label: "Vulnerable" },
  EN: { c: "var(--status-en)", label: "En Peligro" },
  CR: { c: "var(--status-cr)", label: "En Peligro Crítico" },
};
function StatusBadge({ code, label }) {
  const s = STATUS[code] || STATUS.VU;
  return h("span", { className: "bb-status", style: { "--c": s.c } },
    h("span", { className: "dot" }),
    h("span", null, label || s.label));
}

// ---- Eyebrow + Section header ---------------------------------------------
function Eyebrow({ children }) {
  return h("span", { className: "bb-eyebrow eb" }, children);
}
function SectionHeader({ eyebrow, title, intro, align }) {
  return h("div", { className: "bb-sechead", style: align === "center" ? { marginInline: "auto", textAlign: "center", alignItems: "center" } : null },
    eyebrow && h("div", { className: "eb" }, h(Eyebrow, null, eyebrow)),
    h("h2", { className: "bb-h2 glitch-hover" }, title),
    intro && h("p", { className: "bb-body-lg" }, intro)
  );
}

// ---- Image panel (holo placeholder + optional image-slot) -----------------
function ImagePanel({ slotId, placeholder, children, style, reticle }) {
  return h("div", { className: "bb-imgpanel bb-hud", style },
    h("image-slot", { id: slotId, placeholder: placeholder || "Render BioBits", shape: "rect", style: { width: "100%", height: "100%" } }),
    children
  );
}

Object.assign(window, {
  h, Icon, Icons, Btn, Chip, StatusBadge, STATUS, Eyebrow, SectionHeader, ImagePanel,
});