Guía de uso de marca CuHe Labs

<a href="https://cuhelabs.com" target="_blank" rel="noopener noreferrer" aria-label="Visitar CuHe Labs">
  <img
    src="https://cuhelabs.com/brand/cuhe-banner-dark-desarrollado-por.png"
    alt="Desarrollado por CuHe Labs"
    style="width: min(300px, 80vw); height: auto; display: block; margin: 24px auto 0;"
  />
</a>

.cuhe-credit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cuhe-credit:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.cuhe-credit img {
  width: min(300px, 80vw);
  height: auto;
  display: block;
}

export function CuHeCredit({
  variant = "dark",
  text = "desarrollado",
  size = "mini",
}: {
  variant?: "dark" | "light";
  text?: "creado" | "desarrollado" | "disenado";
  size?: "mini" | "compact";
}) {
  const fileMap = {
    dark: {
      creado: "cuhe-banner-dark-creado-por.png",
      desarrollado: "cuhe-banner-dark-desarrollado-por.png",
      disenado: "cuhe-banner-dark-disenado-y-desarrollado-por.png",
    },
    light: {
      creado: "cuhe-banner-light-creado-por.png",
      desarrollado: "cuhe-banner-light-desarrollado-por.png",
      disenado: "cuhe-banner-light-disenado-y-desarrollado-por.png",
    },
  };

  const file = fileMap[variant][text];
  const width = size === "mini" ? 300 : 420;

  return (
    <a
      href="https://cuhelabs.com"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Visitar CuHe Labs"
      className="inline-flex items-center justify-center opacity-90 transition hover:-translate-y-0.5 hover:opacity-100"
    >
      <img
        src={`https://cuhelabs.com/brand/${file}`}
        alt="Desarrollado por CuHe Labs"
        style={{ width: `min(${width}px, 80vw)`, height: "auto" }}
      />
    </a>
  );
}