// Isologotipo UghPass (manual §4.3): rayo + garrote formando una P.
// Wordmark: "Ugh" bold + "Pass" light. Debajo de 24 px usar solo el isotipo.

type Props = { light?: boolean; size?: 'sm' | 'md' | 'lg'; iconOnly?: boolean }

export function UghIcon({ size = 28, fill = '#FF5500', gap = '#121212' }: { size?: number; fill?: string; gap?: string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true">
      <path d="M26.5 16 Q26.5 9.5 34 9.5 Q41.5 9.5 41.5 16 L36.7 50 Q36.7 55.5 34 55.5 Q31.3 55.5 31.3 50 Z" fill={fill} />
      <path d="M39 15 H43 a11.5 11.5 0 0 1 0 23 H37" fill="none" stroke={fill} strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M25 4 L10 33 H20.5 L14.5 54 L34 24 H23.5 L30 4 Z" fill={fill} stroke={gap} strokeWidth="3" strokeLinejoin="round" paintOrder="stroke" />
    </svg>
  )
}

export default function Logo({ light = false, size = 'md', iconOnly = false }: Props) {
  const px = { sm: 24, md: 30, lg: 40 }[size]
  const text = { sm: 'text-lg', md: 'text-xl', lg: 'text-3xl' }[size]
  return (
    <span className="inline-flex select-none items-center gap-1.5" aria-label="UghPass">
      <UghIcon size={px} gap={light ? '#121212' : '#f9fafb'} />
      {!iconOnly && (
        <span className={`font-display tracking-tight ${text} ${light ? 'text-piedra' : 'text-ink-950'}`}>
          <b className="font-bold">Ugh</b><span className="font-light text-[#ff5500]">Pass</span>
        </span>
      )}
    </span>
  )
}