/**
 * Logótipo NetScreen AI — oficial.
 *
 * O SVG veio de `_10_Biblioteca/_logos/Netscreen/2022` e está em
 * `public/assets/`. Foi preciso limpá-lo antes de entrar: o export do
 * Illustrator trazia um bloco `<style>` com classes `.cls-1`…`.cls-5` e ids
 * genéricos (`clippath`, `linear-gradient`). Inlinado numa página, aquele CSS
 * é global — `.cls-1 { fill:#fff }` pintaria qualquer outro elemento com essa
 * classe. As cores passaram a atributos e os ids levaram prefixo.
 *
 * É servido por `<img>` e não inlinado: o lockup tem cores fixas da marca
 * (branco e o gradiente laranja) e não precisa de herdar `currentColor`.
 *
 * **Só tem versão para fundo escuro.** O texto é branco, logo desaparece em
 * papel ou em qualquer superfície clara. A variante escura está por pedir.
 */

const LOGO_RACIO = 1806.99 / 246;   // 7.35:1 — o lockup é muito alongado
const SIMBOLO_RACIO = 342.9 / 246;  // 1.39:1 — só a grelha de pontos

/** Só o símbolo: a grelha de pontos, que é um painel LED visto de frente. */
function LogoMark({ size = 28, className = '' }) {
  return (
    <img
      src="/assets/simbolo-netscreen.svg"
      alt=""
      aria-hidden="true"
      width={Math.round(size * SIMBOLO_RACIO)}
      height={size}
      className={className}
    />
  );
}

/** Lockup completo: símbolo e wordmark, como vêm do ficheiro oficial. */
function Logo({ size = 'md', className = '' }) {
  const alturas = { sm: 20, md: 26, lg: 38 };
  const altura = alturas[size] || alturas.md;

  return (
    <img
      src="/assets/logo-netscreen-ai.svg"
      alt="NetScreen AI"
      width={Math.round(altura * LOGO_RACIO)}
      height={altura}
      className={`inline-block ${className}`}
    />
  );
}