// Brand SVG components — uses real icons from /assets/icons (brand-supplied)
// SVGs from the brand book have <path class="st0"> without fill — we inject fill via CSS.

const ICON_FILE = {
  brote: "assets/icons/brote.svg",
  check: "assets/icons/check.svg",
  comercio: "assets/icons/comercio.svg",
  industria: "assets/icons/industria.svg",
  reciclaje: "assets/icons/reciclaje.svg",
  seguridad: "assets/icons/seguridad.svg",
  tramite: "assets/icons/tramite.svg",
  escudo: "assets/icons/escudo.svg",
  equipo: "assets/icons/equipo.svg",
  chat: "assets/icons/chat.svg",
  whatsapp: "assets/icons/whatsapp.svg",
  mail: "assets/icons/mail.svg",
  ubicacion: "assets/icons/ubicacion.svg",
  instagram: "assets/icons/instagram.svg",
  calendario: "assets/icons/calendario.svg",
  corazon: "assets/icons/corazon.svg",
  cruz: "assets/icons/cruz.svg",
  advertencia: "assets/icons/advertencia.svg",
  usuario: "assets/icons/usuario.svg",
  pulgar: "assets/icons/pulgar.svg",
  isotipo: "assets/icons/isotipo.svg",
};

// Cache of fetched SVG markup
const svgCache = {};

const Icon = ({ name, color = "currentColor", size = 36, style = {} }) => {
  const [markup, setMarkup] = React.useState(svgCache[name] || null);
  React.useEffect(() => {
    if (svgCache[name]) { setMarkup(svgCache[name]); return; }
    const file = ICON_FILE[name];
    if (!file) return;
    fetch(file).then(r => r.text()).then(txt => {
      // Strip <?xml...?>, replace fill colors, ensure currentColor inheritance.
      let cleaned = txt.replace(/<\?xml[^?]*\?>/g, "")
                       .replace(/<!--[\s\S]*?-->/g, "");
      // Strip width/height from <svg> root so it scales to container; force fill=currentColor
      cleaned = cleaned.replace(/<svg([^>]*)>/, (m, attrs) => {
        const a = attrs.replace(/\s(width|height)="[^"]*"/g, "")
                       .replace(/style="[^"]*"/g, "");
        return `<svg${a} width="100%" height="100%" fill="currentColor" style="display:block">`;
      });
      // Remove any embedded <style> that may set st0 black
      cleaned = cleaned.replace(/<style[\s\S]*?<\/style>/g, "");
      svgCache[name] = cleaned;
      setMarkup(cleaned);
    });
  }, [name]);

  if (!markup) {
    return <span style={{ display: "inline-block", width: size, height: size, ...style }}/>;
  }
  return (
    <span
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: size, height: size, color, lineHeight: 0, ...style
      }}
      dangerouslySetInnerHTML={{ __html: markup }}
    />
  );
};

// Logo: uses real brand PNGs
const LogoFull = ({ variant = "mint", height = 36 }) => {
  const src = variant === "black" ? "assets/logos/grupogreen-black.png?v=2" : "assets/logos/grupogreen-mint.png?v=2";
  return <img src={src} alt="Grupo Green" style={{ height, width: "auto", display: "block" }}/>;
};

const Logo = ({ variant = "mint", size = 40 }) => {
  const src = variant === "black" ? "assets/logos/isotipo-black.png?v=2" : "assets/logos/isotipo-mint.png?v=2";
  return <img src={src} alt="Grupo Green" style={{ height: size, width: size, objectFit: "contain", display: "block" }}/>;
};

// Decorative big brote graphic
const Brote = ({ color = "#40C1AC", size = 200, style = {} }) => (
  <Icon name="brote" color={color} size={size} style={style}/>
);

// Aliases used by older sections
const IconHabilitacion = (p) => <Icon name="tramite" {...p}/>;
const IconAmbiental    = (p) => <Icon name="brote" {...p}/>;
const IconResiduos     = (p) => <Icon name="reciclaje" {...p}/>;
const IconSeguridad    = (p) => <Icon name="seguridad" {...p}/>;

const IconWhatsapp = ({ color = "#fff", size = 24 }) => (
  <Icon name="whatsapp" color={color} size={size}/>
);

const IconArrow = ({ color = "currentColor", size = 20, rotate = 0 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} style={{ transform: `rotate(${rotate}deg)`, transition: "transform .3s" }}>
    <path d="M5 12h14M13 5l7 7-7 7" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </svg>
);

const IconCheck = ({ color = "#009775", size = 20 }) => (
  <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
    width: size, height: size, borderRadius: "50%",
    background: `${color}22`, color, flexShrink: 0 }}>
    <Icon name="check" color={color} size={size * 0.65}/>
  </span>
);

const IconStar = ({ color = "#F1C400", size = 18 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size}>
    <path
      d="M12 2l2.9 6.5 7.1.7-5.4 4.8 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.7z"
      fill={color}
      stroke={color}
      strokeWidth="1.5"
      strokeLinejoin="round"
    />
  </svg>
);

Object.assign(window, {
  Icon, Logo, LogoFull, Brote,
  IconHabilitacion, IconAmbiental, IconResiduos, IconSeguridad,
  IconWhatsapp, IconArrow, IconCheck, IconStar
});