/** The Justice Choice mark: balanced scales with a brass fulcrum (shared by sidebar, portal and login) */
export function BrandMark({ className = 'h-8 w-8', inverted = false }: { className?: string; inverted?: boolean }) {
  return (
    <span className={`relative grid shrink-0 place-items-center rounded-[10px] shadow-sm ${inverted ? 'bg-white/15 text-white' : 'bg-ledger text-ledger-ink'} ${className}`}>
      <svg aria-hidden viewBox="0 0 64 64" className="h-[62%] w-[62%]" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 14v34M23 50h18M17 22h30" />
        <path d="m17 22-6 13a6.5 6.5 0 0 0 12 0l-6-13ZM47 22l-6 13a6.5 6.5 0 0 0 12 0l-6-13Z" />
      </svg>
      <span aria-hidden className="absolute left-1/2 top-[19%] h-[13%] w-[13%] -translate-x-1/2 rounded-full bg-[#e0b35f]" />
    </span>
  );
}

export function BrandName({ sub }: { sub?: string }) {
  return (
    <span className="leading-tight">
      <span className="block font-serif text-base font-semibold">
        Justice<span className="text-ledger"> Choice</span>
      </span>
      {sub && <span className="block text-[11px] font-medium uppercase tracking-[0.08em] text-muted">{sub}</span>}
    </span>
  );
}
