/** Знак «Слои»: два перекрывающихся скруглённых квадрата, цвета — из токенов бренда */
const MARK = {
  // шапка сайта
  lg: { box: 28, square: 21, radius: 7, offset: 3, blur: true },
  // карточка входа
  card: { box: 26, square: 19, radius: 6, offset: 3, blur: false },
  // подвал сайта и кабинет
  md: { box: 24, square: 18, radius: 6, offset: 3, blur: false },
} as const

const TEXT_SIZE = { lg: 'text-[17px]', card: 'text-base', md: 'text-[15px]' } as const

export function LogoMark({ size }: { size: keyof typeof MARK }) {
  const { box, square, radius, offset, blur } = MARK[size]
  return (
    <span aria-hidden className="relative block flex-none" style={{ width: box, height: box }}>
      <span
        className="absolute left-0 block"
        style={{
          top: offset,
          width: square,
          height: square,
          borderRadius: radius,
          background:
            'linear-gradient(140deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--glow-3)))',
        }}
      />
      <span
        className="absolute right-0 block border bg-veil"
        style={{
          bottom: offset,
          width: square,
          height: square,
          borderRadius: radius,
          borderColor: 'color-mix(in oklab, var(--accent) 35%, transparent)',
          backdropFilter: blur ? 'blur(2px)' : undefined,
        }}
      />
    </span>
  )
}

/** Надпись логотипа: Unbounded 600 */
export function LogoText({ children, size }: { children: string; size: keyof typeof TEXT_SIZE }) {
  return (
    <span
      className={`font-logo font-semibold tracking-[-0.02em] whitespace-nowrap ${TEXT_SIZE[size]}`}
    >
      {children}
    </span>
  )
}