school_compare/nextjs-app/components/Logo.tsx

/**
 * The schoolcompare mark.
 *
 * This is the supplied brand artwork, not a reconstruction of it. Two
 * colourways were extracted from the logo sheet and live in public/brand:
 *
 *   mark.png          the primary lockup's mark — teal pin, white window and
 *                     path, green leaves. Reads correctly on Warm White,
 *                     white cards and Sand, and on both dark-theme grounds.
 *   mark-on-dark.png  the on-dark colourway — white pin with the counter
 *                     knocked through to the ground. Required wherever the
 *                     ground is teal, because there the teal pin's silhouette
 *                     disappears and only the white window survives.
 *
 * `variant="auto"` serves the on-dark artwork to dark-theme viewers via a
 * <picture> source, so this needs no JavaScript and no client boundary.
 *
 * The wordmark beside it is live text in Manrope rather than the sheet's
 * raster: the written style guide specifies Manrope, and live text stays
 * selectable, scales cleanly and recolours with the theme.
 *
 * RESOLUTION CAVEAT: the largest instance on the supplied sheet is 153×189,
 * which is ample for the header (36px), the favicon and the share card, but
 * short of a 512px PWA icon — that one is upscaled and is slightly soft. Drop
 * a vector (SVG/AI/EPS) into public/brand and regenerate to fix it; every
 * consumer goes through this component or public/brand, so it is one swap.
 */

const MARK_LIGHT = '/brand/mark.png';
const MARK_ON_DARK = '/brand/mark-on-dark.png';

/** Intrinsic aspect of the artwork, used to derive width from height. */
const ASPECT = 153 / 189;

interface LogoMarkProps {
  className?: string;
  /** Rendered height in px. Width follows the artwork's aspect ratio. */
  size?: number;
  /**
   * Which colourway to serve.
   *  - `auto`   teal pin, swapping to the on-dark artwork in the dark theme
   *  - `onDark` always the white pin — for teal grounds, which are teal in
   *             both themes (the footer band)
   */
  variant?: 'auto' | 'onDark';
  title?: string;
}

export function LogoMark({ className, size = 36, variant = 'auto', title }: LogoMarkProps) {
  const height = size;
  const width = Math.round(size * ASPECT);
  const alt = title ?? '';

  if (variant === 'onDark') {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        className={className}
        src={MARK_ON_DARK}
        width={width}
        height={height}
        alt={alt}
        aria-hidden={title ? undefined : true}
        decoding="async"
      />
    );
  }

  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={MARK_ON_DARK} />
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        className={className}
        src={MARK_LIGHT}
        width={width}
        height={height}
        alt={alt}
        aria-hidden={title ? undefined : true}
        decoding="async"
      />
    </picture>
  );
}