// Roll-off dumpster — green editorial illustration with a separate lid <g> for GSAP scroll-rotation.

const Dumpster = React.forwardRef(function Dumpster(
  { color = "#3A4A2F", trim = "#1A1A1A", label = "ROLL-OFF · 30YD", id = "DPST-001", lidRef, contentsRef },
  ref
) {
  return (
    <svg ref={ref} viewBox="0 0 900 420" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "auto", display: "block", overflow: "visible" }}>
      <defs>
        <pattern id={`hatch-${id}`} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(0,0,0,0.18)" strokeWidth="1" />
        </pattern>
      </defs>

      {/* contents — appear as lid opens */}
      <g ref={contentsRef} style={{ opacity: 0 }}>
        {/* tire */}
        <ellipse cx="280" cy="180" rx="48" ry="20" fill={trim} />
        <ellipse cx="280" cy="180" rx="22" ry="9" fill="#FAF8F1" />
        {/* crumpled paper */}
        <path d="M 380 175 q 10 -22 30 -18 q 18 -28 36 -10 q 14 -2 18 14 q 12 8 -2 18 q -10 14 -28 8 q -16 14 -34 0 q -20 -4 -20 -12 z" fill="#FAF8F1" stroke={trim} strokeWidth="1.5" />
        {/* banana / debris */}
        <path d="M 500 170 q 30 -30 70 -10 q -10 18 -34 22 q -28 6 -36 -12 z" fill="#F4D03F" stroke={trim} strokeWidth="1.5" />
        {/* box */}
        <g>
          <path d="M 600 195 l 90 -22 l 16 32 l -90 22 z" fill="#D4B896" stroke={trim} strokeWidth="1.5" />
          <path d="M 600 195 l 90 -22 l 4 -10 l -88 22 z" fill="#b89868" stroke={trim} strokeWidth="1.5" />
        </g>
        {/* bottle */}
        <g transform="translate(180 178) rotate(-22)">
          <rect x="0" y="0" width="14" height="42" fill="#0A3161" stroke={trim} strokeWidth="1.5" />
          <rect x="3" y="-8" width="8" height="10" fill={trim} />
        </g>
        {/* small wisp */}
        <path d="M 420 150 q 6 -16 22 -16 q 4 -14 18 -10 q 10 -2 12 8 q 10 4 0 14 q -10 12 -22 6 q -14 8 -22 -2 z" fill="#E9E0C5" stroke={trim} strokeWidth="1.2" />
      </g>

      {/* dumpster body */}
      <g>
        <ellipse cx="450" cy="395" rx="380" ry="14" fill="rgba(0,0,0,0.22)" />

        <path d="M 80 200 L 820 200 L 760 380 L 140 380 Z" fill={color} stroke={trim} strokeWidth="3" />
        <path d="M 80 200 L 820 200 L 760 380 L 140 380 Z" fill={`url(#hatch-${id})`} />

        {[140, 220, 300, 380, 460, 540, 620, 700].map((x, i) => (
          <line key={i} x1={x + 10} y1="210" x2={x - 10} y2="370" stroke={trim} strokeWidth="1.5" opacity="0.7" />
        ))}

        <rect x="80" y="200" width="740" height="14" fill={trim} />
        <rect x="80" y="195" width="740" height="6" fill="#FAF8F1" stroke={trim} strokeWidth="1.5" />

        <rect x="160" y="380" width="40" height="14" fill={trim} />
        <rect x="700" y="380" width="40" height="14" fill={trim} />

        {/* stenciled label */}
        <g transform="translate(280 290)">
          <rect x="-10" y="-26" width="340" height="62" fill="none" stroke="#FAF8F1" strokeWidth="2" strokeDasharray="4 4" opacity="0.55" />
          <text x="0" y="0" fontFamily="JetBrains Mono, monospace" fontSize="22" fill="#FAF8F1" letterSpacing="3" fontWeight="700">{label}</text>
          <text x="0" y="22" fontFamily="JetBrains Mono, monospace" fontSize="12" fill="#FAF8F1" letterSpacing="3">UNIT NO. {id}</text>
        </g>

        {/* MR. GARBAGE USA stamp */}
        <g transform="translate(610 320) rotate(-4)">
          <rect x="-4" y="-14" width="120" height="34" fill="none" stroke="#FAF8F1" strokeWidth="1.5" />
          <text x="0" y="0" fontFamily="Cormorant Garamond" fontStyle="italic" fontSize="16" fill="#FAF8F1" fontWeight="600">Mr. Garbage</text>
          <text x="0" y="14" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#FAF8F1" letterSpacing="3">U·S·A</text>
        </g>
      </g>

      {/* LID — pivots from back-left edge */}
      <g ref={lidRef} style={{ transformOrigin: "85px 200px", transformBox: "fill-box" }}>
        <path d="M 80 200 L 820 200 L 800 188 L 100 188 Z" fill={trim} stroke={trim} strokeWidth="2" />
        <path d="M 100 188 L 800 188 L 780 176 L 120 176 Z" fill={color} stroke={trim} strokeWidth="2" />
        <path d="M 100 188 L 800 188 L 780 176 L 120 176 Z" fill={`url(#hatch-${id})`} />
        <circle cx="120" cy="194" r="3" fill="#FAF8F1" />
        <circle cx="780" cy="194" r="3" fill="#FAF8F1" />
        <rect x="430" y="170" width="40" height="6" fill="#FAF8F1" stroke={trim} strokeWidth="1.5" />
      </g>
    </svg>
  );
});

window.Dumpster = Dumpster;