/* triaz-primitives.jsx — Icon (mask-based), Wordmark, Isotype, Eyebrow */

/* Brand SVG paths — extracted from TRIAZ DS v1.0 */
const TRIAZ_WORDMARK_D = "M233.639 0C245.847 4.12177e-05 256.391 2.06123 265.271 6.18359C274.15 10.3061 279.085 15.8891 284 23.5C288.915 31.1109 293 43.1936 293 53.5C293 54.811 293.024 56.1059 293.047 57.3818C293.162 63.6673 292.5 69.5 290.5 74.5L288.5 79.5L286 84C281.5 91.5 275.5 96 275.5 96L262.5 105.5L296 156H265L235.5 110H208V78.0117H231.735C241.09 78.0117 248.385 75.7912 253.617 71.3516C258.849 66.9119 261.466 60.6489 261.466 52.5625C261.466 44.3174 258.77 37.9748 253.379 33.5352C248.146 29.0956 240.456 26.876 230.309 26.876H192V156H163V0H233.639ZM353 156H324.081V0H353V156ZM543 156H513L499 123H444.5L454 98H488L458.5 30L430 98L419.5 123L404.5 156H375L445.887 0H473L543 156ZM692 20.5L603.5 132H695V156H562V136.5L653 26.876H562.567V0H692V20.5ZM133.428 24.5H80.5V155.5H52V24.5H0V0H133.428V24.5Z";
const TRIAZ_ISO_D = "M25.9023 95L45.4023 105.5L26.0537 118.823L6.90234 108.5L25.9023 95ZM60.4023 72.5L116.402 104.5L98.4023 117L41.4023 85.5L60.4023 72.5ZM53.9385 64.5L0.402344 100.5L0 76.1514L53.9385 40.7871V64.5ZM100.402 61.5L120.402 74V96L100.402 84.7969V61.5ZM63.4023 0L84.4023 12V75.2812L63.4023 63V0ZM53.4053 22.7656L33.4053 35.5V35.499L33.4043 35.5V35.498L33.4023 35.5V13L53.4023 0V0.000976562L53.4053 0V22.7656Z";

/* Triaz wordmark (text logo) — fill follows currentColor by default */
function TriazWordmark({ height = 24, fill = "currentColor", style = {} }) {
  const width = (height / 156) * 695;
  return (
    <svg viewBox="0 0 695 156" width={width} height={height} aria-label="Triaz" style={{ display: "block", ...style }}>
      <path d={TRIAZ_WORDMARK_D} fill={fill} />
    </svg>
  );
}

/* Triaz isotype (mark) — three echelon planes */
function TriazIso({ size = 28, fill = "currentColor", style = {} }) {
  return (
    <svg viewBox="0 0 121 119" width={size} height={(size / 121) * 119} aria-hidden="true" style={{ display: "block", ...style }}>
      <path d={TRIAZ_ISO_D} fill={fill} />
    </svg>
  );
}

/* Branded "monogram" tile — isotype on a solid square (used in app sidebars, cards) */
function TriazTile({ size = 32, bg = "var(--ink)", fg = "var(--copper)", radius = 4 }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      width: size, height: size, background: bg, borderRadius: radius, flexShrink: 0,
    }}>
      <TriazIso size={size * 0.52} fill={fg} />
    </span>
  );
}

/* Lucide icon via CSS mask — recoloured via currentColor on parent */
function Icon({ name, size = 16, color, style = {} }) {
  const src = (typeof window !== "undefined" && window.__resources && window.__resources["icon-" + name])
    || `https://unpkg.com/lucide-static@0.460.0/icons/${name}.svg`;
  return (
    <span
      className="icon"
      style={{
        width: size, height: size, fontSize: size,
        WebkitMaskImage: `url(${src})`,
        maskImage: `url(${src})`,
        backgroundColor: color || "currentColor",
        ...style,
      }}
      aria-hidden="true"
    />
  );
}

/* Eyebrow — monospace · 6px dot · uppercase */
function Eyebrow({ children, tone = "default", style = {} }) {
  const dotColor = tone === "dark" ? "var(--copper)" : "var(--copper)";
  return (
    <div className={"eyebrow" + (tone === "dark" ? " on-dark" : "")} style={style}>
      <span className="dot" style={{ background: dotColor }} />
      {children}
    </div>
  );
}

/* Section meta label (left column "01 / Marca" pattern) */
function SectionMeta({ children, tone = "default" }) {
  return (
    <div className="mono" style={{
      fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase",
      color: tone === "dark" ? "var(--steel-2)" : "var(--steel)",
    }}>
      {children}
    </div>
  );
}

Object.assign(window, { Icon, TriazWordmark, TriazIso, TriazTile, Eyebrow, SectionMeta });