// Reusable visual primitives: the original crest, brackets, icons.

const Brackets = ({ children, className = "", style = {} }) => (
  <div className={`brackets ${className}`} style={style}>
    <span className="br-tr"></span>
    <span className="br-bl"></span>
    {children}
  </div>
);

// Circular "L" badge mimicking the LoL client logo coin —
// dark bezel with a stylized Cinzel "L" in gold, ornamental serif details.
const Crest = ({ size = 32, glow = true }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 64 64"
    fill="none"
    style={{ filter: glow ? "drop-shadow(0 0 4px rgba(200,155,60,0.45))" : "none" }}
    aria-hidden="true"
  >
    <defs>
      <radialGradient id="crestBg" cx="50%" cy="40%" r="60%">
        <stop offset="0%" stopColor="#1a2b40" />
        <stop offset="100%" stopColor="#050C18" />
      </radialGradient>
      <linearGradient id="crestRing" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#F0E6D2" />
        <stop offset="100%" stopColor="#785A28" />
      </linearGradient>
    </defs>
    {/* Outer ring */}
    <circle cx="32" cy="32" r="30" fill="url(#crestBg)" stroke="url(#crestRing)" strokeWidth="2" />
    {/* Inner ring */}
    <circle cx="32" cy="32" r="25" fill="none" stroke="#785A28" strokeWidth="0.6" />
    {/* Stylized L mark */}
    <g fill="#C8AA6E">
      {/* Vertical stroke of the L */}
      <path d="M22 14 L26 14 L29 18 L29 44 L22 44 Z" />
      {/* Horizontal foot */}
      <path d="M29 41 L46 41 L46 50 L26 50 L29 47 Z" />
      {/* Decorative serif crossbar */}
      <rect x="20" y="14" width="11" height="2" />
      {/* Top-right ornament dot */}
      <circle cx="42" cy="20" r="1.6" />
    </g>
  </svg>
);

// Compact icons used throughout — all original, simple geometric shapes.
const I = {
  user: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <circle cx="12" cy="8" r="4"/>
      <path d="M4 21c1-5 5-7 8-7s7 2 8 7"/>
    </svg>
  ),
  gem: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <polygon points="12,2 21,9 12,22 3,9"/>
      <line x1="3" y1="9" x2="21" y2="9"/>
      <line x1="8" y1="9" x2="12" y2="22"/>
      <line x1="16" y1="9" x2="12" y2="22"/>
    </svg>
  ),
  code: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <polyline points="8,7 3,12 8,17"/>
      <polyline points="16,7 21,12 16,17"/>
      <line x1="14" y1="5" x2="10" y2="19"/>
    </svg>
  ),
  scroll: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M6 4h11l3 3v13H6z"/>
      <path d="M17 4v3h3"/>
      <line x1="9" y1="11" x2="17" y2="11"/>
      <line x1="9" y1="15" x2="17" y2="15"/>
    </svg>
  ),
  mail: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <rect x="3" y="6" width="18" height="13"/>
      <polyline points="3,7 12,13 21,7"/>
    </svg>
  ),
  shield: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/>
      <path d="M9 12l2 2 4-5"/>
    </svg>
  ),
  sword: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M14 4l6 0 0 6-9 9-3-3z"/>
      <line x1="11" y1="19" x2="5" y2="13"/>
      <line x1="3" y1="21" x2="7" y2="17"/>
    </svg>
  ),
  bell: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"/>
      <path d="M10 20a2 2 0 0 0 4 0"/>
    </svg>
  ),
  store: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M4 8l1-3h14l1 3"/>
      <path d="M4 8h16v3a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-4 0z"/>
      <path d="M5 11v9h14v-9"/>
    </svg>
  ),
  chest: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <rect x="3" y="9" width="18" height="11"/>
      <path d="M3 9c0-3 4-5 9-5s9 2 9 5"/>
      <rect x="10" y="12" width="4" height="4"/>
    </svg>
  ),
  star: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <polygon points="12,3 14.5,9 21,10 16,14.5 17.5,21 12,17.5 6.5,21 8,14.5 3,10 9.5,9"/>
    </svg>
  ),
  flag: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <path d="M5 3v18"/>
      <path d="M5 4h11l-2 4 2 4H5"/>
    </svg>
  ),
  gear: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <circle cx="12" cy="12" r="3"/>
      <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/>
    </svg>
  ),
  min: (p) => (<svg viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6" {...p}><line x1="5" y1="13" x2="19" y2="13"/></svg>),
  max: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><rect x="5" y="5" width="14" height="14"/></svg>),
  x:   (p) => (<svg viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6" {...p}><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>),
  arrow:(p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13,6 19,12 13,18"/></svg>),
  github:(p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.63-1.33-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.99 1.03-2.69-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.55 9.55 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85v2.74c0 .26.18.58.69.48A10 10 0 0 0 12 2z"/></svg>),
  linkedin:(p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><rect x="3" y="9" width="3.5" height="11"/><circle cx="4.75" cy="5.25" r="1.75"/><path d="M9 9h3.4v1.5h.05c.47-.85 1.62-1.75 3.34-1.75 3.57 0 4.21 2.2 4.21 5.06V20H16.5v-5.32c0-1.27-.02-2.9-1.86-2.9s-2.14 1.4-2.14 2.81V20H9z"/></svg>),
  search:(p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><circle cx="11" cy="11" r="6"/><line x1="16" y1="16" x2="20" y2="20"/></svg>),
  add: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>),
  gift:(p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><rect x="4" y="9" width="16" height="11"/><path d="M3 9h18M12 9V20"/><path d="M12 9c-2 0-4-2-2-4 1.5-1.5 4 0 4 2 0 2 2.5.5 4-1 1.5-1.5 0-3-2-3"/></svg>),
  download:(p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><line x1="12" y1="3" x2="12" y2="15"/><polyline points="6,11 12,17 18,11"/><line x1="4" y1="20" x2="20" y2="20"/></svg>),
  help:(p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><circle cx="12" cy="12" r="9"/><path d="M9 9.5a3 3 0 1 1 4.5 2.6c-.9.5-1.5 1-1.5 2"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/></svg>),
  rocket:(p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><path d="M9 16l-3-3 7-7c2-2 5-2 7 0 0 0-2 5-7 7l-4 3z"/><path d="M9 16l-3 4M11 18l-2 2"/></svg>),
  trophy:(p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}><path d="M7 4h10v6a5 5 0 0 1-10 0z"/><path d="M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3"/><line x1="12" y1="15" x2="12" y2="19"/><line x1="8" y1="20" x2="16" y2="20"/></svg>),
};

// Currency mark (gold coin / blue essence)
const Coin = ({ color = "#C89B3C" }) => (
  <svg width="14" height="14" viewBox="0 0 14 14">
    <circle cx="7" cy="7" r="6" fill="none" stroke={color} strokeWidth="1.2"/>
    <polygon points="7,3 10,7 7,11 4,7" fill={color}/>
  </svg>
);
const Hex = ({ color = "#0BC4E3" }) => (
  <svg width="14" height="14" viewBox="0 0 14 14">
    <polygon points="7,1.5 12,4.5 12,9.5 7,12.5 2,9.5 2,4.5"
      fill="none" stroke={color} strokeWidth="1.2"/>
    <polygon points="7,4 9.5,5.5 9.5,8.5 7,10 4.5,8.5 4.5,5.5" fill={color} opacity="0.9"/>
  </svg>
);

Object.assign(window, { Brackets, Crest, I, Coin, Hex });
