export default function GearPattern({ opacity = 0.06 }: { opacity?: number }) {
  return (
    <div
      className="absolute inset-0 overflow-hidden pointer-events-none"
      aria-hidden="true"
    >
      <svg
        className="absolute inset-0 w-full h-full"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          {/* Single gear shape as a pattern tile */}
          <symbol id="gear" viewBox="0 0 60 60">
            <g transform="translate(30,30)">
              {/* Outer teeth */}
              {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((angle) => (
                <rect
                  key={angle}
                  x="-3.5"
                  y="-26"
                  width="7"
                  height="7"
                  rx="1"
                  fill="#f97316"
                  transform={`rotate(${angle})`}
                />
              ))}
              {/* Outer ring */}
              <circle cx="0" cy="0" r="18" fill="none" stroke="#f97316" strokeWidth="4" />
              {/* Inner spokes */}
              {[0, 60, 120, 180, 240, 300].map((angle) => (
                <line
                  key={angle}
                  x1="0"
                  y1="0"
                  x2="0"
                  y2="-14"
                  stroke="#f97316"
                  strokeWidth="2.5"
                  transform={`rotate(${angle})`}
                />
              ))}
              {/* Center hole */}
              <circle cx="0" cy="0" r="5" fill="none" stroke="#f97316" strokeWidth="3" />
            </g>
          </symbol>

          {/* Small gear */}
          <symbol id="gear-sm" viewBox="0 0 34 34">
            <g transform="translate(17,17)">
              {[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => (
                <rect
                  key={angle}
                  x="-2.5"
                  y="-14.5"
                  width="5"
                  height="5"
                  rx="0.8"
                  fill="#f97316"
                  transform={`rotate(${angle})`}
                />
              ))}
              <circle cx="0" cy="0" r="9" fill="none" stroke="#f97316" strokeWidth="3" />
              {[0, 90, 180, 270].map((angle) => (
                <line
                  key={angle}
                  x1="0"
                  y1="0"
                  x2="0"
                  y2="-7"
                  stroke="#f97316"
                  strokeWidth="2"
                  transform={`rotate(${angle})`}
                />
              ))}
              <circle cx="0" cy="0" r="3" fill="none" stroke="#f97316" strokeWidth="2" />
            </g>
          </symbol>

          {/* Repeating pattern */}
          <pattern id="gearPattern" x="0" y="0" width="160" height="160" patternUnits="userSpaceOnUse">
            {/* Large gear top-left */}
            <use href="#gear" x="10" y="10" width="60" height="60" />
            {/* Small gear top-right, meshing */}
            <use href="#gear-sm" x="68" y="22" width="34" height="34" />
            {/* Large gear bottom-right */}
            <use href="#gear" x="90" y="90" width="60" height="60" />
            {/* Small gear bottom-left */}
            <use href="#gear-sm" x="18" y="104" width="34" height="34" />
            {/* Tiny center connector dots */}
            <circle cx="80" cy="56" r="2" fill="#f97316" />
            <circle cx="56" cy="80" r="2" fill="#f97316" />
          </pattern>
        </defs>
        <rect
          width="100%"
          height="100%"
          fill="url(#gearPattern)"
          opacity={opacity}
        />
      </svg>
    </div>
  );
}