/* Decoraciones SVG inline: blobs, estrellitas, líneas onduladas, garabatos. */
(function () {
  const A = "var(--accent)", M = "var(--mostaza)", N = "var(--menta)", C = "var(--cielo)";

  // Blob orgánico de fondo
  function Blob({ color = A, style, className }) {
    return (
      <svg viewBox="0 0 200 200" className={className} style={style} aria-hidden="true">
        <path fill={color} d="M48.5,-58.6C61.4,-49.3,69.2,-32.7,71.6,-15.6C74,1.6,71,19.3,62.1,33.2C53.3,47.1,38.6,57.2,22.3,62.8C6,68.4,-11.9,69.5,-28.4,63.7C-44.9,57.9,-60,45.2,-67.2,29.1C-74.4,13,-73.8,-6.5,-66.8,-22.8C-59.8,-39.1,-46.4,-52.2,-31.6,-60.7C-16.8,-69.2,-0.6,-73.1,13.9,-71.1C28.4,-69.1,35.6,-67.9,48.5,-58.6Z" transform="translate(100 100)"/>
      </svg>
    );
  }

  // Estrellita de 4 puntas
  function Sparkle({ color = M, size = 28, style, className }) {
    return (
      <svg viewBox="0 0 24 24" width={size} height={size} className={className} style={style} aria-hidden="true">
        <path fill={color} d="M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z"/>
      </svg>
    );
  }

  // Línea ondulada separadora
  function Wave({ color = "var(--crema)", flip, style }) {
    return (
      <svg viewBox="0 0 1440 80" preserveAspectRatio="none" aria-hidden="true"
        style={{ display: "block", width: "100%", height: 56, transform: flip ? "scaleY(-1)" : "none", ...style }}>
        <path fill={color} d="M0,40 C180,80 360,0 540,28 C720,56 900,8 1080,28 C1260,48 1380,56 1440,40 L1440,80 L0,80 Z"/>
      </svg>
    );
  }

  // Garabato / subrayado a mano
  function Squiggle({ color = A, style, className }) {
    return (
      <svg viewBox="0 0 200 18" className={className} style={style} aria-hidden="true" fill="none">
        <path d="M3 11C28 4 44 4 70 9s44 5 70-1 44-6 54 0" stroke={color} strokeWidth="5" strokeLinecap="round"/>
      </svg>
    );
  }

  // Arco punteado (para "cómo elegimos")
  function Dots({ color = "var(--beige)", style }) {
    return (
      <svg viewBox="0 0 120 12" style={style} aria-hidden="true" fill={color}>
        {Array.from({ length: 9 }).map((_, i) => <circle key={i} cx={6 + i * 14} cy="6" r="3"/>)}
      </svg>
    );
  }

  window.Deco = { Blob, Sparkle, Wave, Squiggle, Dots, colors: { A, M, N, C } };
})();