/* Illustrations — dragonfly + lotus
   Two styles:
   - "solid" matches the Save the Date (flat silhouettes, two-tone)
   - "line" matches the codebase (delicate line art)
*/

function Dragonfly({ size = 110, color = "#5A8FA0", flip = false, variant = "solid", className = "", style = {} }) {
  const transform = flip ? "scale(-1, 1)" : "scale(1, 1)";

  if (variant === "line") {
    // Codebase line-art version
    return (
      <svg
        width={size}
        height={size * (80 / 120)}
        viewBox="0 0 120 80"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
        style={style}
      >
        <g fill="none" stroke={color} transform={transform} style={{ transformOrigin: "60px 40px" }}>
          <path d="M38 38 C30 28, 10 22, 6 30 C2 38, 18 46, 34 42" strokeWidth="0.9" fill={color} fillOpacity="0.07" />
          <path d="M38 38 C28 32, 8 18, 10 10 C12 2, 30 12, 40 34" strokeWidth="0.85" fill={color} fillOpacity="0.06" />
          <path d="M82 38 C90 28, 110 22, 114 30 C118 38, 102 46, 86 42" strokeWidth="0.9" fill={color} fillOpacity="0.07" />
          <path d="M82 38 C92 32, 112 18, 110 10 C108 2, 90 12, 80 34" strokeWidth="0.85" fill={color} fillOpacity="0.06" />
          <path d="M38 38 C30 44, 12 50, 8 44 C4 38, 20 32, 34 36" strokeWidth="0.9" fill={color} fillOpacity="0.06" />
          <path d="M38 38 C28 48, 10 62, 14 68 C18 74, 34 60, 40 42" strokeWidth="0.85" fill={color} fillOpacity="0.05" />
          <path d="M82 38 C90 44, 108 50, 112 44 C116 38, 100 32, 86 36" strokeWidth="0.9" fill={color} fillOpacity="0.06" />
          <path d="M82 38 C92 48, 110 62, 106 68 C102 74, 86 60, 80 42" strokeWidth="0.85" fill={color} fillOpacity="0.05" />
          <ellipse cx="60" cy="40" rx="22" ry="4.5" strokeWidth="1.0" fill={color} fillOpacity="0.08" transform="rotate(-2, 60, 40)" />
          <circle cx="40" cy="39.5" r="1.6" strokeWidth="0.8" fill={color} fillOpacity="0.5" />
          <circle cx="47" cy="39.8" r="1.5" strokeWidth="0.8" fill={color} fillOpacity="0.5" />
          <circle cx="54" cy="40" r="1.5" strokeWidth="0.8" fill={color} fillOpacity="0.5" />
          <circle cx="61" cy="40.2" r="1.5" strokeWidth="0.8" fill={color} fillOpacity="0.5" />
          <circle cx="68" cy="40" r="1.6" strokeWidth="0.8" fill={color} fillOpacity="0.5" />
          <circle cx="36" cy="39" r="4" strokeWidth="1.0" fill={color} fillOpacity="0.12" />
        </g>
      </svg>
    );
  }

  // Solid save-the-date version
  return (
    <svg
      width={size}
      height={size * (80 / 140)}
      viewBox="0 0 140 80"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      style={style}
    >
      <g fill={color} transform={transform} style={{ transformOrigin: "70px 40px" }}>
        {/* Upper wings */}
        <path d="M70 40 C58 26, 30 14, 14 22 C8 25, 14 34, 30 36 C44 38, 60 38, 70 40 Z" opacity="0.85" />
        <path d="M70 40 C82 26, 110 14, 126 22 C132 25, 126 34, 110 36 C96 38, 80 38, 70 40 Z" opacity="0.85" />
        {/* Lower wings */}
        <path d="M70 40 C60 50, 34 60, 22 56 C16 54, 22 46, 36 44 C50 42, 62 42, 70 40 Z" opacity="0.65" />
        <path d="M70 40 C80 50, 106 60, 118 56 C124 54, 118 46, 104 44 C90 42, 78 42, 70 40 Z" opacity="0.65" />
        {/* Body — head + thorax + segmented tail */}
        <circle cx="70" cy="36" r="4.2" />
        <ellipse cx="70" cy="42" rx="3.5" ry="5" />
        <rect x="68.5" y="46" width="3" height="22" rx="1.2" />
        <circle cx="70" cy="70" r="2" opacity="0.7" />
      </g>
    </svg>
  );
}

function Lotus({ size = 80, color = "#5A8FA0", variant = "solid", className = "", style = {} }) {
  if (variant === "line") {
    return (
      <svg
        width={size}
        height={size * (90 / 80)}
        viewBox="0 0 80 90"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={className}
        style={style}
      >
        <path d="M40 62 C36 54 28 48 22 44 C18 41 15 38 16 34 C17 30 21 29 25 31 C30 33 35 40 38 48 C39 52 40 57 40 62Z" stroke={color} strokeWidth="0.9" fill={color} fillOpacity="0.06" />
        <path d="M40 62 C44 54 52 48 58 44 C62 41 65 38 64 34 C63 30 59 29 55 31 C50 33 45 40 42 48 C41 52 40 57 40 62Z" stroke={color} strokeWidth="0.9" fill={color} fillOpacity="0.06" />
        <path d="M40 63 C38 50 36 38 36 28 C36 20 37 10 40 7 C43 10 44 20 44 28 C44 38 42 50 40 63Z" stroke={color} strokeWidth="1.1" fill={color} fillOpacity="0.09" />
        <path d="M12 70 C20 68.5 30 68 40 68 C50 68 60 68.5 68 70" stroke={color} strokeWidth="0.9" />
      </svg>
    );
  }

  // Solid save-the-date lotus — bud with horizontal stem
  return (
    <svg
      width={size}
      height={size * (50 / 110)}
      viewBox="0 0 110 50"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      style={style}
    >
      <g fill={color}>
        {/* Stem */}
        <path d="M30 30 C50 30, 80 30, 104 30" stroke={color} strokeWidth="1.2" fill="none" opacity="0.85" />
        {/* Tip leaf */}
        <ellipse cx="104" cy="30" rx="4" ry="2.4" opacity="0.85" />
        {/* Bud — three petals */}
        <path d="M30 30 C16 30, 8 22, 8 14 C8 9, 14 6, 18 10 C22 14, 26 22, 30 30 Z" opacity="0.7" />
        <path d="M30 30 C30 18, 26 8, 22 4 C20 2, 17 3, 16 6 C15 12, 20 22, 30 30 Z" opacity="0.85" />
        <path d="M30 30 C44 30, 50 24, 52 16 C53 11, 49 8, 45 11 C40 15, 34 22, 30 30 Z" opacity="0.75" />
        {/* Base */}
        <ellipse cx="30" cy="31" rx="6" ry="2" opacity="0.5" />
      </g>
    </svg>
  );
}

/* Small marquee separator (line + tiny dragonfly + line) */
function Separator({ color = "var(--color-sky-deep)" }) {
  return (
    <div className="flourish">
      <span className="l" />
      <Dragonfly size={36} color={color} />
      <span className="r" />
    </div>
  );
}

Object.assign(window, { Dragonfly, Lotus, Separator });