/* Epic Custom Lighting — SVG logo components.
   "EPIC" wordmark with the signature gold light-beam inside the E counter. */

const EpicLogo = ({ variant = "horizontal", invert = false, className = "", style = {} }) => {
  // Dark version (cream "EPIC" on near-black) is canonical; use it on dark surfaces.
  // For light surfaces, use the original (black "EPIC" on white).
  const src = invert ? 'assets/epic-logo-dark.png' : 'assets/epic-logo.png';
  return (
    <img
      src={src}
      alt="Epic Custom Lighting"
      className={className}
      style={{ ...style, display: 'block', objectFit: 'contain', height: "160px", width: "auto" }} />);


};

const SparkleStar = ({ size = 24, color = "#c9a961", className = "", style = {} }) =>
<svg viewBox="-50 -50 100 100" width={size} height={size} className={className} style={style} xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,-44 6,-6 44,0 6,6 0,44 -6,6 -44,0 -6,-6" fill={color} />
    <polygon points="0,-20 2,-2 20,0 2,2 0,20 -2,2 -20,0 -2,-2" fill={color} opacity="0.6" />
  </svg>;


Object.assign(window, { EpicLogo, SparkleStar });