/* global React */
// Tito brand motifs — the button/face mascot + tailoring decorations.
// Exposed on window. The "O" in TITO is a button that doubles as a face;
// these reuse that DNA throughout the page.
const { createElement: he } = React;

// The big watermark mascot: a button-face (round, two stitch holes, a smile).
function ButtonFace({ size = 600, color = "currentColor", style, className }) {
  return he(
    "svg",
    { viewBox: "0 0 200 200", width: size, height: size, fill: "none", style, className, "aria-hidden": "true" },
    // outer button ring
    he("circle", { cx: 100, cy: 100, r: 92, stroke: color, strokeWidth: 9 }),
    // two button holes = eyes
    he("circle", { cx: 100, cy: 70, r: 11, fill: color }),
    he("circle", { cx: 100, cy: 108, r: 11, fill: color }),
    // smile
    he("path", { d: "M58 132 Q100 172 142 132", stroke: color, strokeWidth: 9, strokeLinecap: "round" })
  );
}

// Small button glyph (just the round button with two holes) — used as a bullet/dot.
function ButtonDot({ size = 22, color = "currentColor", style }) {
  return he(
    "svg",
    { viewBox: "0 0 40 40", width: size, height: size, fill: "none", style, "aria-hidden": "true" },
    he("circle", { cx: 20, cy: 20, r: 17, stroke: color, strokeWidth: 3 }),
    he("circle", { cx: 20, cy: 15, r: 3.4, fill: color }),
    he("circle", { cx: 20, cy: 25, r: 3.4, fill: color })
  );
}

// A dashed seam line (horizontal). Pass width via style.
function Seam({ color = "currentColor", style, vertical = false }) {
  return he("div", {
    style: {
      borderTop: vertical ? "none" : `2.5px dashed ${color}`,
      borderLeft: vertical ? `2.5px dashed ${color}` : "none",
      opacity: 0.5,
      ...style,
    },
    "aria-hidden": "true",
  });
}

// Tape-measure tick strip (a horizontal ruler edge).
function TapeMeasure({ color = "currentColor", height = 26, ticks = 40, style }) {
  const marks = [];
  for (let i = 0; i < ticks; i++) {
    const major = i % 5 === 0;
    marks.push(
      he("div", {
        key: i,
        style: {
          width: 2,
          height: major ? height : height * 0.5,
          background: color,
          opacity: major ? 0.85 : 0.45,
          flex: "0 0 auto",
        },
      })
    );
  }
  return he(
    "div",
    {
      style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", height, ...style },
      "aria-hidden": "true",
    },
    marks
  );
}

// ---- Shared UI atoms ----

// Pill button. variant: "ink" (filled dark), "solid" (filled yellow), "outline", "white", "ghost-light"
function PillButton({ children, variant = "ink", href, onClick, icon, size = "md", style, type, as }) {
  const pad = size === "sm" ? "9px 18px" : "15px 28px";
  const fs = size === "sm" ? 14 : 16;
  const variants = {
    ink: { background: "var(--ink)", color: "var(--yellow)", border: "2px solid var(--ink)" },
    solid: { background: "var(--yellow)", color: "var(--ink)", border: "2px solid var(--ink)" },
    outline: { background: "transparent", color: "var(--ink)", border: "2px solid var(--ink)" },
    white: { background: "#fff", color: "var(--ink)", border: "2px solid #fff" },
    "outline-light": { background: "transparent", color: "#fff", border: "2px solid rgba(255,255,255,.55)" },
  };
  const Comp = as || (href ? "a" : "button");
  return he(
    Comp,
    {
      href,
      onClick,
      type: Comp === "button" ? type || "button" : undefined,
      className: "tito-pill",
      style: {
        display: "inline-flex", alignItems: "center", gap: 10,
        padding: pad, fontSize: fs, fontWeight: 600, lineHeight: 1,
        fontFamily: "var(--font-body)", letterSpacing: ".01em",
        borderRadius: 999, cursor: "pointer", textDecoration: "none",
        whiteSpace: "nowrap", transition: "transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease",
        ...variants[variant], ...style,
      },
    },
    icon ? he("i", { className: `bi ${icon}`, style: { fontSize: fs + 2 } }) : null,
    he("span", null, children)
  );
}

// Small uppercase tracked kicker, optionally with a button-dot.
function Kicker({ children, color = "var(--ink)", dot = true, style }) {
  return he(
    "div",
    { style: { display: "inline-flex", alignItems: "center", gap: 10, ...style } },
    dot ? he(ButtonDot, { size: 18, color }) : null,
    he(
      "span",
      { style: { fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 700, letterSpacing: ".18em", textTransform: "uppercase", color } },
      children
    )
  );
}

Object.assign(window, { ButtonFace, ButtonDot, Seam, TapeMeasure, PillButton, Kicker });