wulf-pulse/components/branding/wulf-mark.tsx

/* Wulf Consulting brand mark.
 * Wraps the canonical PNG assets shipped from the standards guide:
 *   public/branding/wulf-mark.png      — W mark only (412×290 ratio)
 *   public/branding/wulf-wordmark.png  — full "Wulf Consulting" wordmark
 *
 * Use `variant="mark"` for the W glyph alone (top-bar brand link, watermark)
 * and `variant="wordmark"` for the full lockup (login screen, marketing). */

import Image from 'next/image';
import { cn } from '@/lib/utils';

interface WulfMarkProps {
  variant?: 'mark' | 'wordmark';
  className?: string;
  alt?: string;
  priority?: boolean;
}

export function WulfMark({
  variant = 'mark',
  className,
  alt,
  priority = false,
}: WulfMarkProps) {
  const src =
    variant === 'wordmark'
      ? '/branding/wulf-wordmark.png'
      : '/branding/wulf-mark.png';
  const dimensions =
    variant === 'wordmark'
      ? { width: 686, height: 290 }
      : { width: 412, height: 290 };

  return (
    <Image
      src={src}
      width={dimensions.width}
      height={dimensions.height}
      priority={priority}
      alt={alt ?? (variant === 'wordmark' ? 'Wulf Consulting' : 'Wulf')}
      className={cn('select-none', className)}
    />
  );
}