import Image from 'next/image';

/**
 * The two official Loyaly.ai assets — and the only place in the product where
 * brand colour is allowed to appear. Everything around them stays monochrome.
 *
 * Both render at their own intrinsic ratio: a caller sizes ONE axis and the
 * other is derived, so neither mark can be letterboxed or stretched. There is
 * deliberately no `fill` / `objectFit` escape hatch — that is how logos end up
 * distorted. Recolouring is likewise not a prop: the PNGs carry the mark.
 */

// Intrinsic pixel dimensions of the shipped files, alpha-trimmed so the
// wordmark optically centres (the supplied original carried 44px of dead
// transparent space on its trailing edge).
const LOGO = {src: '/white-logo.png', width: 1489, height: 248};
const MARK = {src: '/brand/loyaly-mark.png', width: 285, height: 256};

interface BrandProps {
  /** Alternative text. Pass '' where a sibling element already names the brand. */
  alt?: string;
  /** Set on marks that paint above the fold, so Next preloads them. */
  priority?: boolean;
}

/** Full horizontal Loyaly.ai lockup. Sized by height; width follows. */
export function BrandLogo({
  height = 28,
  alt = 'Loyaly.ai',
  priority = false,
}: BrandProps & {height?: number}) {
  return (
    <Image
      src={LOGO.src}
      alt={alt}
      height={height}
      width={Math.round((height * LOGO.width) / LOGO.height)}
      priority={priority}
      // Block display keeps the anchor that usually wraps this from painting a
      // hover underline in the leftover line box.
      className="block"
    />
  );
}

/** Heart symbol alone, for spaces too narrow for the lockup. Sized by width. */
export function BrandMark({
  size = 28,
  alt = 'Loyaly.ai',
  priority = false,
}: BrandProps & {size?: number}) {
  return (
    <Image
      src={MARK.src}
      alt={alt}
      width={size}
      height={Math.round((size * MARK.height) / MARK.width)}
      priority={priority}
      className="block"
    />
  );
}