/* OOTW Mark — 4 tonal variants
   Variant A: void  — paper on void, magenta nucleus
   Variant B: cosmos — full color, gold ring
   Variant C: paper — void on paper, teal nucleus
   Variant D: gold  — monochrome gold
*/

const Mark = ({ size = 96, tone = "A", spinning = false, className = "" }) => {
  const cfg = {
    A: { ring: "var(--paper)", inner: "var(--paper)", core: "var(--magenta)", text: "var(--paper)" },
    B: { ring: "var(--gold)", inner: "var(--teal)", core: "var(--magenta)", text: "var(--paper)" },
    C: { ring: "var(--void)", inner: "var(--void)", core: "var(--teal)", text: "var(--void)" },
    D: { ring: "var(--gold)", inner: "var(--gold)", core: "var(--gold)", text: "var(--gold)" },
  }[tone];

  return (
    <div className={`mark ${className}`} style={{ width: size, height: size, position: "relative", display: "inline-block" }}>
      <svg
        viewBox="0 0 200 200"
        width={size}
        height={size}
        style={{
          display: "block",
          animation: spinning ? "markSpin 60s linear infinite" : "none",
        }}
      >
        {/* outer ring */}
        <circle cx="100" cy="100" r="96" fill="none" stroke={cfg.ring} strokeWidth="1" opacity="0.5" />
        {/* inner ring */}
        <circle cx="100" cy="100" r="72" fill="none" stroke={cfg.inner} strokeWidth="1" opacity="0.8" />
        {/* hairline cross */}
        <line x1="0" y1="100" x2="200" y2="100" stroke={cfg.inner} strokeWidth="0.5" opacity="0.25" />
        <line x1="100" y1="0" x2="100" y2="200" stroke={cfg.inner} strokeWidth="0.5" opacity="0.25" />
        {/* nucleus */}
        <circle cx="100" cy="100" r="6" fill={cfg.core} />
        <circle cx="100" cy="100" r="14" fill="none" stroke={cfg.core} strokeWidth="0.75" opacity="0.6" />

        {/* orbital */}
        <ellipse cx="100" cy="100" rx="48" ry="20" fill="none" stroke={cfg.inner} strokeWidth="0.6" opacity="0.6" transform="rotate(-25 100 100)" />
        <circle cx="148" cy="100" r="2.5" fill={cfg.core} transform="rotate(-25 100 100)" />

        {/* tick marks at cardinal points */}
        {[0, 90, 180, 270].map((a) => (
          <line
            key={a}
            x1="100" y1="4" x2="100" y2="14"
            stroke={cfg.ring}
            strokeWidth="1"
            transform={`rotate(${a} 100 100)`}
          />
        ))}
        {/* small ticks at 45s */}
        {[45, 135, 225, 315].map((a) => (
          <line
            key={a}
            x1="100" y1="4" x2="100" y2="9"
            stroke={cfg.ring}
            strokeWidth="0.5"
            opacity="0.6"
            transform={`rotate(${a} 100 100)`}
          />
        ))}
      </svg>
      <style>{`
        @keyframes markSpin {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
};

const Wordmark = ({ size = 14, tone = "paper", italic = true }) => {
  const color = tone === "paper" ? "var(--paper)" :
                tone === "void" ? "var(--void)" :
                tone === "magenta" ? "var(--magenta)" :
                tone === "gold" ? "var(--gold)" : "var(--paper)";
  return (
    <span style={{
      fontFamily: "var(--font-display)",
      fontStyle: italic ? "italic" : "normal",
      fontWeight: 300,
      fontSize: size,
      letterSpacing: "-0.01em",
      color,
      display: "inline-flex",
      alignItems: "center",
      gap: "0.3em",
    }}>
      <svg width={size * 0.85} height={size * 0.85} viewBox="0 0 20 20">
        <circle cx="10" cy="10" r="9" fill="none" stroke={color} strokeWidth="0.8" />
        <circle cx="10" cy="10" r="2" fill={color} />
      </svg>
      Out Of This World
    </span>
  );
};

Object.assign(window, { Mark, Wordmark });