/* TransDecode logo — round 3.
   Eight fresh, distinct mark directions. The wordmark stays the same;
   only the mark swaps. All marks are designed to read at 18px favicon size. */

/* Wordmark — confident lowercase, slight weight contrast on "de". */
function Wordmark({ size = 30, color = "var(--ink)", mono = false, accent = "var(--signal)" }) {
  const fontSize = size * 0.62;
  return (
    <span style={{
      fontFamily: "var(--display)",
      fontSize,
      letterSpacing: "-0.025em",
      lineHeight: 1,
      color,
      display: "inline-flex",
      alignItems: "baseline",
      whiteSpace: "nowrap",
    }}>
      <span style={{ fontWeight: 600 }}>trans</span>
      <span style={{ fontWeight: 600, opacity: 0.85 }}>decode</span>
    </span>
  );
}

/* ─────────────── Marks (round 3) ─────────────── */

// V1 — TD Ligature. T-stem doubles as D-spine; D-bowl extends right.
// Bold, monogram, serious.
function MarkLigature({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      {/* T crossbar */}
      <rect x="3" y="6" width="14" height="3.4" fill={color} />
      {/* T/D shared stem */}
      <rect x="8.3" y="6" width="3.4" height="20" fill={color} />
      {/* D bowl */}
      <path d="M11.7 9 H17.5 a8.5 8.5 0 0 1 0 17 H11.7 V22.6 H17.5 a5.1 5.1 0 0 0 0 -10.2 H11.7 Z" fill={color} />
      {/* signal accent: small dot at right */}
      <circle cx="27.5" cy="17.5" r="1.6" fill={accent} />
    </svg>
  );
}

// V2 — Pulse. A precise horizontal line with one engineered blip.
// Reads as monitoring, live data, decoded signal.
function MarkPulse({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 36 32" fill="none" aria-hidden="true">
      <path d="M2 17 L11 17 L13 9 L16 25 L19 13 L21 17 L34 17"
            stroke={color} strokeWidth="2.6" strokeLinecap="square" strokeLinejoin="miter" fill="none" />
      <circle cx="34" cy="17" r="2.2" fill={accent} />
    </svg>
  );
}

// V3 — Vector. A precise rightward arrow built from offset chevrons.
function MarkVector({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <rect x="4" y="14" width="20" height="4" fill={color} />
      <path d="M22 8 L30 16 L22 24 L22 18 L20 18 L20 14 L22 14 Z" fill={accent} />
    </svg>
  );
}

// V4 — Diamond stack. Two rotated squares, outer outline + inner solid.
// Yields a refined yield-sign / engineered reference.
function MarkDiamond({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <rect x="6" y="6" width="20" height="20" transform="rotate(45 16 16)"
            stroke={color} strokeWidth="2.4" fill="none" />
      <rect x="11.5" y="11.5" width="9" height="9" transform="rotate(45 16 16)"
            fill={accent} />
    </svg>
  );
}

// V5 — Double slash. Two bold parallel slashes — road markings, decoded data.
function MarkSlash({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <path d="M9 4 L19 4 L13 28 L3 28 Z" fill={color} />
      <path d="M22 4 L29 4 L23 28 L16 28 Z" fill={accent} />
    </svg>
  );
}

// V6 — Network node. Three connected dots forming a triangle, one accent.
function MarkNode({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <line x1="16" y1="6"  x2="6"  y2="24" stroke={color} strokeWidth="1.6" />
      <line x1="16" y1="6"  x2="26" y2="24" stroke={color} strokeWidth="1.6" />
      <line x1="6"  y1="24" x2="26" y2="24" stroke={color} strokeWidth="1.6" />
      <circle cx="16" cy="6"  r="3.4" fill={color} />
      <circle cx="6"  cy="24" r="3.4" fill={color} />
      <circle cx="26" cy="24" r="3.4" fill={accent} />
    </svg>
  );
}

// V7 — Aperture. Circle bisected by a lane bar; signal dot at center.
function MarkAperture({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <circle cx="16" cy="16" r="13" stroke={color} strokeWidth="2.4" fill="none" />
      <rect x="0" y="14" width="32" height="4" fill={color} />
      <circle cx="16" cy="16" r="3.2" fill={accent} />
    </svg>
  );
}

// V8 — Decoded grid. A 3×3 pixel grid with one cell highlighted — decoding moment.
function MarkGrid({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  const cells = [
    [0,0,1],
    [1,2,0],
    [0,1,1],
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      {cells.map((row, ri) => row.map((v, ci) => {
        if (v === 0) return null;
        const x = 4 + ci * 9;
        const y = 4 + ri * 9;
        return (
          <rect key={ri+"-"+ci} x={x} y={y} width="7" height="7"
                fill={v === 2 ? accent : color} />
        );
      }))}
    </svg>
  );
}

// V9 — Compass quad. 4 directional arrows around a tight center.
function MarkCompass({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      {/* up */}<path d="M16 2 L20 8 L17 8 L17 14 L15 14 L15 8 L12 8 Z" fill={color} />
      {/* right */}<path d="M30 16 L24 20 L24 17 L18 17 L18 15 L24 15 L24 12 Z" fill={accent} />
      {/* down */}<path d="M16 30 L12 24 L15 24 L15 18 L17 18 L17 24 L20 24 Z" fill={color} />
      {/* left */}<path d="M2 16 L8 12 L8 15 L14 15 L14 17 L8 17 L8 20 Z" fill={color} />
    </svg>
  );
}

// V10 — Half-circle merge. Two opposing half-circles forming a yin-flow shape.
function MarkMerge({ size = 30, color = "currentColor", accent = "var(--signal)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <path d="M3 16 a13 13 0 0 1 13 -13 v6 a7 7 0 0 0 0 14 v6 a13 13 0 0 1 -13 -13 Z" fill={color} />
      <path d="M29 16 a13 13 0 0 0 -13 -13 v6 a7 7 0 0 1 0 14 v6 a13 13 0 0 0 13 -13 Z" fill={accent} opacity="0.9" />
    </svg>
  );
}

// None — wordmark only.
function MarkNone() { return null; }

const MARKS = {
  ligature: MarkLigature,
  pulse:    MarkPulse,
  vector:   MarkVector,
  diamond:  MarkDiamond,
  slash:    MarkSlash,
  node:     MarkNode,
  aperture: MarkAperture,
  grid:     MarkGrid,
  compass:  MarkCompass,
  merge:    MarkMerge,
  none:     MarkNone,
};

/* ─────────────── Composite ─────────────── */

function Logo({ size = 30, mono = false, color, variant = "ligature" }) {
  const ink = color || "var(--ink)";
  const Mark = MARKS[variant] || MARKS.ligature;
  return (
    <a href="#top" style={{
      display: "inline-flex",
      alignItems: "center",
      gap: variant === "none" ? 0 : 10,
      color: ink,
    }}>
      {variant !== "none" && (
        <Mark size={size} color={ink} accent={mono ? ink : "var(--signal)"} />
      )}
      <Wordmark size={size} color={ink} mono={mono}
                accent={mono ? ink : "var(--signal)"} />
    </a>
  );
}

function LogoMark({ size = 32, color = "var(--ink)", accent = "var(--signal)", variant = "ligature" }) {
  const Mark = MARKS[variant] || MARKS.ligature;
  return <Mark size={size} color={color} accent={accent} />;
}

window.Logo = Logo;
window.LogoMark = LogoMark;
window.MARKS = MARKS;
