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

/**
 * "Netzknoten"-Logo: vernetzte Wehren-Knoten (Navy) um einen roten Mittelpunkt
 * (Florian + Netz). Rein dekorativ, daher aria-hidden — der Markenname steht
 * als Text daneben.
 */
export function NetzknotenLogo({
  className,
  size = 28,
}: {
  className?: string;
  size?: number;
}) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 48 48"
      fill="none"
      role="img"
      aria-label="FlorianNetz"
      className={cn("shrink-0", className)}
    >
      {/* Verbindungslinien (Netz) */}
      <g stroke="#1B3A5B" strokeWidth="1.5" opacity="0.85">
        <line x1="24" y1="24" x2="24" y2="7" />
        <line x1="24" y1="24" x2="39" y2="15" />
        <line x1="24" y1="24" x2="39" y2="33" />
        <line x1="24" y1="24" x2="24" y2="41" />
        <line x1="24" y1="24" x2="9" y2="33" />
        <line x1="24" y1="24" x2="9" y2="15" />
      </g>
      {/* Äußere Knoten (Wehren) */}
      <g fill="#1B3A5B">
        <circle cx="24" cy="7" r="3.2" />
        <circle cx="39" cy="15" r="3.2" />
        <circle cx="39" cy="33" r="3.2" />
        <circle cx="24" cy="41" r="3.2" />
        <circle cx="9" cy="33" r="3.2" />
        <circle cx="9" cy="15" r="3.2" />
      </g>
      {/* Roter Mittelpunkt (Florian) */}
      <circle cx="24" cy="24" r="5" fill="#E2231A" />
    </svg>
  );
}
