import buero from '../../assets/staff/buero.jpg'

/**
 * Umgebung der Belegschaftsansicht auf der Startseite (Runde 5, §3).
 *
 * Genau eine Stelle bestimmt, welches Bild hinter den Personenkarten liegt.
 * Ein Austausch ist damit ein Einzeiler; die Herkunft steht in `HERKUNFT.md`
 * neben der Bilddatei.
 *
 * Das Bild ist Umgebung, nicht Motiv: es zeigt ein Büro, damit die digitalen
 * Mitarbeitenden einen Arbeitsplatz haben statt eines leeren Hintergrunds. Der
 * Verlauf darüber nimmt ihm den grössten Teil des Kontrasts — sonst
 * konkurriert jeder Bürostuhl mit den Gesichtern und der Schrift davor.
 */
export interface RoomBackdrop {
  src: string
  /** Bildausschnitt bei `object-fit: cover`. */
  focus: string
  /** Verlauf über dem Bild: Lesbarkeit und Übergang zur Objektliste darunter. */
  scrim: string
}

export const ROOM_BACKDROP: RoomBackdrop = {
  src: buero,
  focus: '50% 58%',
  scrim: [
    // Grundton: das Büro tritt weit zurück, die Karten treten hervor.
    'linear-gradient(180deg, rgba(9,14,23,0.84) 0%, rgba(9,14,23,0.76) 52%, rgba(9,14,23,0.92) 100%)',
    // Warmes Streiflicht von links, damit die Fläche nicht tot wirkt.
    'radial-gradient(85% 120% at 10% 6%, rgba(184,151,90,0.18) 0%, rgba(184,151,90,0) 58%)',
  ].join(', '),
}