import { cn } from '@/lib/utils';

/**
 * Two words, one tone shift: the brand carries the accent, the qualifier does
 * not. Rendered as a single string for a screen reader so it is announced
 * "PIG demo" rather than as two unrelated fragments.
 */
export function Wordmark({ className }: { className?: string }) {
  return (
    <span className={cn('inline-flex items-baseline gap-1 font-semibold tracking-tight', className)}>
      <span aria-hidden="true" className="text-accent-fg">
        PIG
      </span>
      <span aria-hidden="true" className="font-normal lowercase text-muted">
        demo
      </span>
      <span className="sr-only">PIG demo</span>
    </span>
  );
}
