// Das Manner-Logo und die Wortmarke der Anwendung — an einer Stelle, weil
// Kopfleiste und Anmeldeseite dasselbe zeigen sollen.
//
// ═══ Welches Logo ═══
//
// Verwendet wird das **Markenlogo** (CD §4.1): der Schriftzug allein, ohne
// den Stephansdom-Medaillon. Das Unternehmenslogo (§3.1) waere nach §3.2 das
// formal richtige, wo „Josef Manner & Comp. AG" als Absender auftritt — es
// steht hier aber nicht zur Verfuegung, und das Markenlogo ist die Fassung,
// die vorliegt.
//
// ═══ Freiraum ═══
//
// §4.1 verlangt „genuegend Freiraum rundum (X, X/3)". X ist der Modul des
// Logos; gelesen wird er hier als seine Hoehe, der Freiraum also als ein
// Drittel davon. Er steckt als Polsterung in diesem Bauteil und nicht in den
// Aufrufstellen — sonst haengt die Einhaltung daran, dass jede einzelne
// daran denkt.
//
// ═══ Rosa ═══
//
// §1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Die
// Datei bringt ihr rosa Feld selbst mit, das Logo ist also auf jedem
// Untergrund regelkonform — auch auf dem blauen Panel der Anmeldeseite.
//
// Als <img> und nicht inline: die Datei wiegt 73 kB, weil die Kontur des
// Schriftzugs aus 77 Pfaden besteht. Inline laege sie in jeder einzelnen
// Seitenauslieferung; als Datei holt der Browser sie einmal und nimmt sie
// danach aus dem Zwischenspeicher.

/** Seitenverhaeltnis der Datei: viewBox 288.6781 x 116.18912. */
const VERHAELTNIS = 288.6781 / 116.18912;

export function MannerLogo({ hoehe = 28, className = "" }: { hoehe?: number; className?: string }) {
  const breite = Math.round(hoehe * VERHAELTNIS);
  return (
    // next/image bringt Groessenvarianten und Ladelogik fuer Fotos mit; fuer
    // eine Vektordatei fester Groesse ist beides Ballast, und die
    // Bildoptimierung laesst SVG ohnehin unveraendert durch.
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src="/brand/manner-logo.svg"
      alt="Manner"
      width={breite}
      height={hoehe}
      // Der Freiraum nach §4.1, als Polsterung. `box-content`, damit die
      // Breite oben die des Logos bleibt und nicht die des Feldes.
      style={{ padding: Math.round(hoehe / 3), width: breite, height: hoehe }}
      className={`box-content shrink-0 ${className}`}
    />
  );
}

/**
 * Logo plus Produktname.
 *
 * Die beiden gehoeren zusammen und meinen Verschiedenes: das Logo sagt, wem
 * das System gehoert, der Name sagt, was es ist.
 */
export function AppWortmarke({
  hoehe = 26,
  textKlasse = "text-ink",
  className = "",
}: {
  hoehe?: number;
  textKlasse?: string;
  className?: string;
}) {
  return (
    <span className={`flex items-center ${className}`}>
      <MannerLogo hoehe={hoehe} />
      <span className={`text-base font-extrabold tracking-tight ${textKlasse}`}>Alpenwerk HR</span>
    </span>
  );
}