// Primitives: Logo, Arrow, Button, Eyebrow, Pill

const ArgosLogo = ({ variant = "black", height = 18 }) => (
  <img
    src={`assets/logos/argos-logo-${variant}.svg`}
    alt="Argos data"
    style={{ height, width: "auto", display: "block" }}
  />
);

const ArrowUR = ({ size = 14, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 9.333 9.333" fill={color} aria-hidden="true">
    <path d="M9.333 1.867v6.533a.933.933 0 01-.933.933H1.867a.933.933 0 010-1.866h4.281L.273 1.593A.933.933 0 011.593.273L7.467 6.149V1.867A.933.933 0 019.333 1.867z"/>
  </svg>
);

// Down-right arrow (↘) — drawn directly so we don't have to fight transforms
const ArrowDR = ({ size = 14, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 9.333 9.333" fill={color} aria-hidden="true">
    <path d="M9.333 7.467V0.933a0.933 0.933 0 00-0.933-0.933H1.867a0.933 0.933 0 000 1.866h4.281L0.273 7.74A0.933 0.933 0 001.593 9.06L7.467 3.184V7.467a0.933 0.933 0 001.866 0z"/>
  </svg>
);

const Button = ({ children, variant = "primary", onClick, style, icon = false, type = "button" }) => {
  const base = {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    padding: "14px 24px",
    borderRadius: 37,
    fontFamily: "var(--font-display)",
    fontSize: 12,
    fontWeight: 500,
    letterSpacing: "0.01em",
    cursor: "pointer",
    border: "1px solid transparent",
    transition: "transform 120ms ease, opacity 120ms ease, background 160ms ease",
    whiteSpace: "nowrap",
    textTransform: "none",
  };
  const variants = {
    primary: { background: "#000", color: "#fff" },
    ghost: { background: "transparent", color: "#000", borderColor: "#000" },
    onDark: { background: "rgba(255,255,255,0.10)", color: "#fff" },
    light: { background: "#F2F2F0", color: "#000" },
  };
  return (
    <button
      type={type}
      onClick={onClick}
      style={{ ...base, ...variants[variant], ...style }}
      onMouseEnter={(e)=>{ if (variant === "onDark") e.currentTarget.style.background = "rgba(255,255,255,0.18)"; else e.currentTarget.style.opacity = "0.86"; }}
      onMouseLeave={(e)=>{ e.currentTarget.style.background = variants[variant].background; e.currentTarget.style.opacity = "1"; }}
      onMouseDown={(e)=>{ e.currentTarget.style.transform = "translateY(1px)"; }}
      onMouseUp={(e)=>{ e.currentTarget.style.transform = "translateY(0)"; }}
    >
      {children}
      {icon && <ArrowUR color={variant === "primary" || variant === "onDark" ? "#fff" : "#000"} size={11}/>}
    </button>
  );
};

const Eyebrow = ({ children, color = "#666" }) => (
  <div style={{
    fontSize: 13, fontWeight: 500, color,
    fontFamily: "var(--font-display)",
    letterSpacing: "0.02em",
    display: "inline-flex", alignItems: "center", gap: 8,
  }}>
    <span style={{ width: 18, height: 1, background: color, display: "inline-block" }}/>
    {children}
  </div>
);

const Pill = ({ children, variant = "outline" }) => {
  const styles = {
    outline: { border: "1px solid #000", color: "#000", background: "transparent" },
    light:   { background: "#F2F2F0", color: "#000" },
    dark:    { background: "#000", color: "#fff" },
  };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "7px 14px", borderRadius: 37, fontSize: 12, fontWeight: 500,
      fontFamily: "var(--font-display)", letterSpacing: "0.01em",
      ...styles[variant],
    }}>
      {children}
    </span>
  );
};

Object.assign(window, { ArgosLogo, ArrowUR, ArrowDR, Button, Eyebrow, Pill });