// Tallow Jar SVG illustration
function JarSVG({ size = 200, light = false }) {
  const lidColor = light ? "#e8e8e8" : "#d0d0d0";
  const jarColor = light ? "rgba(255,255,255,0.92)" : "rgba(255,255,255,0.88)";
  const tallowColor = "#F2D77E";
  const tallowDark = "#D4A82A";

  return (
    <svg width={size} height={size * 1.15} viewBox="0 0 200 230" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Lid */}
      <rect x="38" y="18" width="124" height="28" rx="6" fill={lidColor} stroke="#bbb" strokeWidth="1.5"/>
      <rect x="42" y="22" width="116" height="20" rx="4" fill="#e0e0e0"/>
      <rect x="50" y="26" width="100" height="3" rx="1.5" fill="#ccc"/>
      <rect x="50" y="31" width="100" height="3" rx="1.5" fill="#ccc"/>
      <rect x="50" y="36" width="100" height="3" rx="1.5" fill="#ccc"/>

      {/* Jar body */}
      <path d="M44 46 H156 L162 210 H38 Z" fill={jarColor} stroke="#ccc" strokeWidth="1.5"/>
      {/* Tallow fill */}
      <path d="M46 120 H154 L158 210 H42 Z" fill={tallowColor}/>
      <path d="M46 120 Q100 112 154 120" stroke={tallowDark} strokeWidth="2" fill="none"/>
      {/* Shine */}
      <path d="M56 60 Q62 100 58 150" stroke="rgba(255,255,255,0.6)" strokeWidth="6" strokeLinecap="round"/>

      {/* Label */}
      <rect x="52" y="62" width="96" height="100" rx="6" fill="white" stroke="#eee" strokeWidth="1"/>
      {/* Label content - CLEANFATS arc text effect */}
      <text x="100" y="82" textAnchor="middle" fontFamily="'Black Han Sans', Impact, sans-serif" fontSize="11" fill="#111" letterSpacing="2">CLEANFATS™</text>
      <text x="100" y="110" textAnchor="middle" fontFamily="'Black Han Sans', Impact, sans-serif" fontSize="20" fontWeight="900" fill="#111">BEEF</text>
      <text x="100" y="132" textAnchor="middle" fontFamily="'Black Han Sans', Impact, sans-serif" fontSize="20" fontWeight="900" fill="#F5C400" stroke="#111" strokeWidth="1">TALLOW</text>
      <text x="100" y="150" textAnchor="middle" fontFamily="sans-serif" fontSize="7" fill="#555" letterSpacing="0.5">Made from 100% Grass-Fed/Finished Beef Suet</text>
    </svg>
  );
}

Object.assign(window, { JarSVG });