// Shared "how it works" step connector — used by Challenge's, /todo-cards's,
// and /newsletter's ("Impulse & Tipps") step sections. Used to be
// /icon-arrow-connector.svg (a thin gray line+chevron) loaded via next/image;
// replaced 2026-07-24 for two reasons that both needed an inline SVG to fix:
// 1. It read as a faint gray line, not a real arrow, even after the
//    object-contain aspect-ratio fix — too thin/subtle at these sizes.
// 2. Its color lives in a `var(--stroke-0, #C9C9C9)` CSS custom property
//    that's scoped to the SVG file's own document when loaded via <img
//    src>/next/image — un-recolorable from the host page's CSS, so it could
//    never actually become the brand orange used everywhere else (buttons,
//    checkmarks, icons). Inline SVG sidesteps that entirely.
export function StepArrow({ className }: { className?: string }) {
  return (
    <svg width="40" height="16" viewBox="0 0 40 16" fill="none" aria-hidden="true" className={className}>
      <path
        d="M1 8H33M26 14.5L34.5 8L26 1.5"
        stroke="#f6a701"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}