"use client";
import { useId } from "react";

type GearDef = {
  id: string;
  cx: number;
  cy: number;
  r: number;
  hr: number;
  tc: number;
  tw: number;
  th: number;
};

export default function Logo({ className = "" }: { className?: string }) {
  const uid = useId();
  const col = "#f97316";

  // 4 gears in a horizontal chain, two pairs slightly offset vertically
  // Connector nodes sit between gears
  const gears: GearDef[] = [
    // left-outer: small
    { id: "g1", cx: 28, cy: 50, r: 12, hr: 4, tc: 8, tw: 4.5, th: 4.5 },
    // left-inner: large
    { id: "g2", cx: 68, cy: 50, r: 18, hr: 6, tc: 12, tw: 5.5, th: 5.5 },
    // right-inner: large
    { id: "g3", cx: 112, cy: 50, r: 18, hr: 6, tc: 12, tw: 5.5, th: 5.5 },
    // right-outer: small
    { id: "g4", cx: 152, cy: 50, r: 12, hr: 4, tc: 8, tw: 4.5, th: 4.5 },
  ];

  // Connector nodes between gears
  const nodes = [
    { cx: 48, cy: 50 },  // between g1 and g2
    { cx: 90, cy: 50 },  // between g2 and g3
    { cx: 132, cy: 50 }, // between g3 and g4
  ];

  return (
    <svg
      viewBox="0 0 180 100"
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      aria-label="MBO-Tech-IT Logo"
    >
      <defs>
        {gears.map((g) => (
          <mask key={g.id} id={`${uid}-${g.id}`}>
            <rect width="200" height="200" fill="black" />
            <circle cx={g.cx} cy={g.cy} r={g.r + g.th + 1} fill="white" />
            <circle cx={g.cx} cy={g.cy} r={g.hr} fill="black" />
          </mask>
        ))}
      </defs>

      {/* Gears */}
      {gears.map((g) => {
        const angles = Array.from({ length: g.tc }, (_, i) => (360 / g.tc) * i);
        return (
          <g key={g.id} mask={`url(#${uid}-${g.id})`}>
            {angles.map((a) => (
              <rect
                key={a}
                x={g.cx - g.tw / 2}
                y={g.cy - g.r - g.th}
                width={g.tw}
                height={g.th + 1}
                rx="0.8"
                fill={col}
                transform={`rotate(${a}, ${g.cx}, ${g.cy})`}
              />
            ))}
            <circle cx={g.cx} cy={g.cy} r={g.r} fill={col} />
          </g>
        );
      })}

      {/* Connector nodes */}
      {nodes.map(({ cx, cy }) => (
        <g key={`n-${cx}`}>
          <circle cx={cx} cy={cy} r={5} fill={col} />
          <circle cx={cx} cy={cy} r={2.5} fill="white" fillOpacity="0.3" />
        </g>
      ))}
    </svg>
  );
}