// Three brand marks — one per direction.
// Each comes with `Mark` (icon-only) and `Lockup` (mark + wordmark) variants.

// ============================================================
// 1 · PROP ARENA — bold geometric badge · magenta + cyan gradient
//   Faceted shield with chevron inside, energetic / gaming.
// ============================================================
function PropArenaMark({ size = 32, glow = true }) {
  const id = 'pa-' + (PropArenaMark.__n = (PropArenaMark.__n||0)+1);
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id={id+'-g'} x1="6" y1="4" x2="42" y2="44" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#FF5CF5"/>
          <stop offset="0.5" stopColor="#C36EFF"/>
          <stop offset="1" stopColor="#5CD9FF"/>
        </linearGradient>
        <linearGradient id={id+'-g2'} x1="24" y1="10" x2="24" y2="38">
          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0.95"/>
          <stop offset="1" stopColor="#FFFFFF" stopOpacity="0.6"/>
        </linearGradient>
        {glow && (
          <filter id={id+'-glow'} x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="2.5" result="b"/>
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        )}
      </defs>
      {/* Faceted hex shield */}
      <path d="M24 2 L42 11 L42 30 L24 46 L6 30 L6 11 Z"
            fill={'url(#'+id+'-g)'}
            filter={glow ? 'url(#'+id+'-glow)' : undefined}/>
      {/* Inner cut — slightly darker mask */}
      <path d="M24 8 L37 14.5 L37 28 L24 39 L11 28 L11 14.5 Z"
            fill="#06070D" fillOpacity="0.35"/>
      {/* Chevron / arrow */}
      <path d="M16 26 L24 18 L32 26 L29 26 L24 21 L19 26 Z" fill={'url(#'+id+'-g2)'}/>
      <path d="M16 32 L24 24 L32 32 L29 32 L24 27 L19 32 Z" fill={'url(#'+id+'-g2)'} opacity="0.55"/>
    </svg>
  );
}
function PropArenaLockup({ size = 30, color = '#F4F2FF' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' }}>
      <PropArenaMark size={size}/>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, whiteSpace: 'nowrap' }}>
        <span style={{
          fontFamily: "'Space Grotesk', sans-serif",
          fontWeight: 700, fontSize: size * 0.62,
          letterSpacing: '-0.04em',
          color,
          whiteSpace: 'nowrap',
        }}>Prop <span style={{
          background: 'linear-gradient(90deg, #FF5CF5, #5CD9FF)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text',
          color: 'transparent',
        }}>Arena</span></span>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: size * 0.28,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'rgba(244,242,255,0.45)',
          marginTop: 4,
          whiteSpace: 'nowrap',
        }}>Trader's HUD</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · MINIMAL PROP — refined serif monogram in a ring · ink on cream
//   Italic "m." in a thin circle, editorial/quiet luxury.
// ============================================================
function MinimalPropMark({ size = 32, color = '#14110A', dot = '#B7522A' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
      {/* Outer ring */}
      <circle cx="24" cy="24" r="22.5" fill="none" stroke={color} strokeWidth="1"/>
      {/* Inner serif "m" — drawn as paths */}
      <g transform="translate(24 24)">
        <text
          x="0" y="0"
          textAnchor="middle"
          dominantBaseline="central"
          fontFamily="'Instrument Serif', 'Iowan Old Style', Georgia, serif"
          fontStyle="italic"
          fontSize="26"
          fontWeight="400"
          fill={color}
          dy="0.35em"
          transform="translate(-1 -1)"
        >m</text>
      </g>
      {/* Accent dot */}
      <circle cx="34" cy="33" r="1.8" fill={dot}/>
    </svg>
  );
}
function MinimalPropLockup({ size = 32, color = '#14110A' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, whiteSpace: 'nowrap' }}>
      <MinimalPropMark size={size} color={color}/>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 4, whiteSpace: 'nowrap' }}>
        <span style={{
          fontFamily: "'Instrument Serif', serif",
          fontStyle: 'italic',
          fontSize: size * 0.78,
          letterSpacing: '-0.02em',
          color,
          whiteSpace: 'nowrap',
        }}>Minimal <span style={{ fontStyle: 'normal', fontFamily: "'Inter Tight', sans-serif", fontWeight: 600, fontSize: size * 0.58, letterSpacing: '-0.005em' }}>Prop</span></span>
        <span style={{
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: size * 0.28,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: 'rgba(20,17,10,0.5)',
          fontWeight: 500,
          whiteSpace: 'nowrap',
        }}>Capital, considered</span>
      </div>
    </div>
  );
}

// ============================================================
// 3 · PROP TERMINAL — square brackets with candle inside · electric blue
//   Brackets [_] enclose a mini candlestick, IBM Plex Mono wordmark.
// ============================================================
function PropTerminalMark({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
      {/* Background tile */}
      <rect x="2" y="2" width="44" height="44" rx="6" fill="#2462ff"/>
      <rect x="2" y="2" width="44" height="44" rx="6" fill="url(#pt-grad)"/>
      <defs>
        <linearGradient id="pt-grad" x1="2" y1="2" x2="46" y2="46">
          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0.18"/>
          <stop offset="0.6" stopColor="#FFFFFF" stopOpacity="0"/>
          <stop offset="1" stopColor="#000000" stopOpacity="0.20"/>
        </linearGradient>
      </defs>
      {/* Square brackets */}
      <path d="M11 12 H8 V36 H11" stroke="#fff" strokeWidth="2.4" fill="none" strokeLinecap="square"/>
      <path d="M37 12 H40 V36 H37" stroke="#fff" strokeWidth="2.4" fill="none" strokeLinecap="square"/>
      {/* Candlesticks inside */}
      <line x1="18" y1="13" x2="18" y2="35" stroke="#fff" strokeWidth="1.4" opacity="0.85"/>
      <rect x="16" y="18" width="4" height="10" fill="#fff"/>
      <line x1="24" y1="15" x2="24" y2="33" stroke="#fff" strokeWidth="1.4" opacity="0.85"/>
      <rect x="22" y="20" width="4" height="8" fill="#fff" opacity="0.55"/>
      <line x1="30" y1="11" x2="30" y2="37" stroke="#fff" strokeWidth="1.4" opacity="0.85"/>
      <rect x="28" y="14" width="4" height="14" fill="#fff"/>
      {/* Blinking cursor (decorative) */}
      <rect x="14" y="38" width="6" height="1.5" fill="#fff" opacity="0.85"/>
    </svg>
  );
}
function PropTerminalLockup({ size = 30, color = '#E6EAF2' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap' }}>
      <PropTerminalMark size={size}/>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, whiteSpace: 'nowrap' }}>
        <span style={{
          fontFamily: "'IBM Plex Sans', sans-serif",
          fontWeight: 700,
          fontSize: size * 0.58,
          letterSpacing: '-0.02em',
          color,
          whiteSpace: 'nowrap',
        }}>Prop <span style={{ color: 'oklch(75% 0.18 250)' }}>Terminal</span></span>
        <span style={{
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: size * 0.28,
          letterSpacing: '0.10em',
          textTransform: 'uppercase',
          color: 'rgba(230,234,242,0.45)',
          marginTop: 4,
          whiteSpace: 'nowrap',
        }}>v3.2.1 · institutional</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  PropArenaMark, PropArenaLockup,
  MinimalPropMark, MinimalPropLockup,
  PropTerminalMark, PropTerminalLockup,
});
