// Decorative brand motifs — pure SVG, used as scattered ornaments.

function Sparkle({ size = 24, color = '#FEA9ED', style, className }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true" style={style} className={className}>
      <path d="M50 4 C 51 30, 55 45, 96 50 C 55 55, 51 70, 50 96 C 49 70, 45 55, 4 50 C 45 45, 49 30, 50 4 Z" fill={color}/>
    </svg>
  );
}

function Pinwheel({ size = 80, color = '#8A61F8', style, className }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true" style={style} className={className}>
      <g fill={color}>
        <path d="M50 6 C 56 30, 50 46, 50 50 C 50 46, 44 30, 50 6 Z"/>
        <path d="M94 50 C 70 56, 54 50, 50 50 C 54 50, 70 44, 94 50 Z"/>
        <path d="M50 94 C 44 70, 50 54, 50 50 C 50 54, 56 70, 50 94 Z"/>
        <path d="M6 50 C 30 44, 46 50, 50 50 C 46 50, 30 56, 6 50 Z"/>
      </g>
    </svg>
  );
}

function DiamondBurst({ size = 60, color = '#8A61F8', style, className }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true" style={style} className={className}>
      <path d="M50 6 L 60 40 L 94 50 L 60 60 L 50 94 L 40 60 L 6 50 L 40 40 Z" fill={color}/>
    </svg>
  );
}

// Long curly squiggle — sits along yellow callout corners
function Squiggle({ width = 240, height = 120, color = '#8A61F8', strokeWidth = 4, style, className }) {
  return (
    <svg width={width} height={height} viewBox="0 0 200 100" aria-hidden="true" style={style} className={className} preserveAspectRatio="none">
      <path d="M 10 50 C 20 10, 60 10, 60 50 S 100 90, 100 50 S 140 10, 140 50 S 190 80, 190 50"
            fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round"/>
    </svg>
  );
}

// Dashed arc — connects the 4 "How It Works" cards
function DashedArc({ width = 800, height = 60, color = '#8A61F8', style, className }) {
  return (
    <svg width={width} height={height} viewBox="0 0 200 50" aria-hidden="true" style={style} className={className} preserveAspectRatio="none">
      <path d="M 10 25 C 45 18, 62 32, 92 25 S 145 18, 190 25"
            fill="none" stroke={color} strokeWidth="1.5"
            strokeDasharray="4 5" strokeLinecap="round"/>
    </svg>
  );
}

// Arrow with curl — yellow on purple banners
function CurlArrow({ size = 100, color = '#FFD45D', flip = false, style, className }) {
  return (
    <svg width={size} height={size * 0.8} viewBox="0 0 120 100" aria-hidden="true" style={{ transform: flip ? 'scaleX(-1)' : undefined, ...style }} className={className}>
      <path d="M 10 80 C 20 20, 80 10, 110 40" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round"/>
      <path d="M 100 30 L 112 38 L 102 50" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Checker — green-yellow squares grid
function Checker({ size = 80, color = '#C6F264', style, className }) {
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" aria-hidden="true" style={style} className={className}>
      <g fill={color}>
        <rect x="0"  y="0"  width="18" height="18" rx="2" transform="rotate(15 9 9)"/>
        <rect x="22" y="22" width="18" height="18" rx="2" transform="rotate(15 31 31)"/>
        <rect x="22" y="0"  width="18" height="18" rx="2" transform="rotate(15 31 9)" opacity="0.6"/>
        <rect x="0"  y="22" width="18" height="18" rx="2" transform="rotate(15 9 31)" opacity="0.6"/>
      </g>
    </svg>
  );
}

// Long organic purple curve / leaf — generic fallback
function PurpleLeaf({ width = 220, height = 380, color = '#8A61F8', style, className }) {
  return (
    <svg viewBox="0 0 200 380" width={width} height={height} aria-hidden="true" style={style} className={className}>
      <path d="M 30 20 C 60 0, 120 -5, 160 15 C 195 30, 200 90, 195 140 L 180 270 C 170 340, 100 380, 50 360 C 5 340, -10 280, 5 220 L 18 90 C 22 60, 5 35, 30 20 Z" fill={color} />
    </svg>
  );
}

// The actual Figma decorative blob path (extracted from /DESIGN-AREA/Homepage/Path.svg).
// A tall, curling leaf shape used in corners of yellow callout containers.
function FigBlob({ width = 180, height = 420, color = '#8A61F8', style, className }) {
  return (
    <img src="src/assets/fig-blob.svg" aria-hidden="true"
         alt="" width={width} height={height}
         style={{
           filter: color === '#8A61F8'
             ? 'brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(2555%) hue-rotate(225deg) brightness(101%) contrast(95%)'
             : undefined,
           pointerEvents: 'none',
           ...style,
         }}
         className={className} />
  );
}

// Pink burst / fan rays — used in CTAs and About hero corners
function PinkFan({ size = 120, color = '#FEA9ED', style, className }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true" style={style} className={className}>
      <g fill={color}>
        {[...Array(7)].map((_, i) => {
          const angle = (i - 3) * 18;
          return <path key={i} d={`M 50 50 L 46 0 L 54 0 Z`} transform={`rotate(${angle} 50 50)`} />;
        })}
        <circle cx="50" cy="50" r="6" />
      </g>
    </svg>
  );
}

// 3×3 dot grid
function DotGrid({ rows = 3, cols = 3, color = '#8A61F8', dot = 7, gap = 8, style, className }) {
  return (
    <span style={{
      display: 'inline-grid',
      gridTemplateColumns: `repeat(${cols}, ${dot}px)`,
      gap,
      ...style,
    }} className={className}>
      {Array.from({ length: rows * cols }).map((_, i) => (
        <i key={i} style={{ width: dot, height: dot, borderRadius: 999, background: color, display: 'inline-block' }}/>
      ))}
    </span>
  );
}

// Halftone dot tile (used on photo cut-outs background)
function HalftoneTile({ color = '#A181F9', size = 11, dot = 1.6, style, className }) {
  return (
    <div style={{
      backgroundImage: `radial-gradient(${color} ${dot}px, transparent ${dot + 0.2}px)`,
      backgroundSize: `${size}px ${size}px`,
      ...style,
    }} className={className}/>
  );
}

Object.assign(window, {
  Sparkle, Pinwheel, DiamondBurst, Squiggle, DashedArc, CurlArrow,
  Checker, PurpleLeaf, FigBlob, PinkFan, DotGrid, HalftoneTile,
});