/* global React */
// ============================================================
// SPARKIO — Brand primitives (Spark mark, wordmark, swatch)
// Exported to window for use by the identity board + landing page.
// ============================================================

// The 4-point spark. Concave-sided star = "a point becoming movement".
const SPARK_PATH =
  "M50 3 C 53.5 33, 67 46.5, 97 50 C 67 53.5, 53.5 67, 50 97 C 46.5 67, 33 53.5, 3 50 C 33 46.5, 46.5 33, 50 3 Z";

// A slimmer, taller spark for the "momentum" study (upward thrust).
const SPARK_TALL =
  "M50 1 C 52 36, 65 47, 97 50 C 65 53, 53 64, 50 99 C 47 64, 35 53, 3 50 C 35 47, 48 36, 50 1 Z";

function Spark({ variant = "gradient", size = 96, id = "s", style = {}, strokeColor }) {
  const gid = `g-${id}`;
  const tid = `t-${id}`;
  const common = { width: size, height: size, viewBox: "0 0 100 100", style, "aria-hidden": true };

  if (variant === "outline") {
    return (
      <svg {...common}>
        <path d={SPARK_PATH} fill="none" stroke={strokeColor || "var(--ember)"} strokeWidth="3.5" strokeLinejoin="round" />
      </svg>
    );
  }

  if (variant === "solid") {
    return (
      <svg {...common}>
        <path d={SPARK_PATH} fill={strokeColor || "var(--ember)"} />
      </svg>
    );
  }

  if (variant === "twotone") {
    return (
      <svg {...common}>
        <defs>
          <radialGradient id={gid} cx="50%" cy="42%" r="62%">
            <stop offset="0%" stopColor="var(--glow, #FFE3AE)" />
            <stop offset="38%" stopColor="var(--flame, #FFA23E)" />
            <stop offset="100%" stopColor="var(--g1, #FF6A1A)" />
          </radialGradient>
        </defs>
        <path d={SPARK_PATH} fill={`url(#${gid})`} />
      </svg>
    );
  }

  if (variant === "momentum") {
    return (
      <svg {...common}>
        <defs>
          <linearGradient id={gid} x1="20%" y1="100%" x2="70%" y2="0%">
            <stop offset="0%" stopColor="#C5471A" />
            <stop offset="55%" stopColor="#FF8A3D" />
            <stop offset="100%" stopColor="#FFD37A" />
          </linearGradient>
        </defs>
        <path d={SPARK_TALL} fill={`url(#${gid})`} />
      </svg>
    );
  }

  if (variant === "trail") {
    // The signature: a point igniting into movement — comet arc into the spark.
    return (
      <svg {...common} viewBox="0 0 120 100">
        <defs>
          <linearGradient id={tid} x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#FF6A1A" stopOpacity="0" />
            <stop offset="100%" stopColor="#FFB23E" stopOpacity="0.95" />
          </linearGradient>
          <linearGradient id={gid} x1="20%" y1="100%" x2="80%" y2="0%">
            <stop offset="0%" stopColor="#FF6A1A" />
            <stop offset="100%" stopColor="#FFC46B" />
          </linearGradient>
        </defs>
        <path d="M6 96 C 30 86, 52 70, 66 48"
              fill="none" stroke={`url(#${tid})`} strokeWidth="7" strokeLinecap="round" />
        <circle cx="7" cy="95" r="4.5" fill="#FF6A1A" opacity="0.6" />
        <g transform="translate(20,-2)">
          <path d={SPARK_PATH} fill={`url(#${gid})`} transform="scale(0.78) translate(14,6)" />
        </g>
      </svg>
    );
  }

  // default: gradient
  return (
    <svg {...common}>
      <defs>
        <linearGradient id={gid} x1="15%" y1="100%" x2="85%" y2="0%">
          <stop offset="0%" stopColor="var(--g1, #FF6A1A)" />
          <stop offset="48%" stopColor="var(--g2, #FF8A3D)" />
          <stop offset="100%" stopColor="var(--g3, #FFC46B)" />
        </linearGradient>
      </defs>
      <path d={SPARK_PATH} fill={`url(#${gid})`} />
    </svg>
  );
}

// Wordmark: "Sparkio" with the mark optionally replacing the dot energy.
function Wordmark({ size = 40, color = "var(--paper)", mark = true, variant = "gradient", gap = 0.32 }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: `${gap}em`,
                   fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: size,
                   letterSpacing: "-0.03em", color, lineHeight: 1 }}>
      {mark && <Spark variant={variant} size={size * 0.92} id={`wm-${variant}-${Math.round(size)}`} />}
      <span>Sparkio</span>
    </span>
  );
}

function Swatch({ name, hex, sub, big }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ height: big ? 92 : 64, borderRadius: 12, background: hex,
                    border: "1px solid rgba(255,255,255,0.08)" }} />
      <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 13, color: "var(--paper)" }}>{name}</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--smoke)", textTransform: "uppercase", letterSpacing: "0.04em" }}>{hex}</span>
        {sub && <span style={{ fontFamily: "var(--font-sans)", fontSize: 11, color: "var(--smoke)" }}>{sub}</span>}
      </div>
    </div>
  );
}

Object.assign(window, { Spark, Wordmark, Swatch, SPARK_PATH, SPARK_TALL });