import { ArrowDown } from "lucide-react";

// Spinning orbital badge — echoes the logo swoosh. Decorative.
export default function RotatingBadge({ className = "" }: { className?: string }) {
  return (
    <div className={`relative h-28 w-28 md:h-36 md:w-36 ${className}`} aria-hidden="true" data-testid="rotating-badge">
      <svg viewBox="0 0 100 100" className="h-full w-full spin-slow">
        <defs>
          <path id="badge-circ" d="M 50,50 m -38,0 a 38,38 0 1,1 76,0 a 38,38 0 1,1 -76,0" />
        </defs>
        <text className="fill-white/55" style={{ fontSize: "7.6px", fontFamily: "'Chivo Mono', monospace", letterSpacing: "2.2px" }}>
          <textPath href="#badge-circ" textLength="238" lengthAdjust="spacingAndGlyphs">
            INTEGRATE · INNOVATE · TRANSFORM ·
          </textPath>
        </text>
      </svg>
      <a
        href="#pillars"
        className="absolute inset-0 m-auto h-11 w-11 grid place-items-center rounded-full border border-ember/50 bg-[#14151A]/80 text-ember hover:bg-ember hover:text-white transition-colors duration-300"
        aria-label="Scroll to solution pillars"
        data-testid="badge-center-link"
      >
        <ArrowDown size={16} />
      </a>
    </div>
  );
}