// Hand-painted brush-stroke divider placed between sections (like the old Wix site).
// Props: color (default brand pink), flip (mirror the stroke), height, bg (band background).
function PaintDivider({ color, flip, height, bg }) {
  const stroke = color || "var(--color-primary)";
  return (
    <div
      aria-hidden="true"
      style={{
        background: bg || "transparent",
        lineHeight: 0,
        marginTop: -1,
        marginBottom: -1,
        transform: flip ? "scaleX(-1)" : "none",
        pointerEvents: "none",
      }}
    >
      <svg
        className="jmk-sway"
        viewBox="0 0 1440 120"
        preserveAspectRatio="none"
        style={{ display: "block", width: "100%", height: height || "clamp(38px, 6vw, 72px)" }}
      >
        <path
          fill={stroke}
          d="M18,64 C130,34 250,54 360,48 C470,42 540,64 660,58 C790,52 880,36 1000,47
             C1120,58 1230,42 1360,52 C1400,55 1424,60 1430,54
             C1418,74 1372,82 1300,77 C1170,68 1080,86 950,77
             C830,69 750,88 630,81 C520,75 440,90 320,81
             C220,74 120,88 34,82 C22,81 12,74 18,64 Z"
        />
        <ellipse cx="70" cy="96" rx="9" ry="4.5" fill={stroke} opacity="0.7" />
        <ellipse cx="1385" cy="40" rx="7" ry="3.5" fill={stroke} opacity="0.7" />
        <circle cx="1410" cy="72" r="3.4" fill={stroke} opacity="0.6" />
        <circle cx="48" cy="46" r="3" fill={stroke} opacity="0.6" />
      </svg>
    </div>
  );
}
window.JMK = window.JMK || {};
window.JMK.PaintDivider = PaintDivider;