// Logo SVG inline — símbolo G&M Infinite Energy
// Colores: verde #00B127 (cls-1) y amarillo #FFBA03 (cls-2)

const LogoSimbolo = ({ size = 40, invertido = false, className = "" }) => {
  const negro = invertido ? "#FFFFFF" : "#000000";
  return (
    <svg
      viewBox="0 0 756.8 887.22"
      width={size}
      height={(size * 887.22) / 756.8}
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <path
        fill="#00B127"
        d="M154.45,411.73c-.65-5.28.29-10.68,4.24-13.02,2.66-1.58,8.53-2.73,12.1-.55,69.54,42.39,156.09,38.43,221.94-9.18,55.9-40.42,129.92-46.13,190.97-13.51,12.06,6.44,17.04,20,15.73,32.59-11.78,113.67-107.23,199.13-219.9,200.5-113.32,1.37-211.11-82.55-225.09-196.82ZM465.82,474.45c-22.87,17.51-46.4,31.64-73.04,40.91-45.86,15.97-93.43,13-136.66-8.72-25.42-12.77-45.55-29.87-68.2-50.8,32.82,89.62,125.02,142.58,218.43,128.86,91.28-13.4,163.68-88.26,171.6-181.84.3-3.53-3.18-7.69-6.15-9.21-54.66-28.01-118.73-21.66-168.07,13.91-58.29,42.02-131.15,52.7-200.98,29.86,17.43,20.99,38.67,36.99,62.06,49.06,50.17,25.88,101.07,21.59,149.87-4.41,14.35-7.64,26.76-16.65,39.66-26.11,5.2-3.82,12.14-1.85,15.2,2.82,3.5,5.35,1.88,11.38-3.73,15.67Z"
      />
      <path
        fill="#FFBA03"
        d="M398.81,364.35c-67.19,48.93-155.61,54.27-227.71,14.19-11.39-6.33-16.9-18.95-15.06-31.24,16.29-108.88,109.62-188.68,218.21-190.11,109.2-1.44,204.27,76.04,223.64,184.8.64,3.62-.58,8.64-3.53,11.02-2.43,1.96-8.31,3.66-11.82,1.59-58.06-34.24-128.97-30.13-183.73,9.76ZM367.74,256.96c-25.76,8.69-47.44,22.15-68.35,38.34-5.72,4.43-13.21,3.77-16.99-2.35-3.29-5.32-.98-11.53,4.3-15.53,22.56-17.09,46.05-31.33,72.73-40.61,45.34-15.77,92.29-13.1,135.22,7.98,22.87,11.23,41.32,26.52,62.03,43.56-40.79-80.25-129.44-122.18-216.86-105.95-82.67,15.35-149.2,82.17-162.17,167.37-.6,3.94.87,8.01,4.53,10.04,65.72,36.45,144.91,30.08,205.29-13.84,47.06-34.23,104.47-44.83,163.63-28.97-17.3-22.32-40.04-38.89-64.09-51.52-37.49-19.67-78.72-22.2-119.28-8.52Z"
      />
      <path
        fill={negro}
        d="M437.44,623.92c34.13-6.37,41.29-23.37,49.95-11.5,12.11,16.57-29.38,28.4-40.62,30.7-45.51,9.34-92.3,9.69-137.87.78-11.51-2.25-54.99-14.66-42.51-31.43,4.3-5.78,10.77-4.66,16.35-.77,9.33,6.5,20.58,10.06,32.29,12.31,40.54,7.79,81.76,7.51,122.4-.08Z"
      />
      <path
        fill={negro}
        d="M308.98,685.89c-6.68-.99-9.6-6.02-9.47-10.77.14-5.27,4.82-10.75,11.2-9.8,43.84,6.56,87.52,6.09,131.24-.7,5.88-.91,10.6,2.39,12.12,7.58,1.23,4.23-1.12,11.44-7.3,12.47-45.47,7.64-91.34,8.11-137.79,1.22Z"
      />
      <path
        fill={negro}
        d="M392.52,731.59c-12.01-.05-23.29-.38-34.5-1.22-12.67-.95-24.16-14.09-22.82-19.72.35-1.46,3.77-2.93,5.44-2.75,24.66,2.68,48.4,3.34,73.23,1.97,1.33-.07,4.16,1.22,4.84,2.27,2.76,4.25-8.95,19.53-26.18,19.46Z"
      />
    </svg>
  );
};

const LogoCompleto = ({ size = 36, invertido = false, className = "" }) => {
  // Altura = size, ancho proporcional al SVG (1920/887.22 ≈ 2.163)
  const height = size;
  const width = height * (1920 / 887.22);
  const src = invertido ? "assets/brand/logo-oficial-inverso.svg" : "assets/brand/logo-oficial.svg";
  return (
    <div className={`flex items-center ${className}`} style={{ height }}>
      <img
        src={src}
        alt="G&M Infinite Energy"
        style={{ height, width }}
      />
    </div>
  );
};

window.LogoSimbolo = LogoSimbolo;
window.LogoCompleto = LogoCompleto;