// Motifs — hand-cut shapes echoing the official Hidden Playground price card art
// (sun, sage leaf, blob, squiggle, strawberry).
// Intentionally simple — these mirror what's already in the brand artwork.

function MotifSun({ size = 200, color = "var(--accent)", spikes = 12, style }) {
  const cx = 50, cy = 50, rInner = 14, rOuter = 48;
  const pts = [];
  for (let i = 0; i < spikes * 2; i++) {
    const r = i % 2 === 0 ? rOuter : rInner + 2;
    const a = (i / (spikes * 2)) * Math.PI * 2 - Math.PI / 2;
    pts.push(`${cx + Math.cos(a) * r},${cy + Math.sin(a) * r}`);
  }
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} style={style}>
      <polygon points={pts.join(" ")} fill={color} />
    </svg>
  );
}

function MotifLeaf({ size = 180, color = "var(--secondary)", style }) {
  return (
    <svg viewBox="0 0 120 140" width={size} height={size} style={style}>
      <path
        d="M60 8 C 22 22, 12 70, 30 110 C 44 138, 78 132, 96 108 C 116 80, 108 32, 60 8 Z"
        fill={color}
      />
      <path
        d="M60 18 C 58 50, 56 88, 56 122"
        stroke="rgba(255,255,255,0.55)"
        strokeWidth="1.5"
        fill="none"
      />
      <path
        d="M56 40 C 42 44, 36 56, 34 66 M58 60 C 44 64, 36 78, 36 88 M58 80 C 46 82, 40 92, 40 100"
        stroke="rgba(255,255,255,0.55)"
        strokeWidth="1.2"
        fill="none"
      />
    </svg>
  );
}

function MotifBlob({ size = 200, color = "var(--terracotta)", style }) {
  return (
    <svg viewBox="0 0 200 160" width={size} height={size} style={style}>
      <path
        d="M40,90 C20,60 50,20 100,18 C150,16 184,40 188,80 C192,120 150,150 110,142 C76,135 60,120 40,90 Z"
        fill={color}
      />
    </svg>
  );
}

function MotifSquiggle({ width = 320, color = "var(--sky)", style }) {
  return (
    <svg viewBox="0 0 400 80" width={width} height={width * 0.2} style={style}>
      <path
        d="M4,40 C 40,8 80,72 120,40 S 200,8 240,40 S 320,72 360,40 S 400,8 420,40"
        fill="none"
        stroke={color}
        strokeWidth="3"
        strokeLinecap="round"
      />
    </svg>
  );
}

function MotifStar({ size = 80, color = "#fff", style }) {
  return (
    <svg viewBox="0 0 40 40" width={size} height={size} style={style}>
      <path
        d="M20 2 C 22 16 24 18 38 20 C 24 22 22 24 20 38 C 18 24 16 22 2 20 C 16 18 18 16 20 2 Z"
        fill={color}
      />
    </svg>
  );
}

function MotifStrawberry({ size = 80, style }) {
  return (
    <svg viewBox="0 0 60 70" width={size} height={size} style={style}>
      {/* leaves */}
      <path
        d="M30 4 C 20 6 14 12 12 18 C 18 18 24 16 30 12 C 36 16 42 18 48 18 C 46 12 40 6 30 4 Z"
        fill="#7FA66A"
      />
      <rect x="29" y="14" width="2" height="6" fill="#4F7341" />
      {/* berry */}
      <path
        d="M30 18 C 14 18 6 30 8 44 C 10 58 22 68 30 68 C 38 68 50 58 52 44 C 54 30 46 18 30 18 Z"
        fill="#C0436A"
      />
      {/* seeds */}
      {[
        [22, 30], [30, 28], [38, 30], [18, 38], [26, 38], [34, 38], [42, 38],
        [22, 46], [30, 46], [38, 46], [26, 54], [34, 54], [30, 60]
      ].map(([x, y], i) => (
        <ellipse key={i} cx={x} cy={y} rx="1.2" ry="2" fill="#FBF4EE" transform={`rotate(${(i * 17) % 60 - 20} ${x} ${y})`} />
      ))}
    </svg>
  );
}

function MotifCloud({ size = 120, color = "var(--surface)", style }) {
  return (
    <svg viewBox="0 0 140 70" width={size} height={size * 0.5} style={style}>
      <path
        d="M22 50 C 6 50 6 30 22 30 C 24 14 50 14 54 28 C 60 14 90 18 90 34 C 110 30 122 50 108 56 C 92 64 30 64 22 50 Z"
        fill={color}
      />
    </svg>
  );
}

function MotifPin({ size = 64, style }) {
  return (
    <svg viewBox="0 0 40 60" width={size} height={size * 1.5} style={style}>
      <path
        d="M20 2 C 9 2 2 11 2 22 C 2 36 20 58 20 58 C 20 58 38 36 38 22 C 38 11 31 2 20 2 Z"
        fill="#C0436A"
      />
      <circle cx="20" cy="22" r="6" fill="#FBF4EE" />
    </svg>
  );
}

Object.assign(window, {
  MotifSun, MotifLeaf, MotifBlob, MotifSquiggle, MotifStar, MotifStrawberry, MotifCloud, MotifPin
});