/* PORCEVILLE — Ilustrações dos produtos (flat, identidade da marca) */
(function () {
  const NAVY = '#1D3557', GOLD = '#C9A86A', PORC = '#FBFBFA', INK = '#14263F';

  // fundo: círculo porcelana com leve anel dourado
  function Bg() {
    return (
      <>
        <defs>
          <radialGradient id="pillobg" cx="38%" cy="30%" r="80%">
            <stop offset="0%" stopColor="#FFFFFF" />
            <stop offset="60%" stopColor="#F1EEE7" />
            <stop offset="100%" stopColor="#E4DFD4" />
          </radialGradient>
        </defs>
        <rect x="0" y="0" width="200" height="200" fill="url(#pillobg)" />
        <circle cx="100" cy="98" r="70" fill="none" stroke={GOLD} strokeOpacity="0.35" strokeWidth="1.5" strokeDasharray="2 6" />
      </>
    );
  }

  const lid = { strokeLinejoin: 'round', strokeLinecap: 'round' };

  // marca de logo (selo dourado) na peça
  function Logo({ x, y }) {
    return <g transform={`translate(${x} ${y})`}>
      <circle r="11" fill="none" stroke={GOLD} strokeWidth="3" />
      <path d="M-4 4 L-4 -5 L1 -5 a3.5 3.5 0 0 1 0 7 L-4 2" fill="none" stroke={GOLD} strokeWidth="3" {...lid} />
    </g>;
  }

  function Mug({ body = PORC, tall = true }) {
    const top = tall ? 60 : 74, h = tall ? 86 : 62;
    return (
      <g>
        {/* corpo */}
        <rect x="60" y={top} width="64" height={h} rx="11" fill={body} stroke={NAVY} strokeWidth="4" {...lid} />
        <ellipse cx="92" cy={top} rx="32" ry="9" fill={body} stroke={NAVY} strokeWidth="4" />
        <ellipse cx="92" cy={top} rx="24" ry="5.5" fill="#fff" fillOpacity="0.55" stroke="none" />
        {/* asa */}
        <path d={`M124 ${top + 14} q30 2 30 26 q0 24 -30 26`} fill="none" stroke={NAVY} strokeWidth="9" {...lid} />
        {/* brilho */}
        <rect x="68" y={top + 10} width="7" height={h - 24} rx="3.5" fill="#fff" fillOpacity="0.5" />
        <Logo x={92} y={top + h / 2 + 4} />
      </g>
    );
  }

  function Cup({ body = PORC }) {
    return (
      <g>
        <path d="M64 66 L128 66 L120 150 a6 6 0 0 1 -6 5 L78 155 a6 6 0 0 1 -6 -5 Z" fill={body} stroke={NAVY} strokeWidth="4" {...lid} />
        <ellipse cx="96" cy="66" rx="32" ry="8.5" fill={body} stroke={NAVY} strokeWidth="4" />
        <ellipse cx="96" cy="66" rx="24" ry="5" fill="#fff" fillOpacity="0.55" />
        {/* pires */}
        <ellipse cx="96" cy="162" rx="44" ry="9" fill={body} stroke={NAVY} strokeWidth="4" />
        <rect x="72" y="74" width="6" height="62" rx="3" fill="#fff" fillOpacity="0.5" />
        <Logo x={96} y={106} />
      </g>
    );
  }

  function Glass({ liquid = false }) {
    return (
      <g>
        {liquid && <path d="M72 92 L122 92 L116 150 a5 5 0 0 1 -5 4 L83 154 a5 5 0 0 1 -5 -4 Z" fill={GOLD} fillOpacity="0.55" />}
        <path d="M66 56 L128 56 L118 152 a6 6 0 0 1 -6 5 L82 157 a6 6 0 0 1 -6 -5 Z" fill="#EAF2F7" fillOpacity="0.5" stroke={NAVY} strokeWidth="4" {...lid} />
        <ellipse cx="97" cy="56" rx="31" ry="8" fill="#EAF2F7" stroke={NAVY} strokeWidth="4" />
        {liquid && <><circle cx="88" cy="88" r="4" fill="#fff" fillOpacity="0.7" /><circle cx="104" cy="80" r="3" fill="#fff" fillOpacity="0.7" /><circle cx="97" cy="98" r="2.5" fill="#fff" fillOpacity="0.7" /></>}
        <rect x="74" y="66" width="6" height="80" rx="3" fill="#fff" fillOpacity="0.6" />
        <Logo x={97} y={120} />
      </g>
    );
  }

  function Beer() {
    return (
      <g>
        {/* espuma */}
        <path d="M64 60 q-2 -12 10 -12 q4 -10 16 -7 q8 -8 18 -2 q12 -4 16 7 q12 0 10 14 Z" fill="#FFF8EC" stroke={NAVY} strokeWidth="3.5" {...lid} />
        <rect x="64" y="60" width="60" height="80" rx="6" fill={GOLD} fillOpacity="0.6" stroke={NAVY} strokeWidth="4" {...lid} />
        {/* facetas */}
        <path d="M78 62 L78 138 M94 62 L94 138 M110 62 L110 138" stroke={NAVY} strokeWidth="2" strokeOpacity="0.4" />
        {/* asa */}
        <path d="M124 74 q28 2 28 26 q0 24 -28 26" fill="none" stroke={NAVY} strokeWidth="9" {...lid} />
        <Logo x={94} y={108} />
      </g>
    );
  }

  function Gin() {
    return (
      <g>
        <path d="M58 54 q0 44 39 50 L97 132" fill="none" stroke={NAVY} strokeWidth="4" {...lid} />
        <path d="M136 54 q0 44 -39 50" fill="#EAF2F7" fillOpacity="0.5" stroke={NAVY} strokeWidth="4" {...lid} />
        <path d="M58 54 q0 44 39 50 q39 -6 39 -50 Z" fill="#EAF2F7" fillOpacity="0.45" />
        <path d="M62 70 q4 30 35 36" fill="none" stroke="#fff" strokeOpacity="0.6" strokeWidth="5" {...lid} />
        <ellipse cx="97" cy="54" rx="39" ry="9" fill="#EAF2F7" stroke={NAVY} strokeWidth="4" />
        <line x1="97" y1="132" x2="97" y2="150" stroke={NAVY} strokeWidth="4" />
        <ellipse cx="97" cy="154" rx="26" ry="7" fill="#EAF2F7" stroke={NAVY} strokeWidth="4" />
        <Logo x={97} y={86} />
      </g>
    );
  }

  function Sublime() {
    return (
      <g>
        <defs><linearGradient id="psub" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#E2304A" /><stop offset="0.4" stopColor="#EBA23A" /><stop offset="0.7" stopColor="#2A6FDB" /><stop offset="1" stopColor="#8B4AC9" />
        </linearGradient></defs>
        <rect x="60" y="60" width="64" height="86" rx="11" fill="url(#psub)" stroke={NAVY} strokeWidth="4" {...lid} />
        <ellipse cx="92" cy="60" rx="32" ry="9" fill={PORC} stroke={NAVY} strokeWidth="4" />
        <path d="M124 74 q30 2 30 26 q0 24 -30 26" fill="none" stroke={NAVY} strokeWidth="9" {...lid} />
        <path d="M70 120 q12 -16 24 0 t24 0" fill="none" stroke="#fff" strokeOpacity="0.7" strokeWidth="4" {...lid} />
      </g>
    );
  }

  function Kit() {
    return (
      <g>
        {/* caixa */}
        <rect x="48" y="96" width="104" height="58" rx="8" fill="#EFE7D8" stroke={NAVY} strokeWidth="4" {...lid} />
        <path d="M48 112 L152 112" stroke={NAVY} strokeWidth="3" strokeOpacity="0.5" />
        {/* mug */}
        <rect x="64" y="62" width="42" height="48" rx="8" fill={PORC} stroke={NAVY} strokeWidth="4" {...lid} />
        <path d="M106 72 q18 1 18 16 q0 15 -18 16" fill="none" stroke={NAVY} strokeWidth="7" {...lid} />
        {/* glass */}
        <path d="M114 64 L142 64 L137 110 L119 110 Z" fill="#EAF2F7" fillOpacity="0.6" stroke={NAVY} strokeWidth="4" {...lid} />
        <Logo x={100} y={130} />
      </g>
    );
  }

  const MAP = { mug: Mug, cup: Cup, glass: Glass, beer: Beer, gin: Gin, sublime: Sublime, kit: Kit };

  function illoFor(p, pieceColor) {
    if (!p) return { type: 'mug' };
    if (p.id === 'taca-gin') return { type: 'gin' };
    if (p.id === 'copo-tulipa' || p.id === 'copo-belga' || p.id === 'copo-munich') return { type: 'glass', liquid: true };
    if (p.kind === 'kit') return { type: 'kit' };
    if (p.kind === 'sublime') return { type: 'sublime' };
    if (p.cat === 'chopp') return { type: 'beer' };
    if (p.cat === 'copos') return { type: 'glass', liquid: false };
    if (p.id === 'xic-cafe') return { type: 'cup' };
    return { type: 'mug', tall: p.cat === 'canecas' };
  }

  const COLOR_HEX = { branca: '#FBFBFA', preta: '#2A2A2E', vermelha: '#C0392B', azul: '#2C4A75', amarela: '#F4C20D', verde: '#1E8E5A', rosa: '#E84393', roxa: '#7D4AC2', fume: '#5B5B66', incolor: '#EAF2F7' };

  function ProductIllo({ illo, color, style, className = '' }) {
    const spec = typeof illo === 'string' ? { type: illo } : (illo || { type: 'mug' });
    const C = MAP[spec.type] || Mug;
    const body = color ? (COLOR_HEX[color] || PORC) : PORC;
    return (
      <div className={className} style={{ position: 'absolute', inset: 0, ...style }}>
        <svg viewBox="0 0 200 200" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
          <Bg />
          <C body={body} tall={spec.tall} liquid={spec.liquid} />
        </svg>
      </div>
    );
  }

  window.PORCE_ILLO = { ProductIllo, illoFor };
  window.ProductIllo = ProductIllo;
})();
