// Reusable stylized cereal-box tile component.
// Renders a recognizable "cereal box" look using only CSS/SVG — referencing
// the TYPE of cereal (fruity, chocolate, etc) without reproducing any real brand's trade dress.

const CEREAL_BOXES = [
  { n: "FRUITY RINGS",  c1: "#FF3D6A", c2: "#FFD23F", accent: "#2BA8E0", icon: "rings" },
  { n: "COCOA POPS",    c1: "#3B1F1A", c2: "#8B4513", accent: "#FFD23F", icon: "puffs" },
  { n: "CORN FLAKES",   c1: "#D64A2E", c2: "#FFC94D", accent: "#FFF", icon: "flake" },
  { n: "LUCKY STARS",   c1: "#1E8C4A", c2: "#FFD23F", accent: "#FF3D6A", icon: "charms" },
  { n: "HONEY LOOPS",   c1: "#F5A524", c2: "#FFD23F", accent: "#8B4513", icon: "rings" },
  { n: "TOAST CRUNCH",  c1: "#C2410C", c2: "#FCD34D", accent: "#FFF", icon: "squares" },
  { n: "COCOA PUFFS",   c1: "#5B2A15", c2: "#92400E", accent: "#FCD34D", icon: "puffs" },
  { n: "BERRY BITS",    c1: "#DB2777", c2: "#F9A8D4", accent: "#FFD23F", icon: "rings" },
  { n: "FRUIT PEBBLES", c1: "#2563EB", c2: "#EF4444", accent: "#FFD23F", icon: "puffs" },
  { n: "PUFF CEREAL",   c1: "#7C3AED", c2: "#C4B5FD", accent: "#FDE68A", icon: "puffs" },
  { n: "CINNAMON SQ.",  c1: "#B45309", c2: "#FEF3C7", accent: "#FFF", icon: "squares" },
  { n: "GRAHAM BEARS",  c1: "#CA8A04", c2: "#FEF3C7", accent: "#8B4513", icon: "bears" },
  { n: "COCOA CRISP",   c1: "#44403C", c2: "#A8A29E", accent: "#FCD34D", icon: "flake" },
  { n: "STRAW. POPS",   c1: "#E11D48", c2: "#FECDD3", accent: "#FFF", icon: "puffs" },
  { n: "OAT CIRCLES",   c1: "#0369A1", c2: "#BAE6FD", accent: "#FDE68A", icon: "rings" },
  { n: "CORN POPS",     c1: "#EAB308", c2: "#FEF08A", accent: "#C2410C", icon: "puffs" },
  { n: "RAISIN BRAN",   c1: "#78350F", c2: "#EAB308", accent: "#FFF", icon: "flake" },
  { n: "APPLE JAX",     c1: "#16A34A", c2: "#DC2626", accent: "#FFF", icon: "rings" },
  { n: "FROSTED F.",    c1: "#1D4ED8", c2: "#F97316", accent: "#FFF", icon: "flake" },
  { n: "CHEX MIX",      c1: "#B91C1C", c2: "#FEF3C7", accent: "#78350F", icon: "squares" },
];

function CerealIcon({ kind, c }) {
  switch (kind) {
    case "rings":
      return (
        <g>
          {[[25,40],[55,35],[40,58],[68,60],[20,62]].map(([x,y],i) => (
            <g key={i}>
              <circle cx={x} cy={y} r="9" fill={c} stroke="#fff" strokeWidth="1.5"/>
              <circle cx={x} cy={y} r="3.5" fill="#fff" opacity=".6"/>
            </g>
          ))}
        </g>
      );
    case "puffs":
      return (
        <g>
          {[[28,42],[50,38],[62,54],[38,56],[22,60]].map(([x,y],i) => (
            <circle key={i} cx={x} cy={y} r="7" fill={c} stroke="#fff" strokeWidth="1"/>
          ))}
        </g>
      );
    case "flake":
      return (
        <g>
          {[[25,40,-12],[50,36,18],[60,58,-8],[35,58,10],[20,56,22]].map(([x,y,r],i) => (
            <rect key={i} x={x-8} y={y-5} width="16" height="10" rx="3" transform={`rotate(${r} ${x} ${y})`} fill={c} stroke="#fff" strokeWidth="1"/>
          ))}
        </g>
      );
    case "squares":
      return (
        <g>
          {[[25,40,-8],[50,35,15],[62,55,-5],[35,58,8],[20,56,20]].map(([x,y,r],i) => (
            <rect key={i} x={x-6} y={y-6} width="12" height="12" rx="2" transform={`rotate(${r} ${x} ${y})`} fill={c} stroke="#fff" strokeWidth="1"/>
          ))}
        </g>
      );
    case "charms":
      return (
        <g>
          <polygon points="28,36 32,42 38,42 33,47 35,54 28,50 21,54 23,47 18,42 24,42" fill="#FFD23F" stroke="#fff" strokeWidth="1"/>
          <circle cx="52" cy="40" r="6" fill="#FF3D6A" stroke="#fff" strokeWidth="1"/>
          <circle cx="60" cy="58" r="5" fill="#2BA8E0" stroke="#fff" strokeWidth="1"/>
          <circle cx="38" cy="60" r="5" fill="#8B5CF6" stroke="#fff" strokeWidth="1"/>
          <circle cx="22" cy="60" r="4" fill="#10B981" stroke="#fff" strokeWidth="1"/>
        </g>
      );
    case "bears":
      return (
        <g>
          {[[28,44],[52,40],[40,58],[60,60],[22,58]].map(([x,y],i) => (
            <g key={i}>
              <circle cx={x-4} cy={y-6} r="2.5" fill={c}/>
              <circle cx={x+4} cy={y-6} r="2.5" fill={c}/>
              <circle cx={x} cy={y} r="7" fill={c}/>
            </g>
          ))}
        </g>
      );
    default: return null;
  }
}

function CerealBox({ box, small = false, style }) {
  const { n, c1, c2, accent, icon } = box;
  return (
    <div style={{
      position: "relative", aspectRatio: "3/4",
      background: `linear-gradient(145deg, ${c1} 0%, ${c2} 100%)`,
      borderRadius: small ? 3 : 5,
      padding: small ? "4px 3px" : "8px 6px",
      color: "#fff",
      display: "flex", flexDirection: "column",
      boxShadow: "inset 0 -12% 0 rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.2)",
      overflow: "hidden",
      fontFamily: "'Bagel Fat One','Archivo Black',sans-serif",
      textShadow: "1px 1px 0 rgba(0,0,0,0.35)",
      ...style,
    }}>
      {/* Brand strip */}
      <div style={{
        fontSize: small ? 6 : 8, letterSpacing: "0.05em",
        opacity: 0.85, lineHeight: 1,
        textAlign: "center",
      }}>★ CEREAL ★</div>
      {/* Name */}
      <div style={{
        fontSize: small ? 9 : 11, lineHeight: 0.95, textAlign: "center",
        marginTop: small ? 1 : 2,
      }}>{n}</div>
      {/* Bowl illustration */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", margin: "2px 0" }}>
        <svg viewBox="0 0 80 80" width="100%" height="100%" style={{ maxHeight: "82%" }}>
          {/* milk bowl */}
          <ellipse cx="40" cy="68" rx="32" ry="6" fill="rgba(0,0,0,0.25)"/>
          <path d="M8 46 Q 40 78, 72 46 L 64 38 L 16 38 Z" fill="#fff" opacity="0.9"/>
          <ellipse cx="40" cy="40" rx="32" ry="7" fill="#F8FAFC"/>
          <CerealIcon kind={icon} c={accent}/>
        </svg>
      </div>
      {/* Foot banner */}
      <div style={{
        background: "rgba(0,0,0,0.25)",
        margin: small ? "0 -3px -4px" : "0 -6px -8px",
        padding: small ? "2px 4px" : "3px 6px",
        fontSize: small ? 5 : 7, letterSpacing: "0.1em",
        textAlign: "center", opacity: 0.9,
      }}>NET WT · {small ? "10oz" : "12 oz"}</div>
    </div>
  );
}

window.CEREAL_BOXES = CEREAL_BOXES;
window.CerealBox = CerealBox;