/* Good Time Coffee — SVG illustrations (inline, line-art, on-brand) */

const Illu = {
  /* Coffee bean — single, with crease */
  Bean: ({ size = 80, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 100 100" width={size} height={size} fill="none" stroke={color} strokeWidth="1.4" {...p}>
      <ellipse cx="50" cy="50" rx="28" ry="40" transform="rotate(20 50 50)"/>
      <path d="M40 18 C 50 40, 50 60, 38 82" strokeLinecap="round"/>
      <path d="M62 22 C 52 42, 52 60, 64 80" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),

  /* Cup top-down with steam */
  CupTop: ({ size = 120, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 140 140" width={size} height={size} fill="none" stroke={color} strokeWidth="1.4" {...p}>
      <circle cx="70" cy="76" r="42"/>
      <circle cx="70" cy="76" r="34" opacity="0.4"/>
      <ellipse cx="70" cy="76" rx="22" ry="18" opacity="0.3"/>
      <path d="M118 76 q 8 0 8 8 q 0 8 -10 8" strokeLinecap="round"/>
      <path d="M58 18 q 4 6 0 12 q -4 6 0 12" strokeLinecap="round"/>
      <path d="M70 14 q 4 6 0 12 q -4 6 0 12" strokeLinecap="round" opacity="0.7"/>
      <path d="M82 18 q 4 6 0 12 q -4 6 0 12" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),

  /* Cup side profile (espresso) */
  CupSide: ({ size = 100, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 120 120" width={size} height={size} fill="none" stroke={color} strokeWidth="1.4" {...p}>
      <path d="M28 50 L 32 96 q 1 8 9 8 h 36 q 8 0 9 -8 L 90 50 Z"/>
      <path d="M28 50 h 62" strokeLinecap="round"/>
      <path d="M90 60 q 14 2 14 14 q 0 12 -14 14" strokeLinecap="round"/>
      <path d="M48 30 q 4 6 0 12" strokeLinecap="round"/>
      <path d="M60 24 q 4 8 0 16" strokeLinecap="round" opacity="0.6"/>
      <path d="M72 30 q 4 6 0 12" strokeLinecap="round" opacity="0.4"/>
    </svg>
  ),

  /* Coffee leaf */
  Leaf: ({ size = 80, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 100 100" width={size} height={size} fill="none" stroke={color} strokeWidth="1.4" {...p}>
      <path d="M20 80 C 20 40, 50 18, 84 16 C 82 50, 60 80, 20 80 Z"/>
      <path d="M20 80 C 40 64, 60 48, 84 16" strokeLinecap="round"/>
      <path d="M30 64 q 10 -4 18 -14 M40 50 q 10 -4 18 -14 M52 38 q 10 -4 18 -14" opacity="0.5" strokeLinecap="round"/>
    </svg>
  ),

  /* V60 dripper */
  Dripper: ({ size = 100, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 120 120" width={size} height={size} fill="none" stroke={color} strokeWidth="1.4" {...p}>
      <path d="M20 24 L 100 24 L 70 80 L 50 80 Z"/>
      <path d="M30 36 L 90 36" opacity="0.4"/>
      <path d="M38 48 L 82 48" opacity="0.4"/>
      <path d="M46 60 L 74 60" opacity="0.4"/>
      <path d="M58 86 v 10" strokeLinecap="round"/>
      <path d="M58 100 v 4" strokeLinecap="round" opacity="0.5"/>
      <path d="M40 110 q 18 -4 36 0" strokeLinecap="round"/>
    </svg>
  ),

  /* Moka pot */
  Moka: ({ size = 100, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 100 120" width={size} height={size} fill="none" stroke={color} strokeWidth="1.4" {...p}>
      <path d="M20 56 L 26 56 L 30 30 q 0 -6 6 -6 h 28 q 6 0 6 6 L 74 56 L 80 56" strokeLinejoin="round"/>
      <rect x="22" y="56" width="56" height="48" rx="2"/>
      <path d="M30 56 L 70 56" opacity="0.4"/>
      <path d="M38 38 L 62 38" opacity="0.4"/>
      <path d="M78 70 q 16 4 16 16 q 0 10 -16 14" strokeLinecap="round"/>
      <circle cx="46" cy="22" r="3"/>
    </svg>
  ),

  /* Steam wisps (decorative) */
  Steam: ({ size = 80, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 100 100" width={size} height={size} fill="none" stroke={color} strokeWidth="1.4" {...p}>
      <path d="M30 90 q 4 -10 0 -20 q -4 -10 0 -20 q 4 -10 0 -20" strokeLinecap="round"/>
      <path d="M50 92 q 4 -10 0 -20 q -4 -10 0 -20 q 4 -10 0 -20 q -4 -10 0 -20" strokeLinecap="round" opacity="0.7"/>
      <path d="M70 90 q 4 -10 0 -20 q -4 -10 0 -20 q 4 -10 0 -20" strokeLinecap="round" opacity="0.4"/>
    </svg>
  ),

  /* Star (small, for ratings) */
  Sparkle: ({ size = 24, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={color} {...p}>
      <path d="M12 2 L 13.5 10 L 22 12 L 13.5 14 L 12 22 L 10.5 14 L 2 12 L 10.5 10 Z"/>
    </svg>
  ),

  /* Bean cluster (decorative) */
  BeanCluster: ({ size = 200, color = "currentColor", ...p }) => (
    <svg viewBox="0 0 200 160" width={size} height={size * 0.8} fill="none" stroke={color} strokeWidth="1.3" {...p}>
      <ellipse cx="60" cy="80" rx="20" ry="30" transform="rotate(-15 60 80)"/>
      <path d="M52 56 q 4 14 4 28 q 0 14 -2 26" opacity="0.6" strokeLinecap="round"/>
      <ellipse cx="110" cy="60" rx="20" ry="30" transform="rotate(25 110 60)"/>
      <path d="M114 36 q -4 14 -4 28 q 0 14 4 26" opacity="0.6" strokeLinecap="round"/>
      <ellipse cx="140" cy="100" rx="20" ry="30" transform="rotate(-10 140 100)"/>
      <path d="M134 76 q 4 14 4 28 q 0 14 -2 26" opacity="0.6" strokeLinecap="round"/>
      <ellipse cx="80" cy="120" rx="18" ry="26" transform="rotate(35 80 120)"/>
      <path d="M84 98 q -3 12 -3 24 q 0 12 3 22" opacity="0.5" strokeLinecap="round"/>
    </svg>
  ),

  /* Process diagram dots (origin → roast → cup) */
  Process: ({ color = "currentColor", ...p }) => (
    <svg viewBox="0 0 240 60" width="240" height="60" fill="none" stroke={color} strokeWidth="1.3" {...p}>
      <circle cx="20" cy="30" r="14"/>
      <ellipse cx="20" cy="30" rx="6" ry="10"/>
      <path d="M40 30 L 100 30" strokeDasharray="2 4"/>
      <circle cx="120" cy="30" r="16"/>
      <path d="M108 18 q 12 6 24 0 M108 30 q 12 6 24 0 M108 42 q 12 6 24 0" opacity="0.5"/>
      <path d="M140 30 L 200 30" strokeDasharray="2 4"/>
      <path d="M212 22 L 216 44 q 0 4 4 4 h 8 q 4 0 4 -4 L 232 22 Z"/>
      <path d="M232 30 q 6 1 6 6 q 0 5 -6 6"/>
    </svg>
  ),
};

window.Illu = Illu;
