// Shared roster + match data + scribble SVGs for WEC C variants.

const ROSTER = [
  { handle: 'Cazkla',   agent: 'Neon',     role: 'Duelist',     num: '67', twitter: '@Normalkazu2', img: 'uploads/pasted-1778401215314-0.png' },
  { handle: 'tarkun',   agent: 'Chamber',  role: 'Sentinel',    num: '47', twitter: '@tarkuuun',   img: 'uploads/pasted-1778401631279-0.png' },
  { handle: 'distinct', agent: 'Clove',    role: 'Controller',  num: '01', twitter: '@badistinct',  img: 'uploads/pasted-1778401645390-0.png' },
  { handle: 'RONY',     agent: 'Sage',     role: 'Sentinel',    num: '09', twitter: '@rony_vlrt',   img: 'uploads/pasted-1778401657725-0.png' },
  { handle: 'Shimons',  agent: 'Jett',     role: 'Duelist',     num: '11', twitter: '@shimon_penc_cg', img: 'uploads/pasted-1778401703864-0.png' },
  { handle: '3d3r',     agent: 'Killjoy',  role: 'Sentinel',    num: '03', twitter: '@3d3rvl',      img: 'uploads/pasted-1778401669964-0.png' },
];

const MATCHES = [
  { date: '2026.05.11', day: 'MON', time: '16:30', vs: 'KING GUY',        format: 'BO3', tag: 'NEXT UP' },
  { date: '2026.05.12', day: 'TUE', time: '16:30', vs: 'Kirihana Academy',format: 'BO3', tag: 'GAME DAY' },
  { date: '2026.05.12', day: 'TUE', time: '19:30', vs: 'IGZIST',          format: 'BO3', tag: 'GAME DAY' },
  { date: '2026.05.13', day: 'WED', time: '16:30', vs: 'MURASH GAMING',   format: 'BO3', tag: 'GAME DAY' },
  { date: '2026.05.13', day: 'WED', time: '19:30', vs: 'RIDDLE',          format: 'BO3', tag: 'GAME DAY' },
];

// Scribble decorations — rough hand-drawn shapes used as accents.
function ScribbleSpeech({ color = '#FF1AAE', style = {}, flip = false }) {
  return (
    <svg viewBox="0 0 200 140" style={{ ...style, transform: flip ? 'scaleX(-1)' : 'none' }} fill="none" stroke={color} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 30 Q15 15 35 12 L165 8 Q188 10 188 35 L188 78 Q188 100 165 102 L90 105 L62 132 L70 100 L35 96 Q15 94 15 78 Z" />
    </svg>
  );
}

function ScribbleHeart({ color = '#E11D2E', style = {} }) {
  return (
    <svg viewBox="0 0 100 90" style={style} fill="none" stroke={color} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M50 78 C 20 58, 8 42, 14 25 C 20 10, 40 12, 50 28 C 60 12, 80 10, 86 25 C 92 42, 80 58, 50 78 Z" />
    </svg>
  );
}

function ScribbleBolt({ color = '#FFD60A', style = {} }) {
  return (
    <svg viewBox="0 0 100 160" style={style} fill={color} stroke={color} strokeWidth="3" strokeLinejoin="round">
      <path d="M55 6 L8 88 L42 92 L30 154 L92 64 L55 60 L70 6 Z" />
    </svg>
  );
}

function ScribbleStar({ color = '#27FF4E', style = {} }) {
  return (
    <svg viewBox="0 0 100 100" style={style} fill="none" stroke={color} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M50 8 L60 40 L94 42 L66 62 L76 94 L50 74 L24 94 L34 62 L6 42 L40 40 Z" />
    </svg>
  );
}

function ScribbleCircle({ color = '#FF1AAE', style = {} }) {
  return (
    <svg viewBox="0 0 200 100" style={style} fill="none" stroke={color} strokeWidth="5" strokeLinecap="round">
      <path d="M20 50 Q20 18 100 14 Q182 14 184 50 Q184 84 100 86 Q18 86 22 52" />
    </svg>
  );
}

function ScribbleArrow({ color = '#E11D2E', style = {} }) {
  return (
    <svg viewBox="0 0 200 60" style={style} fill="none" stroke={color} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 30 Q60 5 110 30 Q140 45 180 28" />
      <path d="M180 28 L165 18 M180 28 L168 42" />
    </svg>
  );
}

// Stylized smiling-mouth scribble (the WEC mascot face — keep it generic, not a recreation)
function ScribbleSmile({ color = '#C8102E', style = {} }) {
  return (
    <svg viewBox="0 0 240 180" style={style} fill="none" stroke={color} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round">
      {/* eyes */}
      <path d="M70 40 Q88 22 106 42" />
      <path d="M150 40 Q168 22 186 42" />
      {/* big curved smile */}
      <path d="M30 96 Q70 150 130 138 Q190 130 220 90 Q200 116 130 122 Q70 124 30 96 Z" />
    </svg>
  );
}

// Halftone dot pattern for comic-book backgrounds.
function HalftonePattern({ color = '#7a0a18', size = 8, opacity = 0.35 }) {
  const id = React.useMemo(() => 'ht-' + Math.random().toString(36).slice(2, 8), []);
  return (
    <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity }} aria-hidden="true">
      <defs>
        <pattern id={id} x="0" y="0" width={size} height={size} patternUnits="userSpaceOnUse">
          <circle cx={size / 2} cy={size / 2} r={size / 4} fill={color} />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${id})`} />
    </svg>
  );
}

// Sunburst rays, comic-style.
function Sunburst({ color = '#a6071a', count = 24, style = {} }) {
  const rays = [];
  for (let i = 0; i < count; i++) {
    const a = (i / count) * 360;
    rays.push(<polygon key={i} points="0,-200 -10,0 10,0" fill={color} transform={`rotate(${a})`} />);
  }
  return (
    <svg viewBox="-200 -200 400 400" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', ...style }}>
      <g>{rays}</g>
    </svg>
  );
}

// WECC logotype mark — chunky red blocks (no gap, headline style), smile above.
// (Stylized rendition; not a literal copy of the official logo.)
function WeccMark({ size = 120, smileColor = '#C8102E', textColor = '#1a0a0d', style = {} }) {
  return (
    <div style={{ display: 'inline-block', position: 'relative', width: size, height: size * 1.05, ...style }}>
      <svg viewBox="0 0 220 210" width="100%" height="100%">
        {/* smile above */}
        <g stroke={smileColor} strokeWidth="5" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M65 28 Q80 14 98 30" />
          <path d="M128 28 Q143 14 160 30" />
          <path d="M40 70 Q70 110 115 102 Q165 96 185 64 Q170 88 115 92 Q68 90 40 70 Z" />
        </g>
        {/* WECC — no gap, headline-style */}
        <g fill={textColor} fontFamily='"Anton", "Bebas Neue", Impact, sans-serif' fontWeight="900">
          <text x="110" y="170" textAnchor="middle" fontSize="68" letterSpacing="-2">WECC</text>
        </g>
        {/* katakana reading */}
        <text x="110" y="198" textAnchor="middle" fill={textColor} fontFamily='"Noto Sans JP", sans-serif' fontWeight="800" fontSize="13" letterSpacing="2">ウェックシー</text>
      </svg>
    </div>
  );
}

// Marquee strip of repeating text — useful as a top/bottom band.
function Marquee({ text = '#WECCWIN · WEC C FOREVER · ', speed = 30, color = '#fff', bg = '#C8102E', style = {} }) {
  const repeated = Array.from({ length: 10 }, () => text).join('');
  return (
    <div style={{ overflow: 'hidden', whiteSpace: 'nowrap', background: bg, color, ...style }}>
      <div style={{ display: 'inline-block', animation: `marquee ${speed}s linear infinite`, paddingLeft: '100%' }}>
        {repeated}
      </div>
      <style>{`@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </div>
  );
}

Object.assign(window, {
  ROSTER, MATCHES,
  ScribbleSpeech, ScribbleHeart, ScribbleBolt, ScribbleStar, ScribbleCircle, ScribbleArrow, ScribbleSmile,
  HalftonePattern, Sunburst, WeccMark, Marquee,
});