// 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 — und warum es zwei Dateien gibt ═══
//
// §1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Das
// Manual kennt dafuer zwei Faelle, und sie brauchen verschiedene Dateien:
//
//   • **Auf Weiss** (§4.1) gehoert das Logo „in ein rechteckiges rosa Feld".
//     Das ist manner-logo.svg — der Schriftzug samt seiner rosa Flaeche.
//
//   • **In einem grossflaechigen rosa Umfeld** (§3.1) wird es „mit genuegend
//     Freiraum rundum integriert" — die Flaeche ist dann schon da. Dafuer
//     gibt es manner-logo-auf-rosa.svg, den Schriftzug ohne eigenes Feld.
//
// Die zweite Fassung ist nicht nur schoener, sie ist noetig: mit Feld stand
// auf dem rosa Panel ein Rechteck in leicht anderem Ton. Der Ton war dabei
// derselbe — was ihn verschob, war die Lichtblende, die ueber der Panelflaeche
// liegt und unter dem Logo endet. Ohne eigenes Feld gibt es nichts mehr, wo
// sie enden koennte.
//
// Als <img> und nicht inline: die Datei holt der Browser einmal und nimmt sie
// danach aus dem Zwischenspeicher, statt in jeder Seitenauslieferung
// mitzureisen.

/** Seitenverhaeltnis beider Dateien: viewBox 288.6781 x 116.18912. */
const VERHAELTNIS = 288.6781 / 116.18912;

export function MannerLogo({
  hoehe = 28,
  aufRosa = false,
  className = "",
}: {
  hoehe?: number;
  /** Fuer rosa Untergruende: die Fassung ohne eigenes Feld. */
  aufRosa?: boolean;
  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={aufRosa ? "/brand/manner-logo-auf-rosa.svg" : "/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,
  aufRosa = false,
  textKlasse = "text-ink",
  className = "",
}: {
  hoehe?: number;
  aufRosa?: boolean;
  textKlasse?: string;
  className?: string;
}) {
  return (
    <span className={`flex items-center ${className}`}>
      <MannerLogo hoehe={hoehe} aufRosa={aufRosa} />
      <span className={`text-base font-extrabold tracking-tight ${textKlasse}`}>Alpenwerk HR</span>
    </span>
  );
}