import { BRAND } from "@/lib/brand";

/** Logo oficial + nombre del sorteo. `inverted` para fondos oscuros (footer). */
export default function BrandLogo({ inverted = false }: { inverted?: boolean }) {
  return (
    <span className="flex items-center gap-3">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={BRAND.logo}
        alt={BRAND.org}
        className={`h-11 w-auto ${inverted ? "rounded-xl bg-white px-2 py-1" : ""}`}
      />
      <span className={`h-8 w-px ${inverted ? "bg-white/30" : "bg-slate-200"}`} aria-hidden />
      <span className="flex flex-col leading-tight">
        <span className={`font-serif text-base font-bold ${inverted ? "text-white" : "text-brand-ink"}`}>
          {BRAND.name}
        </span>
        <span className={`text-[11px] ${inverted ? "text-white/70" : "text-brand-muted"}`}>
          Sorteo solidario
        </span>
      </span>
    </span>
  );
}