/**
 * The site's signature visual motif: a stylized solar production curve —
 * the same "sunrise to sunset" output graph you'd see on an inverter
 * monitoring dashboard. Reused (at different scales/opacities) in the
 * hero background, section dividers, and empty states so the whole site
 * shares one recognizable mark instead of generic decoration.
 */
export function ProductionCurve({
  className,
  showDot = true
}: {
  className?: string;
  showDot?: boolean;
}) {
  return (
    <svg
      viewBox="0 0 800 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden="true"
    >
      <path
        className="production-curve animate-drawCurve"
        d="M0 180 C 100 180, 150 40, 250 30 C 350 20, 380 60, 420 70 C 480 85, 520 30, 600 20 C 680 12, 720 90, 800 180"
        stroke="url(#curveGradient)"
        strokeWidth="3"
        strokeLinecap="round"
      />
      {showDot && (
        <circle cx="600" cy="20" r="6" className="fill-copper-500 animate-pulseDot" />
      )}
      <defs>
        <linearGradient id="curveGradient" x1="0" y1="0" x2="800" y2="0">
          <stop offset="0%" stopColor="#3FC1C9" />
          <stop offset="50%" stopColor="#E8944A" />
          <stop offset="100%" stopColor="#3FC1C9" />
        </linearGradient>
      </defs>
    </svg>
  );
}