// ============================================================
// Qubi brand kit — tintable SVG cube mascot, wordmark, decals.
// The hero uses the real PNG art; this SVG cube is the recurring,
// recolorable mark (works on cream, orange or ink backgrounds).
// ============================================================

// Shared palette (JS constants — SVG fill attributes can't read CSS var())
const Q = {
  orange: "#ED5D2D", orangeDeep: "#C7431A",
  cream: "#F4E6D5", card: "#FFF8EE",
  ink: "#2B1B12", muted: "#7A6354",
  teal: "#1F7A6B", mustard: "#E4A93B", berry: "#C0405E",
};

// ---- The Qubito: a smiley QR cube, isometric, single-color tintable ----
const QubiCube = ({ size = 56, color = Q.orange, face = Q.cream, expression = "happy", className = "", style = {} }) => {
  // QR finder square (cream outer, color center)
  const Finder = ({ x, y }) => (
    <g>
      <rect x={x} y={y} width="13" height="13" rx="2.5" fill={face} />
      <rect x={x + 4} y={y + 4} width="5" height="5" rx="1" fill={color} />
    </g>
  );
  return (
    <svg className={className} style={style} width={size} height={size} viewBox="0 0 120 124" fill="none" aria-hidden="true">
      {/* cube silhouette */}
      <path d="M44 22 H116 V86 L96 104 H24 V40 Z" fill={color} />
      {/* cube edge lines (cream) */}
      <path d="M24 40 H96 M96 40 V104 M24 40 L44 22 M96 40 L116 22" stroke={face} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      {/* QR finders on front face corners */}
      <Finder x={31} y={47} />
      <Finder x={76} y={47} />
      <Finder x={31} y={84} />
      <Finder x={76} y={84} />

      {/* eyes */}
      {expression === "wow" ? (
        <>
          <circle cx="54" cy="66" r="5.4" fill={face} />
          <circle cx="76" cy="66" r="5.4" fill={face} />
        </>
      ) : expression === "wink" ? (
        <>
          <ellipse cx="54" cy="67" rx="4.6" ry="6.2" fill={face} />
          <path d="M71 67 q5 -5 10 0" stroke={face} strokeWidth="3" strokeLinecap="round" fill="none" />
        </>
      ) : expression === "cool" ? (
        <rect x="48" y="62" width="34" height="9" rx="4.5" fill={face} />
      ) : (
        <>
          <ellipse cx="54" cy="66" rx="4.6" ry="6.4" fill={face} />
          <ellipse cx="76" cy="66" rx="4.6" ry="6.4" fill={face} />
        </>
      )}

      {/* smile */}
      {expression === "wow" ? (
        <ellipse cx="65" cy="84" rx="6" ry="7" fill={face} />
      ) : (
        <path d="M52 80 q13 13 26 0" stroke={face} strokeWidth="3.4" strokeLinecap="round" fill="none" />
      )}
    </svg>
  );
};

// ---- Real wordmark (orange SVG, crisp at any size) ----
const QubiWordmark = ({ height = 44, style = {} }) => (
  <img src="/landing/assets/qubi-logo.svg" alt="Qubi" style={{ height, width: "auto", display: "block", ...style }} />
);

// ---- 4-point sparkle (from the logo) ----
const Sparkle = ({ size = 28, color = Q.ink, style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={style} aria-hidden="true">
    <path d="M20 1 C21 13 27 19 39 20 C27 21 21 27 20 39 C19 27 13 21 1 20 C13 19 19 13 20 1Z" fill={color} />
  </svg>
);

// ---- Starburst seal / stamp ----
const Starburst = ({ size = 120, color = Q.orange, points = 16, style = {} }) => {
  const cx = 60, cy = 60, rO = 58, rI = 49;
  let d = "";
  for (let i = 0; i < points * 2; i++) {
    const r = i % 2 === 0 ? rO : rI;
    const a = (Math.PI / points) * i - Math.PI / 2;
    d += (i === 0 ? "M" : "L") + (cx + r * Math.cos(a)).toFixed(1) + " " + (cy + r * Math.sin(a)).toFixed(1) + " ";
  }
  d += "Z";
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none" style={style} aria-hidden="true">
      <path d={d} fill={color} />
    </svg>
  );
};

// ---- Wavy divider (top edge of a section) ----
const Wave = ({ fill = Q.cream, flip = false, style = {} }) => (
  <svg viewBox="0 0 1440 48" preserveAspectRatio="none" style={{ display: "block", width: "100%", height: 40, transform: flip ? "scaleY(-1)" : "none", ...style }} aria-hidden="true">
    <path d="M0 24 C 180 0, 360 48, 540 24 S 900 0, 1080 24 S 1440 48, 1440 24 V 48 H 0 Z" fill={fill} />
  </svg>
);

window.Q = Q;
window.QubiCube = QubiCube;
window.QubiWordmark = QubiWordmark;
window.Sparkle = Sparkle;
window.Starburst = Starburst;
window.Wave = Wave;