// 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. Inline SVG
//    sidesteps that entirely. Stroke color: tried brand orange, then
//    near-black, settled on the same light gray (#C9C9C9) the original
//    asset's own fallback used, per feedback the same day — just bolder
//    (strokeWidth 2.5 vs. the original's thin 1.5) and better-shaped.
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="#C9C9C9"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}