import { cn } from "@/lib/cn";

/**
 * Brand mark: a plaster panel with an aperture, threaded by the indigo signal —
 * the same image as the hero film, reduced to three shapes.
 */
export function LogoMark({ className, tone = "light" }: { className?: string; tone?: "light" | "dark" }) {
  const panel = tone === "dark" ? "var(--color-night-text)" : "var(--color-ink)";
  const hole = tone === "dark" ? "var(--color-night)" : "var(--color-paper)";
  const signal = tone === "dark" ? "var(--color-signal-bright)" : "var(--color-signal)";
  return (
    <svg viewBox="0 0 32 32" className={cn("shrink-0", className)} aria-hidden="true" focusable="false">
      <rect x="3" y="3.5" width="19" height="25" rx="3" fill={panel} />
      <circle cx="12.5" cy="16" r="3.4" fill={hole} />
      <path d="M12.5 16H30" stroke={signal} strokeWidth="2.4" />
      <circle cx="12.5" cy="16" r="1.5" fill={signal} />
    </svg>
  );
}

export function Logo({ className, tone = "light" }: { className?: string; tone?: "light" | "dark" }) {
  return (
    <span className={cn("inline-flex items-center gap-2.5", className)}>
      <LogoMark className="size-7" tone={tone} />
      <span className="whitespace-nowrap text-[1.0625rem] leading-none tracking-[-0.02em]">
        <span className="font-semibold">Axidys</span>{" "}
        <span className={cn("font-normal", tone === "dark" ? "text-night-muted" : "text-muted")}>Media</span>
      </span>
    </span>
  );
}