import Image from "next/image";
import { cn } from "@/lib/utils";
import { BRAND_NAME } from "@/lib/brand";

type Props = {
  size?: "sm" | "md" | "lg";
  withWordmark?: boolean;
  /**
   * Cartouche signature : variante haute densité avec bordure bronze prononcée
   * et glow accent. Réservé à la navbar marketing (point d'attention).
   * Par défaut, version compacte sans glow.
   */
  bordered?: boolean;
  className?: string;
};

/**
 * Logo Novelia : N doré métallisé toujours posé dans un cartouche sombre.
 *
 * Le PNG source a un fond noir. On le rend lisible via `mix-blend-mode: screen`,
 * qui exige un fond foncé sous l'image. Sur la palette claire, on encapsule
 * donc systématiquement le mark dans un petit chip stone-900, qui devient
 * de fait une signature « sceau d'atelier » cohérente partout dans le produit.
 *
 * Si un jour le PNG est exporté en transparent, retirer la dépendance au chip
 * et au mix-blend-mode.
 */
export function Logo({ size = "md", withWordmark = true, bordered = false, className }: Props) {
  const markPx = size === "sm" ? 22 : size === "lg" ? 40 : 28;
  const textClass = size === "sm" ? "text-sm" : size === "lg" ? "text-2xl" : "text-base";
  const gap = size === "sm" ? "gap-2" : size === "lg" ? "gap-3" : "gap-2.5";
  const chipPad = size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5";

  const chipClass = bordered
    ? "border-amber-800/45 shadow-[inset_0_0_0_1px_rgba(146,64,14,0.18),0_0_22px_-8px_rgba(146,64,14,0.50)]"
    : "border-amber-800/25 shadow-[inset_0_0_0_1px_rgba(146,64,14,0.10)]";

  return (
    <div className={cn("inline-flex items-center", gap, className)}>
      <span
        className={cn(
          "inline-flex items-center justify-center rounded-md border bg-stone-900",
          chipPad,
          chipClass,
        )}
      >
        <Image
          src="/logo.png"
          alt={`Logo ${BRAND_NAME}`}
          width={markPx}
          height={markPx}
          priority
          className="shrink-0 select-none"
          style={{ mixBlendMode: "screen" }}
        />
      </span>
      {withWordmark && (
        <span className={cn("font-semibold tracking-tight text-text", textClass)}>
          {BRAND_NAME}
        </span>
      )}
    </div>
  );
}