// brownie/brownie-svg.jsx — the big tappable brownie square.
// Original design: a square slab of brownie with chunky chocolate pieces
// and a warm glossy highlight. No reference material used.

function BrownieSVG({ crack = 0 }) {
  // crack: 0-1, cosmetic "more chips fallen off" as you prestige more
  return (
    <svg viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="bTop" cx="0.35" cy="0.3" r="0.9">
          <stop offset="0%" stopColor="#8a4e2c" />
          <stop offset="50%" stopColor="#5a2d16" />
          <stop offset="100%" stopColor="#2a1408" />
        </radialGradient>
        <linearGradient id="bSide" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#4a2414" />
          <stop offset="100%" stopColor="#1e0e06" />
        </linearGradient>
        <radialGradient id="chip" cx="0.4" cy="0.3" r="0.8">
          <stop offset="0%" stopColor="#4a1d0a" />
          <stop offset="100%" stopColor="#180800" />
        </radialGradient>
        <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2" />
        </filter>
      </defs>

      {/* back/side shadow — a slab with depth */}
      <rect x="20" y="40" width="200" height="188" rx="18" fill="url(#bSide)" />

      {/* top surface */}
      <rect x="20" y="28" width="200" height="176" rx="18" fill="url(#bTop)" />

      {/* texture speckles */}
      {Array.from({ length: 40 }).map((_, i) => {
        const x = 30 + (i * 37) % 180;
        const y = 38 + ((i * 53) % 160);
        const r = 1 + (i % 3) * 0.6;
        return <circle key={i} cx={x} cy={y} r={r} fill="#2a1408" opacity="0.55" />;
      })}

      {/* cracks */}
      <path d="M 60,80 Q 85,95 72,120 Q 65,135 90,145" stroke="#1a0a02" strokeWidth="2" fill="none" opacity="0.7" strokeLinecap="round" />
      <path d="M 140,60 Q 155,85 170,100 Q 180,120 160,140" stroke="#1a0a02" strokeWidth="2" fill="none" opacity="0.55" strokeLinecap="round" />
      <path d="M 100,170 Q 120,180 145,175" stroke="#1a0a02" strokeWidth="1.6" fill="none" opacity="0.5" strokeLinecap="round" />

      {/* chocolate chips — chunky polygons */}
      <g>
        <polygon points="65,55 85,48 92,68 78,78 60,72" fill="url(#chip)" stroke="#080200" strokeWidth="1" />
        <polygon points="62,57 80,52 86,64" fill="#6a2e14" opacity="0.6" />
      </g>
      <g>
        <polygon points="145,80 168,72 178,92 162,104 142,96" fill="url(#chip)" stroke="#080200" strokeWidth="1" />
        <polygon points="144,83 165,76 172,88" fill="#6a2e14" opacity="0.6" />
      </g>
      <g>
        <polygon points="95,115 118,108 128,130 108,140 88,130" fill="url(#chip)" stroke="#080200" strokeWidth="1" />
        <polygon points="95,118 117,112 124,124" fill="#6a2e14" opacity="0.6" />
      </g>
      <g>
        <polygon points="155,150 178,148 185,170 170,180 152,168" fill="url(#chip)" stroke="#080200" strokeWidth="1" />
        <polygon points="155,152 176,150 182,164" fill="#6a2e14" opacity="0.6" />
      </g>
      <g>
        <polygon points="50,150 72,148 78,168 60,178 42,168" fill="url(#chip)" stroke="#080200" strokeWidth="1" />
        <polygon points="50,152 70,150 76,162" fill="#6a2e14" opacity="0.6" />
      </g>

      {/* glossy highlight */}
      <path d="M 50 50 Q 100 40 140 50 Q 110 55 75 62 Q 58 64 50 50 Z" fill="#ffeac2" opacity="0.16" />

      {/* sprinkled crumbs on top */}
      {Array.from({ length: 12 }).map((_, i) => {
        const x = 35 + (i * 29) % 170;
        const y = 42 + ((i * 41) % 150);
        return <circle key={`cr${i}`} cx={x} cy={y} r="1.4" fill="#f0c78d" opacity="0.7" />;
      })}
    </svg>
  );
}

// Little cursor bot SVG (orbiting "helpers" that visually tap the brownie)
function CursorBotSVG() {
  return (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M 4,3 L 4,18 L 9,14 L 12,21 L 15,19 L 12,13 L 18,12 Z"
        fill="#f6e9cf" stroke="#2a1408" strokeWidth="1.2" strokeLinejoin="round" />
    </svg>
  );
}

// Producer icons — each is a tiny SVG so they have personality.
// 18 unique icons in 16x16 viewBox, no emoji.
const PRODUCER_ICONS = {
  spoon: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#f6e9cf" strokeWidth="1.8" strokeLinecap="round">
      <ellipse cx="8" cy="8" rx="4" ry="5" fill="#c48150" stroke="#3b2214"/>
      <path d="M 10 11 L 18 19" stroke="#8a5a35"/>
    </g></svg>
  ),
  whisk: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#f6e9cf" strokeWidth="1.6" strokeLinecap="round">
      <path d="M 12 3 L 12 14" stroke="#8a5a35" strokeWidth="2.5"/>
      <ellipse cx="12" cy="17" rx="5" ry="4" fill="none" stroke="#c48150"/>
      <path d="M 8 14 Q 12 22 16 14 M 10 13 Q 12 20 14 13"/>
    </g></svg>
  ),
  mixer: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#f6e9cf" strokeWidth="1.4">
      <rect x="4" y="4" width="16" height="7" rx="2" fill="#c48150" stroke="#3b2214"/>
      <rect x="8" y="11" width="8" height="3" fill="#8a5a35" stroke="#3b2214"/>
      <ellipse cx="12" cy="18" rx="6" ry="3" fill="#3b2214"/>
      <circle cx="17" cy="7" r="1" fill="#f2c879"/>
    </g></svg>
  ),
  oven: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#f6e9cf" strokeWidth="1.4">
      <rect x="3" y="4" width="18" height="17" rx="1.5" fill="#5a3722" stroke="#2a1408"/>
      <rect x="5" y="10" width="14" height="8" rx="1" fill="#2a1408" stroke="#1a0a02"/>
      <rect x="6" y="11" width="12" height="6" fill="#f2c879" opacity="0.7"/>
      <circle cx="7" cy="7" r="0.9" fill="#f2c879"/>
      <circle cx="11" cy="7" r="0.9" fill="#f2c879"/>
      <circle cx="15" cy="7" r="0.9" fill="#f2c879"/>
    </g></svg>
  ),
  stall: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#f6e9cf" strokeWidth="1.2">
      <path d="M 3 9 L 12 4 L 21 9 L 21 11 L 3 11 Z" fill="#b03a55" stroke="#2a1408"/>
      <path d="M 4 11 Q 7 13 10 11 Q 13 13 16 11 Q 19 13 22 11" stroke="#2a1408" fill="none"/>
      <rect x="5" y="11" width="14" height="9" fill="#c48150" stroke="#3b2214"/>
      <rect x="8" y="15" width="8" height="5" fill="#3b2214"/>
    </g></svg>
  ),
  foodtruck: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.3">
      <path d="M 2 17 L 2 10 L 12 10 L 14 7 L 20 7 L 22 10 L 22 17 Z" fill="#c48150"/>
      <rect x="15" y="9" width="5" height="4" fill="#f6e9cf" stroke="#2a1408"/>
      <circle cx="6" cy="18" r="2" fill="#1a0a02"/>
      <circle cx="18" cy="18" r="2" fill="#1a0a02"/>
      <rect x="4" y="12" width="6" height="4" fill="#8a5a35"/>
    </g></svg>
  ),
  bakery: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.2">
      <path d="M 2 20 L 2 9 L 12 3 L 22 9 L 22 20 Z" fill="#c48150"/>
      <rect x="9" y="12" width="6" height="8" fill="#5a3722"/>
      <rect x="4" y="12" width="4" height="4" fill="#f2c879"/>
      <rect x="16" y="12" width="4" height="4" fill="#f2c879"/>
      <path d="M 2 9 L 22 9" stroke="#2a1408"/>
    </g></svg>
  ),
  chain: (
    <svg viewBox="0 0 24 24"><g fill="#c48150" stroke="#2a1408" strokeWidth="1">
      <rect x="2" y="11" width="6" height="10"/>
      <rect x="9" y="6" width="6" height="15"/>
      <rect x="16" y="9" width="6" height="12"/>
      <rect x="3.5" y="13" width="2" height="2" fill="#f2c879"/>
      <rect x="11" y="8" width="2" height="2" fill="#f2c879"/>
      <rect x="17.5" y="11" width="2" height="2" fill="#f2c879"/>
    </g></svg>
  ),
  warehouse: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.2">
      <rect x="2" y="10" width="20" height="11" fill="#8a5a35"/>
      <path d="M 2 10 L 12 4 L 22 10" fill="#5a3722"/>
      <rect x="5" y="14" width="4" height="7" fill="#3b2214"/>
      <rect x="11" y="14" width="2" height="7" fill="#3b2214"/>
      <rect x="15" y="14" width="4" height="7" fill="#3b2214"/>
    </g></svg>
  ),
  factory: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.2">
      <path d="M 2 21 L 2 12 L 8 15 L 8 10 L 14 14 L 14 8 L 22 12 L 22 21 Z" fill="#5a3722"/>
      <rect x="4" y="5" width="3" height="6" fill="#8a5a35"/>
      <rect x="17" y="3" width="3" height="9" fill="#8a5a35"/>
      <ellipse cx="5.5" cy="4" rx="2" ry="1.5" fill="#f6e9cf" opacity="0.8"/>
      <ellipse cx="18.5" cy="2" rx="2.5" ry="1.7" fill="#f6e9cf" opacity="0.8"/>
    </g></svg>
  ),
  farm: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.2">
      <rect x="2" y="16" width="20" height="5" fill="#6ca97a"/>
      <path d="M 4 17 L 6 14 L 6 17 M 10 17 L 12 14 L 12 17 M 16 17 L 18 14 L 18 17" stroke="#3b6a44" fill="#3b6a44"/>
      <circle cx="7" cy="8" r="3" fill="#c48150"/>
      <path d="M 7 5 L 7 8 M 4.5 7 L 9.5 7" stroke="#2a1408"/>
      <circle cx="15" cy="10" r="2.5" fill="#c48150"/>
    </g></svg>
  ),
  plantation: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1">
      <rect x="0" y="16" width="24" height="5" fill="#6ca97a"/>
      <ellipse cx="4" cy="12" rx="2.5" ry="4" fill="#3b6a44"/>
      <ellipse cx="9" cy="11" rx="2.5" ry="4.5" fill="#3b6a44"/>
      <ellipse cx="15" cy="11" rx="2.5" ry="4.5" fill="#3b6a44"/>
      <ellipse cx="20" cy="12" rx="2.5" ry="4" fill="#3b6a44"/>
      <ellipse cx="9" cy="10" rx="0.8" ry="1.3" fill="#c48150"/>
      <ellipse cx="15" cy="10" rx="0.8" ry="1.3" fill="#c48150"/>
    </g></svg>
  ),
  lab: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.2">
      <path d="M 9 3 L 9 10 L 5 18 Q 5 21 8 21 L 16 21 Q 19 21 19 18 L 15 10 L 15 3 Z" fill="#f6e9cf"/>
      <path d="M 5 18 Q 5 21 8 21 L 16 21 Q 19 21 19 18 Z" fill="#b03a55"/>
      <circle cx="11" cy="17" r="0.8" fill="#f2c879"/>
      <circle cx="14" cy="19" r="0.6" fill="#f2c879"/>
      <line x1="8" y1="3" x2="16" y2="3" strokeWidth="1.8"/>
    </g></svg>
  ),
  hq: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1">
      <rect x="4" y="4" width="16" height="17" fill="#5a3722"/>
      <g fill="#f2c879">
        <rect x="6" y="6" width="2" height="2"/>
        <rect x="10" y="6" width="2" height="2"/>
        <rect x="14" y="6" width="2" height="2"/>
        <rect x="18" y="6" width="1" height="2"/>
        <rect x="6" y="10" width="2" height="2"/>
        <rect x="10" y="10" width="2" height="2"/>
        <rect x="14" y="10" width="2" height="2"/>
        <rect x="18" y="10" width="1" height="2"/>
        <rect x="6" y="14" width="2" height="2"/>
        <rect x="14" y="14" width="2" height="2"/>
      </g>
      <rect x="10" y="17" width="4" height="4" fill="#2a1408"/>
    </g></svg>
  ),
  academy: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.2">
      <path d="M 2 10 L 12 5 L 22 10 L 12 15 Z" fill="#3b2214"/>
      <path d="M 6 12 L 6 17 Q 12 20 18 17 L 18 12" fill="#c48150" stroke="#2a1408"/>
      <line x1="20" y1="10" x2="20" y2="16" stroke="#2a1408"/>
      <circle cx="20" cy="17" r="1" fill="#f2c879"/>
    </g></svg>
  ),
  vault: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.3">
      <circle cx="12" cy="12" r="9" fill="#5a3722"/>
      <circle cx="12" cy="12" r="5" fill="#3b2214"/>
      <circle cx="12" cy="12" r="1.5" fill="#f2c879"/>
      <line x1="12" y1="3" x2="12" y2="6" strokeWidth="2"/>
      <line x1="12" y1="18" x2="12" y2="21" strokeWidth="2"/>
      <line x1="3" y1="12" x2="6" y2="12" strokeWidth="2"/>
      <line x1="18" y1="12" x2="21" y2="12" strokeWidth="2"/>
    </g></svg>
  ),
  dimension: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1">
      <ellipse cx="12" cy="12" rx="10" ry="4" fill="none" stroke="#b03a55" strokeWidth="1.3"/>
      <ellipse cx="12" cy="12" rx="4" ry="10" fill="none" stroke="#c48150" strokeWidth="1.3"/>
      <circle cx="12" cy="12" r="3" fill="#3b2214"/>
      <circle cx="10" cy="11" r="1" fill="#f2c879"/>
    </g></svg>
  ),
  ancestor: (
    <svg viewBox="0 0 24 24"><g fill="none" stroke="#2a1408" strokeWidth="1.2">
      <path d="M 6 21 L 6 14 Q 6 8 12 8 Q 18 8 18 14 L 18 21 Z" fill="#c48150"/>
      <circle cx="12" cy="6" r="3.5" fill="#f6e9cf"/>
      <circle cx="10.5" cy="5.5" r="0.5" fill="#2a1408"/>
      <circle cx="13.5" cy="5.5" r="0.5" fill="#2a1408"/>
      <path d="M 11 7 Q 12 8 13 7" stroke="#2a1408"/>
      <circle cx="12" cy="2.5" r="2" fill="#f2c879"/>
      <path d="M 10 2 L 12 0 L 14 2" stroke="#f2c879" fill="#f2c879"/>
    </g></svg>
  ),
};

Object.assign(window, { BrownieSVG, CursorBotSVG, BE_PRODUCER_ICONS: PRODUCER_ICONS });
