// packaging.jsx — Illustrated single-use packaging glyphs.
// All stroked in INK, designed to replace the abstract circles 1:1.
// Each glyph takes { cx, cy, size, opacity, rotation, fill? } and renders
// an SVG <g>. `size` is the approximate bounding radius (match circle r).

const PK_INK = '#0a0a0a';

// ── Plastic "t-shirt" shopping bag ────────────────────────────────────
function PkgBag({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 95;
  const stroke = sw ?? 2;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      <path
        d="M -95 -85 L -55 -85 Q -55 -55 -20 -55 L 20 -55 Q 55 -55 55 -85 L 95 -85 L 110 60 Q 110 110 60 118 L -60 118 Q -110 110 -110 60 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round"
      />
    </g>
  );
}

// ── Thin produce bag (knotted at top) ─────────────────────────────────
function PkgProduceBag({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 1.6;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      {/* knot */}
      <path d="M -10 -72 Q 0 -82 10 -72 Q 12 -64 6 -60 Q 0 -58 -6 -60 Q -12 -64 -10 -72 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} />
      {/* bag body — soft pouch */}
      <path
        d="M -14 -60 Q -60 -40 -62 10 Q -58 70 0 78 Q 58 70 62 10 Q 60 -40 14 -60"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round"
      />
      {/* crinkle lines */}
      <path d="M -30 0 Q -26 30 -18 55" fill="none" stroke={PK_INK} strokeWidth={stroke * 0.6} opacity="0.5" />
      <path d="M 28 -4 Q 22 28 16 52" fill="none" stroke={PK_INK} strokeWidth={stroke * 0.6} opacity="0.5" />
    </g>
  );
}

// ── Clamshell container ──────────────────────────────────────────────
function PkgClamshell({ cx, cy, size = 70, opacity = 1, rotation = 0, open = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 2;
  const off = open * 14;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      {/* lid */}
      <path d={`M -60 ${-off} L 60 ${-off} L 54 ${-28 - off} Q 50 -38 -50 -38 Q -50 -38 -54 -28 Z`}
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round" />
      {/* base */}
      <path d={`M -58 ${4 + off} L 58 ${4 + off} L 52 ${32 + off} Q 48 40 -48 40 Q -48 40 -52 32 Z`}
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round" />
      {/* latch */}
      <circle cx="0" cy={-off} r="2.5" fill={PK_INK} opacity="0.6" />
    </g>
  );
}

// ── Mesh citrus bag (diamond weave) ──────────────────────────────────
function PkgMeshBag({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 1.2;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      {/* tie top */}
      <path d="M -8 -76 L 0 -68 L 8 -76" fill="none" stroke={PK_INK} strokeWidth={stroke * 1.3} strokeLinejoin="round" />
      {/* outer pouch */}
      <path d="M -12 -66 Q -58 -40 -58 10 Q -54 66 0 72 Q 54 66 58 10 Q 58 -40 12 -66 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke * 1.4} strokeLinejoin="round" />
      {/* diamond weave — clipped visually by the pouch stroke */}
      <g stroke={PK_INK} strokeWidth={stroke * 0.8} fill="none" opacity="0.75">
        {[-40, -20, 0, 20, 40].map((x, i) => (
          <line key={'a' + i} x1={x} y1="-60" x2={x + 48} y2="64" />
        ))}
        {[-40, -20, 0, 20, 40].map((x, i) => (
          <line key={'b' + i} x1={x + 48} y1="-60" x2={x} y2="64" />
        ))}
      </g>
    </g>
  );
}

// ── Water / milk bottle (rigid PET) ──────────────────────────────────
function PkgBottle({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 2;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      {/* cap */}
      <rect x="-14" y="-78" width="28" height="14" fill={fill} stroke={PK_INK} strokeWidth={stroke} />
      {/* neck */}
      <path d="M -10 -64 L 10 -64 L 10 -52 Q 10 -48 18 -42 Q 28 -36 28 -20 L 28 48 Q 28 68 0 68 Q -28 68 -28 48 L -28 -20 Q -28 -36 -18 -42 Q -10 -48 -10 -52 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round" />
      {/* label band */}
      <line x1="-28" y1="-4" x2="28" y2="-4" stroke={PK_INK} strokeWidth={stroke * 0.6} opacity="0.5" />
      <line x1="-28" y1="28" x2="28" y2="28" stroke={PK_INK} strokeWidth={stroke * 0.6} opacity="0.5" />
    </g>
  );
}

// ── Yogurt tub / deli container ──────────────────────────────────────
function PkgTub({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 2;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      {/* lid flange */}
      <rect x="-54" y="-36" width="108" height="8" fill={fill} stroke={PK_INK} strokeWidth={stroke} />
      {/* body — tapered */}
      <path d="M -48 -28 L 48 -28 L 38 44 Q 36 52 0 52 Q -36 52 -38 44 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round" />
    </g>
  );
}

// ── Film / wrap (creased square) ─────────────────────────────────────
function PkgFilm({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 1.6;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      <path d="M -58 -50 L 52 -58 L 60 46 L -52 54 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round" />
      {/* crinkles */}
      <path d="M -40 -40 L -20 -10 L -36 10 L -14 34" fill="none" stroke={PK_INK} strokeWidth={stroke * 0.6} opacity="0.5" />
      <path d="M 10 -30 L 30 0 L 6 16 L 28 38" fill="none" stroke={PK_INK} strokeWidth={stroke * 0.6} opacity="0.5" />
    </g>
  );
}

// ── Chip / snack bag (pillow) ────────────────────────────────────────
function PkgChipBag({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 2;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      <path d="M -52 -66 L 52 -66 Q 62 -30 56 0 Q 62 30 52 62 L -52 62 Q -62 30 -56 0 Q -62 -30 -52 -66 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round" />
      {/* crimp lines top and bottom */}
      {[-62, -58, -54].map((y, i) => (
        <line key={'t' + i} x1="-48" y1={y} x2="48" y2={y} stroke={PK_INK} strokeWidth={stroke * 0.5} opacity="0.6" />
      ))}
      {[54, 58, 62].map((y, i) => (
        <line key={'b' + i} x1="-48" y1={y} x2="48" y2={y} stroke={PK_INK} strokeWidth={stroke * 0.5} opacity="0.6" />
      ))}
    </g>
  );
}

// ── Styrofoam meat tray + film ───────────────────────────────────────
function PkgTray({ cx, cy, size = 70, opacity = 1, rotation = 0, fill = 'none', sw }) {
  const s = size / 70;
  const stroke = sw ?? 2;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      {/* tray outer */}
      <path d="M -60 -36 L 60 -36 L 52 38 L -52 38 Z"
        fill={fill} stroke={PK_INK} strokeWidth={stroke} strokeLinejoin="round" />
      {/* inner well */}
      <path d="M -48 -24 L 48 -24 L 42 26 L -42 26 Z"
        fill="none" stroke={PK_INK} strokeWidth={stroke * 0.7} opacity="0.7" />
    </g>
  );
}

// ── Twist-tie (short) ────────────────────────────────────────────────
function PkgTwistTie({ cx, cy, size = 70, opacity = 1, rotation = 0, sw }) {
  const s = size / 70;
  const stroke = sw ?? 2;
  return (
    <g transform={`translate(${cx}, ${cy}) rotate(${rotation}) scale(${s})`} opacity={opacity}>
      <path d="M -50 0 Q -30 -18 -10 0 Q 10 18 30 0 Q 44 -10 54 0"
        fill="none" stroke={PK_INK} strokeWidth={stroke * 1.8} strokeLinecap="round" />
    </g>
  );
}

// Map a "kind" to an illustrated glyph. Default to PkgBag if unknown.
const PACKAGING = {
  bag: PkgBag,
  produce: PkgProduceBag,
  clamshell: PkgClamshell,
  mesh: PkgMeshBag,
  bottle: PkgBottle,
  tub: PkgTub,
  film: PkgFilm,
  chip: PkgChipBag,
  tray: PkgTray,
  tie: PkgTwistTie,
};

// Render a glyph by kind
function Pkg({ kind = 'bag', ...rest }) {
  const Comp = PACKAGING[kind] || PkgBag;
  return <Comp {...rest} />;
}

Object.assign(window, {
  PkgBag, PkgProduceBag, PkgClamshell, PkgMeshBag, PkgBottle, PkgTub,
  PkgFilm, PkgChipBag, PkgTray, PkgTwistTie, PACKAGING, Pkg,
});