// brodo-ui.jsx — shared presentational components
(function () {
  const Icon = window.Icon;
  const { SWATCH_HEX, formatCLP } = window.BRODO;

  // ---------- Button ----------
  function Button({ variant = "primary", size = "md", full, className = "", children, ...rest }) {
    const base = "inline-flex items-center justify-center gap-2 whitespace-nowrap font-body font-extrabold tracking-tight transition-all duration-200 active:scale-[.97] select-none cursor-pointer rounded-[var(--radius-btn)] disabled:opacity-40 disabled:pointer-events-none";
    const sizes = { sm: "text-sm px-4 h-9", md: "text-[15px] px-5 h-12", lg: "text-base px-6 h-14" };
    const variants = {
      primary: "bg-brand text-ink shadow-[0_6px_0_-2px_rgba(0,0,0,0.08)] hover:brightness-[1.05] hover:-translate-y-0.5",
      dark: "bg-ink text-paper hover:-translate-y-0.5",
      ghost: "bg-transparent text-ink ring-2 ring-inset ring-ink/15 hover:ring-ink/40",
      soft: "bg-[var(--brand-soft)] text-ink hover:bg-[var(--brand-soft-2)]",
    };
    return React.createElement("button",
      { className: `${base} ${sizes[size]} ${variants[variant]} ${full ? "w-full" : ""} ${className}`, ...rest },
      children);
  }

  // ---------- Badge ----------
  function Badge({ tone = "mint", children, className = "" }) {
    const tones = {
      mint: "bg-brand text-ink",
      orange: "bg-brand-2 text-white",
      yellow: "bg-[#F6C544] text-ink",
      ink: "bg-ink text-paper",
      soft: "bg-[var(--brand-soft)] text-ink",
    };
    return React.createElement("span",
      { className: `inline-flex items-center gap-1 whitespace-nowrap text-[11px] font-extrabold uppercase tracking-wide px-2.5 py-1 rounded-full ${tones[tone]} ${className}` },
      children);
  }

  // ---------- Price ----------
  function Price({ value, compareAt, size = "md" }) {
    const sizes = { sm: "text-base", md: "text-xl", lg: "text-3xl" };
    return React.createElement("div", { className: "flex items-baseline gap-2" },
      React.createElement("span", { className: `font-display font-extrabold text-ink leading-none ${sizes[size]}` }, formatCLP(value)),
      compareAt ? React.createElement("span", { className: "text-sm text-sub/70 line-through font-body" }, formatCLP(compareAt)) : null);
  }

  // ---------- Rating ----------
  function Rating({ value = 5, reviews, mini }) {
    return React.createElement("div", { className: "flex items-center gap-1.5 text-sub" },
      React.createElement("span", { className: "flex items-center gap-0.5 text-brand-2" },
        React.createElement(Icon, { name: "Star", size: mini ? 13 : 15, className: "fill-current" })),
      React.createElement("span", { className: `font-body font-bold ${mini ? "text-xs" : "text-sm"} text-ink` }, value),
      reviews != null ? React.createElement("span", { className: `font-body ${mini ? "text-xs" : "text-sm"} text-sub` }, `(${reviews})`) : null);
  }

  // ---------- Qty stepper ----------
  function QtyStepper({ value, onChange, size = "md" }) {
    const dim = size === "sm" ? "h-9" : "h-11";
    const btn = "grid place-items-center w-9 h-full text-ink/70 hover:text-ink transition-colors cursor-pointer disabled:opacity-30";
    return React.createElement("div",
      { className: `inline-flex items-center ${dim} rounded-[var(--radius-btn)] ring-2 ring-inset ring-ink/15 font-body font-extrabold` },
      React.createElement("button", { className: btn, onClick: () => onChange(value - 1), "aria-label": "Restar" }, React.createElement(Icon, { name: "Minus", size: 16 })),
      React.createElement("span", { className: "w-8 text-center text-ink tabular-nums" }, value),
      React.createElement("button", { className: btn, onClick: () => onChange(value + 1), "aria-label": "Sumar" }, React.createElement(Icon, { name: "Plus", size: 16 })));
  }

  // ---------- Option selector (pills or swatches) ----------
  function OptionSelector({ option, value, onChange }) {
    if (option.swatch) {
      return React.createElement("div", { className: "flex items-center gap-2.5" },
        option.values.map((v) => {
          const active = v === value;
          return React.createElement("button", {
            key: v, title: v, onClick: () => onChange(v),
            className: `relative w-8 h-8 rounded-full transition-transform ${active ? "scale-110" : "hover:scale-105"}`,
            style: { background: SWATCH_HEX[v] || "#ccc", boxShadow: active ? "0 0 0 2px var(--paper), 0 0 0 4px var(--ink)" : "inset 0 0 0 1px rgba(0,0,0,.12)" },
          });
        }));
    }
    return React.createElement("div", { className: "flex flex-wrap gap-2" },
      option.values.map((v) => {
        const active = v === value;
        return React.createElement("button", {
          key: v, onClick: () => onChange(v),
          className: `px-3.5 h-10 rounded-[var(--radius-btn)] font-body font-bold text-sm transition-all ${active ? "bg-ink text-paper" : "ring-2 ring-inset ring-ink/15 text-ink hover:ring-ink/40"}`,
        }, v);
      }));
  }

  // ---------- Image placeholder ----------
  const IMG_META = {
    kit: { icon: "Package", cap: "starter kit" },
    freezer: { icon: "Snowflake", cap: "freezer pack" },
    orden: { icon: "Refrigerator", cap: "refri orden" },
    molde: { icon: "Grid3x3", cap: "molde" },
    bolsas: { icon: "ShoppingBag", cap: "bolsas" },
    organizador: { icon: "Archive", cap: "organizador" },
    etiquetas: { icon: "Tag", cap: "etiquetas" },
    tapas: { icon: "Disc", cap: "tapas" },
    cubeteras: { icon: "Soup", cap: "caldo" },
  };
  function ImgPlaceholder({ img, photo, alt, className = "", iconSize = 46, rounded = "var(--radius)" }) {
    const meta = IMG_META[img] || { icon: "Image", cap: img || "imagen" };
    if (photo) {
      return React.createElement("div",
        { className: `relative overflow-hidden bg-[var(--brand-soft)] ${className}`, style: { borderRadius: rounded } },
        React.createElement("img", { src: photo, alt: alt || meta.cap, loading: "lazy", className: "absolute inset-0 w-full h-full object-cover" }));
    }
    return React.createElement("div",
      { className: `relative overflow-hidden grid place-items-center brodo-stripes ${className}`, style: { borderRadius: rounded } },
      React.createElement("div", { className: "flex flex-col items-center gap-2 text-ink/35" },
        React.createElement(Icon, { name: meta.icon, size: iconSize, stroke: 1.5 }),
        React.createElement("span", { className: "font-mono text-[10px] tracking-wide uppercase text-ink/30" }, "// " + meta.cap)));
  }

  Object.assign(window, { Button, Badge, Price, Rating, QtyStepper, OptionSelector, ImgPlaceholder });
})();