const SIZES = {
  sm: { mark: "h-8 w-8", word: "text-lg", tag: "text-[9px] tracking-[0.25em]" },
  md: { mark: "h-10 w-10", word: "text-xl", tag: "text-[10px] tracking-[0.3em]" },
  lg: { mark: "h-14 w-14", word: "text-3xl", tag: "text-xs tracking-[0.35em]" },
} as const;

export default function BrandLogo({
  size = "sm",
  showTagline = false,
  className = "",
  wordClassName = "text-white",
  accentClassName = "text-brand-gold-h",
}: {
  size?: keyof typeof SIZES;
  showTagline?: boolean;
  className?: string;
  /** Color for the "Vibe" half — override on light/adaptive backgrounds
   *  (the default white only reads on the always-dark public site). */
  wordClassName?: string;
  /** Color for the "Pass" half. */
  accentClassName?: string;
}) {
  const s = SIZES[size];

  return (
    <span className={`inline-flex items-center gap-2.5 ${className}`}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src="/brand/vibepass-mark.svg" alt="" aria-hidden="true" className={`${s.mark} w-auto`} />
      <span className="flex flex-col leading-none">
        <span className={`font-black tracking-tight ${s.word}`}>
          <span className={wordClassName}>Vibe</span>
          <span className={accentClassName}>Pass</span>
        </span>
        {showTagline && (
          <span className={`mt-1 font-semibold uppercase text-muted ${s.tag}`}>Tickets</span>
        )}
      </span>
    </span>
  );
}