/* Tiny shared SVG primitives — the 4-point sparkles like on the mascot, etc. */

function Sparkle({ size = 32, color, style, className }) {
  // 4-point star, like the mascot's sparkles
  return (
    <svg
      width={size} height={size} viewBox="0 0 100 100"
      className={"sparkle " + (className || "")}
      style={{ color: color, ...style }}
    >
      <path d="M50 0 C52 30, 70 48, 100 50 C70 52, 52 70, 50 100 C48 70, 30 52, 0 50 C30 48, 48 30, 50 0 Z" />
    </svg>
  );
}

function Star({ size = 16, filled = true, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block' }}>
      <path
        d="M12 2 L14.9 8.6 L22 9.3 L16.7 14.1 L18.3 21 L12 17.4 L5.7 21 L7.3 14.1 L2 9.3 L9.1 8.6 Z"
        fill={filled ? color : 'none'}
        stroke={color}
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ArrowRight({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12 H19" />
      <path d="M13 6 L19 12 L13 18" />
    </svg>
  );
}

function IconPin({ size = 28, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s-7-6.4-7-12a7 7 0 1 1 14 0c0 5.6-7 12-7 12z" fill={color} stroke={color} />
      <circle cx="12" cy="9" r="2.5" fill="var(--cream-3)" stroke="none" />
    </svg>
  );
}

function IconClock({ size = 20, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round">
      <circle cx="12" cy="12" r="9.5" />
      <path d="M12 7 V12 L15.5 14" />
    </svg>
  );
}

function IconInstagram({ size = 20, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1.2" fill={color} />
    </svg>
  );
}

function IconBean({ size = 24, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2">
      <path d="M7 4 C13 3, 19 5, 20 12 C21 18, 16 21, 11 20 C5 19, 3 15, 4 10 C4.6 6.5, 6 5, 7 4 Z" fill={color} />
      <path d="M11 4 C9 9, 9 15, 13 20" stroke="var(--cream-3)" fill="none" strokeWidth="1.5" />
    </svg>
  );
}

function IconCup({ size = 22, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 8 H17 V15 A4 4 0 0 1 13 19 H8 A4 4 0 0 1 4 15 Z" />
      <path d="M17 10 H19 A2.5 2.5 0 0 1 19 15 H17" />
      <path d="M8 3 C7 4.5, 9 5.5, 8 7" />
      <path d="M12 3 C11 4.5, 13 5.5, 12 7" />
    </svg>
  );
}

function IconLeaf({ size = 22, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 4 C12 4, 4 8, 4 16 C4 18, 5 20, 7 20 C15 20, 20 12, 20 4 Z" fill={color} stroke={color} />
      <path d="M7 20 L14 13" stroke="var(--cream-3)" strokeWidth="1.5" />
    </svg>
  );
}

function IconWhatsapp({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <path d="M12 2 C6.5 2 2 6.5 2 12 c0 1.9 0.5 3.7 1.4 5.3 L2 22 l4.8-1.3 c1.5 0.8 3.3 1.3 5.2 1.3 c5.5 0 10-4.5 10-10 S17.5 2 12 2 z m0 18 c-1.6 0-3.1-0.4-4.4-1.2 l-0.3-0.2 l-2.9 0.8 l0.8-2.8 l-0.2-0.3 C4.4 15 4 13.5 4 12 C4 7.6 7.6 4 12 4 s8 3.6 8 8 s-3.6 8-8 8 z m4.5-5.9 c-0.2-0.1-1.5-0.7-1.7-0.8 c-0.2-0.1-0.4-0.1-0.6 0.1 c-0.2 0.2-0.7 0.8-0.8 1 c-0.1 0.2-0.3 0.2-0.5 0.1 c-0.2-0.1-1-0.4-1.9-1.2 c-0.7-0.6-1.2-1.4-1.3-1.6 c-0.1-0.2 0-0.4 0.1-0.5 c0.1-0.1 0.2-0.3 0.4-0.4 c0.1-0.1 0.2-0.2 0.3-0.4 c0.1-0.2 0-0.3 0-0.4 c0-0.1-0.6-1.4-0.8-1.9 c-0.2-0.5-0.4-0.4-0.6-0.4 c-0.1 0-0.3 0-0.5 0 c-0.2 0-0.5 0.1-0.7 0.3 c-0.2 0.2-0.9 0.9-0.9 2.2 c0 1.3 1 2.6 1.1 2.8 c0.1 0.2 1.9 2.9 4.6 4 c0.6 0.3 1.1 0.4 1.5 0.5 c0.6 0.2 1.2 0.2 1.6 0.1 c0.5-0.1 1.5-0.6 1.7-1.2 c0.2-0.6 0.2-1.1 0.1-1.2 c-0.1-0.1-0.2-0.2-0.4-0.3 z"/>
    </svg>
  );
}

/* Decorative wavy underline */
function WaveUnderline({ width = 220, color = 'currentColor' }) {
  return (
    <svg width={width} height="14" viewBox="0 0 220 14" fill="none">
      <path d="M2 7 Q 20 0, 38 7 T 74 7 T 110 7 T 146 7 T 182 7 T 218 7"
            stroke={color} strokeWidth="3.5" strokeLinecap="round" fill="none" />
    </svg>
  );
}

Object.assign(window, {
  Sparkle, Star, ArrowRight, IconPin, IconClock, IconInstagram,
  IconBean, IconCup, IconLeaf, IconWhatsapp, WaveUnderline
});
