// Strahl logo explorations — sharp, beam/cut family.
// Direction: aperture-like + monogram + grok-energy slashes.
// All marks designed for monochrome use, scale to small sizes.

// ============================================================
// KEPT FROM ORIGINAL
// ============================================================

const StrahlMarkA = ({ size = 40, stroke = "currentColor", animated = false }) => (
  // Aperture: a beam striking a vertical slit, exit fanning into 3 rays.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <line x1="2" y1="20" x2="20" y2="20" stroke={stroke} strokeWidth="1.6"/>
    <line x1="22" y1="6" x2="22" y2="34" stroke={stroke} strokeWidth="1.6"/>
    <line x1="24" y1="20" x2="38" y2="14" stroke={stroke} strokeWidth="1.6"/>
    <line x1="24" y1="20" x2="38" y2="20" stroke={stroke} strokeWidth="1.6"/>
    <line x1="24" y1="20" x2="38" y2="26" stroke={stroke} strokeWidth="1.6"/>
    {animated && (
      <circle cx="22" cy="20" r="1.8" fill={stroke}>
        <animate attributeName="cx" values="2;22;38" dur="2.4s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;1;1;0" dur="2.4s" repeatCount="indefinite"/>
      </circle>
    )}
  </svg>
);

const StrahlMarkB = ({ size = 40, stroke = "currentColor" }) => (
  // Monogram S as two stepped rays meeting at a vertex.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path d="M6 12 L20 12 L20 20 L34 20 L34 28" stroke={stroke} strokeWidth="2" fill="none" strokeLinecap="square"/>
    <path d="M6 12 L6 20 L20 20" stroke={stroke} strokeWidth="2" fill="none" strokeLinecap="square"/>
    <path d="M20 28 L34 28" stroke={stroke} strokeWidth="2" fill="none" strokeLinecap="square"/>
  </svg>
);

// ============================================================
// NEW: GROK-FAMILY SHARP CUTS / BEAMS
// ============================================================

const StrahlMarkC = ({ size = 40, stroke = "currentColor" }) => (
  // Hard diagonal slash, pure beam — Grok-like, but asymmetric edge.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path
      d="M30 4 L36 4 L10 36 L4 36 Z"
      fill={stroke}
    />
  </svg>
);

const StrahlMarkD = ({ size = 40, stroke = "currentColor" }) => (
  // Slash split by an aperture gap — beam interrupted by verifier.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path d="M30 4 L36 4 L23 20 L17 20 Z" fill={stroke}/>
    <path d="M23 20 L17 20 L4 36 L10 36 Z" fill={stroke}/>
  </svg>
);

const StrahlMarkE = ({ size = 40, stroke = "currentColor" }) => (
  // Tapered ray — wider at origin, narrowing to a point. A real Strahl.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path
      d="M32 6 L36 6 L8 36 L8 32 Z"
      fill={stroke}
    />
  </svg>
);

const StrahlMarkF = ({ size = 40, stroke = "currentColor" }) => (
  // Two parallel slashes (twin beams / dataflow channels).
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path d="M22 4 L28 4 L18 36 L12 36 Z" fill={stroke}/>
    <path d="M32 4 L36 4 L34 12 L30 12 Z" fill={stroke}/>
    <path d="M10 28 L6 28 L4 36 L8 36 Z" fill={stroke}/>
  </svg>
);

const StrahlMarkG = ({ size = 40, stroke = "currentColor" }) => (
  // Slash with a square bracket — beam entering a checked region.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <rect x="4" y="6" width="2" height="28" fill={stroke}/>
    <rect x="4" y="6" width="8" height="2" fill={stroke}/>
    <rect x="4" y="32" width="8" height="2" fill={stroke}/>
    <path d="M30 6 L36 6 L20 34 L14 34 Z" fill={stroke}/>
  </svg>
);

const StrahlMarkH = ({ size = 40, stroke = "currentColor" }) => (
  // Stylized S as a single fractured beam — two offset slashes that compose into S.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path d="M32 6 L36 6 L24 22 L20 22 Z" fill={stroke}/>
    <path d="M20 18 L20 22 L4 22 L4 18 Z" fill={stroke}/>
    <path d="M16 18 L20 18 L8 34 L4 34 Z" fill={stroke}/>
  </svg>
);

const StrahlMarkI = ({ size = 40, stroke = "currentColor" }) => (
  // Aperture variant 2: vertical bar slit, with thicker ray hitting and fanning out.
  // (filled, sharper, more Grok-energy)
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <rect x="3" y="19" width="14" height="2.4" fill={stroke}/>
    <rect x="20" y="6"  width="2.4" height="28" fill={stroke}/>
    <path d="M25 14 L38 11 L38 13 L25 16 Z" fill={stroke}/>
    <rect x="25" y="19" width="13" height="2.4" fill={stroke}/>
    <path d="M25 24 L38 27 L38 29 L25 26 Z" fill={stroke}/>
  </svg>
);

const StrahlMarkJ = ({ size = 40, stroke = "currentColor" }) => (
  // Reductive S-monogram out of two angled bars — geometric, sharp.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <path d="M30 6 L36 6 L20 22 L14 22 Z" fill={stroke}/>
    <path d="M26 18 L20 22 L4 22 L4 18 L22 18 Z" fill={stroke}/>
    <path d="M14 22 L20 22 L4 38 L4 32 Z" fill={stroke}/>
  </svg>
);

// ============================================================
// 90s TECH-MARK FAMILY
// Sun ambigram, SGI cube, NeXT block, IBM stripes, wireframe.
// ============================================================

const StrahlMarkK = ({ size = 40, stroke = "currentColor" }) => (
  // IBM-style: striped slab spelling S.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    {[0,1,2,3,4,5,6].map(i => (
      <rect key={i} x="6" y={8 + i*3.4} width="28" height="1.6" fill={stroke}/>
    ))}
    <rect x="6"  y="8"    width="2"  height="14" fill="var(--paper, #FAFAF8)"/>
    <rect x="32" y="20"   width="2"  height="14" fill="var(--paper, #FAFAF8)"/>
    <rect x="20" y="8"    width="14" height="3.4" fill={stroke}/>
    <rect x="6"  y="20"   width="28" height="3.4" fill={stroke}/>
    <rect x="6"  y="32"   width="14" height="3.4" fill={stroke}/>
  </svg>
);

const StrahlMarkL = ({ size = 40, stroke = "currentColor" }) => (
  // SGI-style isometric cube: interlocking 3D outline forming an S-block.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="1.6" fill="none" strokeLinejoin="miter">
      <path d="M8 14 L20 8 L32 14 L20 20 Z"/>
      <path d="M8 14 L8 26 L20 32 L20 20"/>
      <path d="M32 14 L32 26 L20 32"/>
      <path d="M14 11 L14 23 L26 29"/>
      <path d="M26 11 L26 23"/>
    </g>
  </svg>
);

const StrahlMarkM = ({ size = 40, stroke = "currentColor" }) => (
  // NeXT-style: tilted square slab with the wordmark idea — bold S inside.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g transform="rotate(-12 20 20)">
      <rect x="4" y="8" width="32" height="24" fill={stroke}/>
      <path
        d="M12 14 L26 14 L26 18 L16 18 L16 19 L26 19 L26 26 L12 26 L12 22 L22 22 L22 21 L12 21 Z"
        fill="var(--paper, #FAFAF8)"
      />
    </g>
  </svg>
);

const StrahlMarkN = ({ size = 40, stroke = "currentColor" }) => (
  // Sun-Microsystems-style ambigram: interlocking S-strokes, repeating motif.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="2.4" fill="none" strokeLinecap="square">
      <path d="M6 12 L18 12 L18 20 L30 20"/>
      <path d="M10 20 L22 20 L22 28 L34 28"/>
      <path d="M6 28 L18 28"/>
      <path d="M22 12 L34 12"/>
    </g>
  </svg>
);

const StrahlMarkO = ({ size = 40, stroke = "currentColor" }) => (
  // Borland-style chevron stack pointing right.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g fill={stroke}>
      <path d="M6  10 L14 10 L22 20 L14 30 L6  30 L14 20 Z"/>
      <path d="M18 10 L26 10 L34 20 L26 30 L18 30 L26 20 Z"/>
    </g>
  </svg>
);

const StrahlMarkP = ({ size = 40, stroke = "currentColor" }) => (
  // SGI-cube simpler: pure isometric S built of two stacked rhombuses.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g fill={stroke}>
      <path d="M20 4  L34 12 L20 20 L6  12 Z" opacity="0.95"/>
      <path d="M20 20 L34 28 L20 36 L6  28 Z" opacity="0.55"/>
    </g>
    <g stroke="var(--paper, #FAFAF8)" strokeWidth="1.2" fill="none">
      <path d="M14 8  L14 16"/>
      <path d="M26 8  L26 16"/>
      <path d="M14 24 L14 32"/>
      <path d="M26 24 L26 32"/>
    </g>
  </svg>
);

const StrahlMarkQ = ({ size = 40, stroke = "currentColor" }) => (
  // Atari-fujitsu-style: vertical bars with a curved spine.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g fill={stroke}>
      <rect x="8"  y="6" width="3" height="28"/>
      <rect x="18.5" y="6" width="3" height="28"/>
      <rect x="29" y="6" width="3" height="28"/>
    </g>
    <path d="M8 12 Q20 6 32 12" stroke={stroke} strokeWidth="2" fill="none"/>
    <path d="M8 28 Q20 34 32 28" stroke={stroke} strokeWidth="2" fill="none"/>
  </svg>
);

const StrahlMarkR = ({ size = 40, stroke = "currentColor" }) => (
  // Wireframe S — early 3D-modeling-package energy. Quad-mesh letterform.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="1.1" fill="none">
      <rect x="6"  y="8"  width="28" height="8"/>
      <rect x="6"  y="16" width="28" height="8"/>
      <rect x="6"  y="24" width="28" height="8"/>
      <line x1="6"  y1="8"  x2="34" y2="32"/>
      <line x1="34" y1="8"  x2="6"  y2="32"/>
      <line x1="20" y1="8"  x2="20" y2="32"/>
    </g>
  </svg>
);

const StrahlMarkS = ({ size = 40, stroke = "currentColor" }) => (
  // DEC-style: interlocked rectangles forming a subtle S/Z notch.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g fill={stroke}>
      <rect x="6"  y="10" width="22" height="6"/>
      <rect x="12" y="17" width="22" height="6"/>
      <rect x="6"  y="24" width="22" height="6"/>
    </g>
  </svg>
);

const StrahlMarkT = ({ size = 40, stroke = "currentColor" }) => (
  // Apple-rainbow-stripes shape, in mono: angled slab with horizontal striping.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <defs>
      <clipPath id="strahl-stripe-clip">
        <path d="M28 6 L34 6 L12 34 L6 34 Z"/>
      </clipPath>
    </defs>
    <g clipPath="url(#strahl-stripe-clip)" fill={stroke}>
      <rect x="0" y="6"  width="40" height="3"/>
      <rect x="0" y="12" width="40" height="3"/>
      <rect x="0" y="18" width="40" height="3"/>
      <rect x="0" y="24" width="40" height="3"/>
      <rect x="0" y="30" width="40" height="3"/>
    </g>
  </svg>
);

const StrahlMarkU = ({ size = 40, stroke = "currentColor" }) => (
  // Wireframe prism — semantic: "Strahl" = ray of light. Beam enters left,
  // refracts through a 3D triangular prism, fans into 3 exit rays.
  <svg width={size} height={size} viewBox="0 0 48 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="1.1" fill="none" strokeLinejoin="miter" strokeLinecap="square">
      {/* incoming beam */}
      <line x1="2" y1="20" x2="16" y2="20"/>
      {/* prism: front triangle */}
      <path d="M16 8 L28 20 L16 32 Z"/>
      {/* prism: back triangle (offset for depth) */}
      <path d="M22 6 L34 18 L22 30 Z" opacity="0.55"/>
      {/* depth edges connecting front to back */}
      <line x1="16" y1="8"  x2="22" y2="6"  opacity="0.55"/>
      <line x1="28" y1="20" x2="34" y2="18" opacity="0.55"/>
      <line x1="16" y1="32" x2="22" y2="30" opacity="0.55"/>
      {/* internal mesh lines on front face */}
      <line x1="22" y1="14" x2="22" y2="26" opacity="0.35"/>
      <line x1="16" y1="20" x2="28" y2="20" opacity="0.35"/>
      {/* refracted exit rays */}
      <line x1="34" y1="18" x2="46" y2="10"/>
      <line x1="34" y1="18" x2="46" y2="18"/>
      <line x1="34" y1="18" x2="46" y2="26"/>
    </g>
  </svg>
);

const StrahlMarkV = ({ size = 40, stroke = "currentColor" }) => (
  // Wireframe S — quad-mesh letterform sculpted as if extruded in 3D.
  // Syntactic: literally an S, but rendered as if in a 90s 3D modeler.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="1.1" fill="none" strokeLinejoin="miter" strokeLinecap="square">
      {/* front-face S outline (stroked path) */}
      <path d="M30 8 L10 8 L10 18 L30 18 L30 30 L10 30"/>
      {/* depth offset (3D shadow plane) */}
      <path d="M33 6 L13 6 L13 16 L33 16 L33 28 L13 28" opacity="0.5"/>
      {/* connecting depth edges */}
      <line x1="30" y1="8"  x2="33" y2="6"  opacity="0.5"/>
      <line x1="10" y1="8"  x2="13" y2="6"  opacity="0.5"/>
      <line x1="10" y1="18" x2="13" y2="16" opacity="0.5"/>
      <line x1="30" y1="18" x2="33" y2="16" opacity="0.5"/>
      <line x1="30" y1="30" x2="33" y2="28" opacity="0.5"/>
      <line x1="10" y1="30" x2="13" y2="28" opacity="0.5"/>
      {/* mesh subdivisions across the front face */}
      <line x1="17" y1="8"  x2="17" y2="18" opacity="0.3"/>
      <line x1="24" y1="8"  x2="24" y2="18" opacity="0.3"/>
      <line x1="17" y1="18" x2="17" y2="30" opacity="0.3"/>
      <line x1="24" y1="18" x2="24" y2="30" opacity="0.3"/>
    </g>
  </svg>
);

const StrahlMarkW = ({ size = 40, stroke = "currentColor" }) => (
  // Mesh S — isometric projection. The S sits on a 30° iso grid like an SGI demo.
  <svg width={size} height={size} viewBox="0 0 44 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="1.1" fill="none" strokeLinejoin="miter" strokeLinecap="square">
      {/* iso S front face (skewed) */}
      <path d="M34 8 L14 8 L10 18 L30 18 L26 28 L6 28"/>
      {/* iso depth edges */}
      <line x1="34" y1="8"  x2="38" y2="4"  opacity="0.55"/>
      <line x1="14" y1="8"  x2="18" y2="4"  opacity="0.55"/>
      <line x1="10" y1="18" x2="14" y2="14" opacity="0.55"/>
      <line x1="30" y1="18" x2="34" y2="14" opacity="0.55"/>
      <line x1="26" y1="28" x2="30" y2="24" opacity="0.55"/>
      <line x1="6"  y1="28" x2="10" y2="24" opacity="0.55"/>
      {/* back face */}
      <path d="M38 4 L18 4 L14 14 L34 14 L30 24 L10 24" opacity="0.5"/>
      {/* internal mesh */}
      <line x1="22" y1="8"  x2="18" y2="18" opacity="0.3"/>
      <line x1="22" y1="18" x2="18" y2="28" opacity="0.3"/>
    </g>
  </svg>
);

const StrahlMarkX = ({ size = 40, stroke = "currentColor" }) => (
  // Mesh S — dense tessellation. More polygons, denser quad mesh on the face.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="0.9" fill="none" strokeLinejoin="miter" strokeLinecap="square">
      {/* front S outline */}
      <path d="M30 8 L10 8 L10 19 L30 19 L30 30 L10 30"/>
      {/* horizontal mesh divisions */}
      <line x1="10" y1="11" x2="30" y2="11" opacity="0.35"/>
      <line x1="10" y1="14" x2="30" y2="14" opacity="0.35"/>
      <line x1="10" y1="22" x2="30" y2="22" opacity="0.35"/>
      <line x1="10" y1="26" x2="30" y2="26" opacity="0.35"/>
      {/* vertical mesh divisions */}
      <line x1="14" y1="8"  x2="14" y2="19" opacity="0.35"/>
      <line x1="18" y1="8"  x2="18" y2="19" opacity="0.35"/>
      <line x1="22" y1="8"  x2="22" y2="19" opacity="0.35"/>
      <line x1="26" y1="8"  x2="26" y2="19" opacity="0.35"/>
      <line x1="14" y1="19" x2="14" y2="30" opacity="0.35"/>
      <line x1="18" y1="19" x2="18" y2="30" opacity="0.35"/>
      <line x1="22" y1="19" x2="22" y2="30" opacity="0.35"/>
      <line x1="26" y1="19" x2="26" y2="30" opacity="0.35"/>
      {/* diagonals — quad triangulation */}
      <line x1="10" y1="8"  x2="30" y2="19" opacity="0.2"/>
      <line x1="30" y1="19" x2="10" y2="30" opacity="0.2"/>
    </g>
  </svg>
);

const StrahlMarkY = ({ size = 40, stroke = "currentColor" }) => (
  // Mesh S — vertices only, no edges drawn between divisions.
  // Looks like a control-cage of an S surface.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="1.1" fill="none">
      <path d="M30 8 L10 8 L10 19 L30 19 L30 30 L10 30"/>
    </g>
    <g fill={stroke}>
      {/* control vertices on the S path */}
      {[
        [10,8],[14,8],[18,8],[22,8],[26,8],[30,8],
        [10,13.5],[10,19],
        [14,19],[18,19],[22,19],[26,19],[30,19],
        [30,24.5],[30,30],
        [26,30],[22,30],[18,30],[14,30],[10,30],
      ].map(([x,y],i) => (
        <rect key={i} x={x-1.4} y={y-1.4} width="2.8" height="2.8"/>
      ))}
    </g>
  </svg>
);

const StrahlMarkZ = ({ size = 40, stroke = "currentColor" }) => (
  // Mesh S — twisted/perspective: front face skewed as if rotated in space.
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
    <g stroke={stroke} strokeWidth="1.1" fill="none" strokeLinejoin="miter" strokeLinecap="square">
      {/* perspective S — top narrower than bottom */}
      <path d="M30 8 L12 8 L9 18 L29 18 L26 30 L6 30"/>
      {/* mesh */}
      <line x1="9"  y1="18" x2="12" y2="8"  opacity="0.4"/>
      <line x1="29" y1="18" x2="30" y2="8"  opacity="0.4"/>
      <line x1="26" y1="30" x2="29" y2="18" opacity="0.4"/>
      <line x1="6"  y1="30" x2="9"  y2="18" opacity="0.4"/>
      <line x1="18" y1="8"  x2="16" y2="18" opacity="0.3"/>
      <line x1="24" y1="8"  x2="23" y2="18" opacity="0.3"/>
      <line x1="22" y1="18" x2="20" y2="30" opacity="0.3"/>
      <line x1="14" y1="18" x2="13" y2="30" opacity="0.3"/>
      {/* back-plane shadow */}
      <path d="M33 5 L15 5 L12 15 L32 15 L29 27 L9 27" opacity="0.4"/>
      <line x1="30" y1="8"  x2="33" y2="5"  opacity="0.4"/>
      <line x1="6"  y1="30" x2="9"  y2="27" opacity="0.4"/>
    </g>
  </svg>
);

const LOGO_VARIANTS = {
  A: { mark: StrahlMarkA, name: "Aperture",     note: "Beam through verifier slit" },
  B: { mark: StrahlMarkB, name: "Monogram",     note: "Stepped S as two rays" },
  C: { mark: StrahlMarkC, name: "Slash",        note: "Pure beam — single hard cut" },
  D: { mark: StrahlMarkD, name: "Cleft",        note: "Beam broken by an aperture gap" },
  E: { mark: StrahlMarkE, name: "Taper",        note: "Ray narrowing to a point" },
  F: { mark: StrahlMarkF, name: "Twin",         note: "Parallel slashes — dual layer" },
  G: { mark: StrahlMarkG, name: "Bracket",      note: "Beam entering a checked region" },
  H: { mark: StrahlMarkH, name: "Fracture",     note: "S composed of three offset cuts" },
  I: { mark: StrahlMarkI, name: "Aperture II",  note: "Sharper aperture, filled forms" },
  J: { mark: StrahlMarkJ, name: "Mono II",      note: "S of three angled bars" },
  K: { mark: StrahlMarkK, name: "Slab",         note: "90s — IBM-style striped S" },
  L: { mark: StrahlMarkL, name: "Iso Cube",     note: "90s — SGI-style 3D wireframe" },
  M: { mark: StrahlMarkM, name: "Tilted Block", note: "90s — NeXT-style slab + S" },
  N: { mark: StrahlMarkN, name: "Ambigram",     note: "90s — Sun-style interlocked S" },
  O: { mark: StrahlMarkO, name: "Chevrons",     note: "90s — Borland-style stack" },
  P: { mark: StrahlMarkP, name: "Stacked Iso",  note: "90s — twin-rhombus 3D S" },
  Q: { mark: StrahlMarkQ, name: "Pillars",      note: "90s — Atari/Fujitsu spine bars" },
  R: { mark: StrahlMarkR, name: "Wireframe",    note: "90s — quad-mesh letterform" },
  S: { mark: StrahlMarkS, name: "Notch",        note: "90s — DEC-style stacked bars" },
  T: { mark: StrahlMarkT, name: "Stripes",      note: "90s — Apple-stripes slash (mono)" },
  U: { mark: StrahlMarkU, name: "Prism Mesh",   note: "Wireframe prism refracting a beam" },
  V: { mark: StrahlMarkV, name: "Mesh S",       note: "Wireframe S — extruded letterform" },
  W: { mark: StrahlMarkW, name: "Mesh S · Iso", note: "Mesh S in isometric projection" },
  X: { mark: StrahlMarkX, name: "Mesh S · Dense", note: "Mesh S, denser tessellation" },
  Y: { mark: StrahlMarkY, name: "Mesh S · Cage",  note: "Mesh S — control-cage vertices" },
  Z: { mark: StrahlMarkZ, name: "Mesh S · Persp", note: "Mesh S in perspective skew" },
};

const StrahlWordmark = ({ size = 28, weight = 500 }) => (
  <span style={{
    fontFamily: "'Inter Tight', Inter, system-ui, sans-serif",
    fontWeight: weight,
    fontSize: size,
    letterSpacing: "-0.02em",
    lineHeight: 1,
    display: "inline-flex",
    alignItems: "center",
  }}>
    strahl
  </span>
);

const StrahlLockup = ({ variant = "A", size = 28, animated = false }) => {
  const Mark = LOGO_VARIANTS[variant].mark;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.42 }}>
      <Mark size={size * 1.35} animated={animated}/>
      <StrahlWordmark size={size}/>
    </span>
  );
};

Object.assign(window, {
  StrahlMarkA, StrahlMarkB, StrahlMarkC, StrahlMarkD,
  StrahlMarkE, StrahlMarkF, StrahlMarkG, StrahlMarkH,
  StrahlMarkI, StrahlMarkJ, StrahlMarkK, StrahlMarkL,
  StrahlMarkM, StrahlMarkN, StrahlMarkO, StrahlMarkP,
  StrahlMarkQ, StrahlMarkR, StrahlMarkS, StrahlMarkT,
  StrahlMarkU, StrahlMarkV, StrahlMarkW, StrahlMarkX,
  StrahlMarkY, StrahlMarkZ,
  LOGO_VARIANTS, StrahlWordmark, StrahlLockup,
});