/* global React */

function EightCratesSvg() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140" fill="none" aria-hidden="true">
      <rect x="20" y="8"  width="60" height="62" rx="22" ry="22"
            stroke="currentColor" strokeWidth="16" strokeLinejoin="round" />
      <rect x="8"  y="70" width="84" height="62" rx="26" ry="26"
            stroke="currentColor" strokeWidth="16" strokeLinejoin="round" />
      <line x1="28" y1="34"  x2="72" y2="34"
            stroke="currentColor" strokeWidth="5.12" strokeLinecap="round" opacity="0.85" />
      <line x1="20" y1="104" x2="80" y2="104"
            stroke="currentColor" strokeWidth="5.12" strokeLinecap="round" opacity="0.85" />
    </svg>
  );
}

function Wordmark({ size = 28, onDark = false, withDot = true, style }) {
  return (
    <span
      className={`wordmark ${onDark ? "on-dark" : ""}`}
      style={{ fontSize: typeof size === "number" ? `${size}px` : size, ...style }}
    >
      cr
      <span className="w-eight"><EightCratesSvg /></span>
      up
      {withDot && <span className="w-dot" aria-hidden="true" />}
    </span>
  );
}

function AppIcon({ size = 44, variant = "primary", style }) {
  const palettes = {
    primary: { bg: "#5A1F2B", fg: "#D4A04B" },
    inverse: { bg: "#D4A04B", fg: "#5A1F2B" },
    cream:   { bg: "#F4ECD7", fg: "#5A1F2B" },
    dark:    { bg: "#2F0E16", fg: "#D4A04B" },
  };
  const { bg, fg } = palettes[variant] || palettes.primary;
  return (
    <div
      style={{
        width: size,
        height: size,
        background: bg,
        borderRadius: size * 0.225,
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        flexShrink: 0,
        ...style,
      }}
    >
      <span style={{ color: fg, height: size * 0.68, display: "inline-flex" }}>
        <EightCratesSvg />
      </span>
    </div>
  );
}

/* Generic small ui glyphs */
function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function CheckGlyph({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8.5l3.2 3.2L13 4.5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

Object.assign(window, { Wordmark, AppIcon, EightCratesSvg, Arrow, CheckGlyph });