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

/**
 * The NABDH mark: a pulse trace. "نَبْض" means pulse — the platform reads the grid's
 * vital signs and reacts to the beat before the beat stops.
 */
export function LogoMark({ className, animated = false }: { className?: string; animated?: boolean }) {
  return (
    <svg
      viewBox="0 0 64 64"
      className={cn('size-8', className)}
      role="img"
      aria-label="NABDH"
      fill="none"
    >
      <rect width="64" height="64" rx="14" fill="#0b1220" />
      <rect
        x="0.75"
        y="0.75"
        width="62.5"
        height="62.5"
        rx="13.25"
        stroke="currentColor"
        strokeOpacity="0.3"
        strokeWidth="1.5"
      />
      <path
        d="M8 34h9.5l4.5-13 7 26 6.5-19 4 6h16"
        stroke="currentColor"
        strokeWidth="3.2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle cx="49" cy="34" r="3.4" fill="currentColor" className={animated ? 'nabdh-pulse' : undefined} />
    </svg>
  )
}

export function Wordmark({
  className,
  locale,
  showTagline = false,
  tagline,
}: {
  className?: string
  locale: 'ar' | 'en'
  showTagline?: boolean
  tagline?: string
}) {
  return (
    <span className={cn('flex items-center gap-2.5', className)}>
      <LogoMark className="size-8 text-brand" />
      <span className="flex flex-col leading-none">
        <span className="flex items-baseline gap-2">
          <span className="text-base font-semibold tracking-tight text-text">
            {locale === 'ar' ? 'نَبْض' : 'NABDH'}
          </span>
          <span className="text-[11px] font-medium tracking-[0.18em] text-text-faint">
            {locale === 'ar' ? 'NABDH' : 'نَبْض'}
          </span>
        </span>
        {showTagline && tagline ? (
          <span className="mt-1 text-[10px] tracking-wide text-text-faint">{tagline}</span>
        ) : null}
      </span>
    </span>
  )
}
