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

/** Spinza mark: a ring split by a diagonal spin stroke — original, drawn inline. */
export function SpinzaMark({ className, glow = true }: { className?: string; glow?: boolean }) {
  return (
    <svg viewBox="0 0 64 64" className={cn("h-8 w-8", className)} aria-hidden>
      <defs>
        <linearGradient id="spz-g" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#f3e2ad" />
          <stop offset="0.5" stopColor="#c9a961" />
          <stop offset="1" stopColor="#8a6d2e" />
        </linearGradient>
        {glow ? (
          <filter id="spz-glow" x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="2.2" result="b" />
            <feMerge>
              <feMergeNode in="b" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        ) : null}
      </defs>
      <g filter={glow ? "url(#spz-glow)" : undefined}>
        <circle cx="32" cy="32" r="24" fill="none" stroke="url(#spz-g)" strokeWidth="5" strokeDasharray="112 40" strokeLinecap="round" transform="rotate(-50 32 32)" />
        <path d="M20 40 L44 24" stroke="url(#spz-g)" strokeWidth="6" strokeLinecap="round" />
        <circle cx="44" cy="24" r="4.5" fill="#f3e2ad" />
      </g>
    </svg>
  );
}

export function SpinzaWordmark({ className, size = "md" }: { className?: string; size?: "sm" | "md" | "lg" }) {
  const s = { sm: "text-lg", md: "text-xl", lg: "text-3xl" }[size];
  return (
    <span className={cn("inline-flex items-center gap-2 font-semibold tracking-[-0.02em]", s, className)}>
      <SpinzaMark className={size === "lg" ? "h-10 w-10" : size === "sm" ? "h-6 w-6" : "h-7 w-7"} />
      <span>
        SPIN<span className="text-accent">ZA</span>
      </span>
    </span>
  );
}