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

export function LogoMark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 48 48"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("shrink-0", className)}
      aria-hidden="true"
    >
      <defs>
        <linearGradient id="bbb-base" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#FFA030" />
          <stop offset="55%" stopColor="#FF6900" />
          <stop offset="100%" stopColor="#CC3C00" />
        </linearGradient>
        <radialGradient id="bbb-shine" cx="38%" cy="28%" r="55%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.28)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </radialGradient>
      </defs>

      {/* Hexagon base */}
      <polygon
        points="24,3 42,13 42,35 24,45 6,35 6,13"
        fill="url(#bbb-base)"
      />

      {/* Specular shine overlay */}
      <polygon
        points="24,3 42,13 42,35 24,45 6,35 6,13"
        fill="url(#bbb-shine)"
      />

      {/* Inner border ring */}
      <polygon
        points="24,6 39,15 39,33 24,42 9,33 9,15"
        fill="none"
        stroke="rgba(255,255,255,0.22)"
        strokeWidth="1"
      />

      {/* BBB monogram */}
      <text
        x="24"
        y="30"
        fontFamily="'Plus Jakarta Sans', 'Arial Black', Arial, sans-serif"
        fontWeight="800"
        fontSize="13"
        fill="white"
        textAnchor="middle"
        letterSpacing="-0.5"
      >
        BBB
      </text>
    </svg>
  );
}