// Reusable illustrated container SVG for "dumpster size" cards.
// Drawn with flat sage + amber-accent geometry — reads at any size without
// adding photo assets.

const CCDumpsterSVG = ({ size = 120, tint = '#7BC57F' }) => (
  <svg width={size} height={size * 0.7} viewBox="0 0 180 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="cc-dmp-body" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={tint} stopOpacity="0.25"/>
        <stop offset="1" stopColor={tint} stopOpacity="0.05"/>
      </linearGradient>
    </defs>
    {/* ground line */}
    <line x1="10" y1="104" x2="170" y2="104" stroke={tint} strokeOpacity="0.25" strokeWidth="1" strokeDasharray="3 4"/>
    {/* wheels */}
    <circle cx="38" cy="104" r="5" fill="#0D1815" stroke={tint} strokeOpacity="0.4" strokeWidth="1.25"/>
    <circle cx="142" cy="104" r="5" fill="#0D1815" stroke={tint} strokeOpacity="0.4" strokeWidth="1.25"/>
    {/* body */}
    <path d="M20 40 L160 40 L150 100 L30 100 Z" fill="url(#cc-dmp-body)" stroke={tint} strokeWidth="1.5" strokeLinejoin="round"/>
    {/* top rim */}
    <line x1="20" y1="40" x2="160" y2="40" stroke={tint} strokeWidth="2" strokeLinecap="round"/>
    {/* ribs */}
    <line x1="55" y1="44" x2="48" y2="96" stroke={tint} strokeOpacity="0.5" strokeWidth="1"/>
    <line x1="90" y1="44" x2="90" y2="96" stroke={tint} strokeOpacity="0.5" strokeWidth="1"/>
    <line x1="125" y1="44" x2="132" y2="96" stroke={tint} strokeOpacity="0.5" strokeWidth="1"/>
    {/* debris (amber accent) */}
    <rect x="44" y="28" width="14" height="14" rx="1" fill="#F5C443" fillOpacity="0.8" transform="rotate(-8 51 35)"/>
    <rect x="74" y="22" width="22" height="10" rx="1" fill="#F5C443" fillOpacity="0.55" transform="rotate(4 85 27)"/>
    <rect x="108" y="30" width="16" height="12" rx="1" fill="#F5C443" fillOpacity="0.7" transform="rotate(-3 116 36)"/>
  </svg>
);

Object.assign(window, { CCDumpsterSVG });