// Placeholder image for product cases. Striped, monospace label, tinted by swatch.
// "Pretend" Torah-case shape: a tall rounded silhouette with a centered medallion.
// Stays abstract — we are a design mockup, not the actual product photography.

const SWATCH_TONES = {
  silver:   { bg: "#dad7d2", ink: "#3a3a3a", medallion: "#8a8a8a", note: "SILVER" },
  rose:     { bg: "#e8c8b6", ink: "#5a3a2c", medallion: "#a87056", note: "ROSE GOLD" },
  white:    { bg: "#ececea", ink: "#2a2a2a", medallion: "#1a1a1a", note: "CARBON · WHITE" },
  turquoise:{ bg: "#b5d4d3", ink: "#193434", medallion: "#235e5d", note: "CARBON · TURQUOISE" },
  carbon:   { bg: "#1f1f20", ink: "#cfcfcf", medallion: "#7a7a7a", note: "CARBON · BLACK" },
  gold:     { bg: "#e2cf9f", ink: "#3d2f10", medallion: "#a07a25", note: "24K GOLD" },
};

const ProductPlaceholder = ({ swatch = "gold", ratio = "portrait", label }) => {
  const tone = SWATCH_TONES[swatch] || SWATCH_TONES.gold;
  const isPortrait = ratio === "portrait";
  const w = isPortrait ? 400 : 600;
  const h = isPortrait ? 540 : 400;
  const stripeId = `stripes-${swatch}-${Math.random().toString(36).slice(2, 7)}`;

  // Torah-case-ish silhouette
  const cx = w / 2;
  const cy = h / 2;
  const caseW = w * 0.55;
  const caseH = h * 0.78;
  const caseX = cx - caseW / 2;
  const caseY = cy - caseH / 2;
  const r = Math.min(caseW / 2, 28);

  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice"
         style={{ width: "100%", height: "100%", display: "block", background: tone.bg }}>
      <defs>
        <pattern id={stripeId} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <rect width="6" height="6" fill={tone.bg} />
          <line x1="0" y1="0" x2="0" y2="6" stroke={tone.ink} strokeOpacity="0.07" strokeWidth="2" />
        </pattern>
      </defs>
      <rect width={w} height={h} fill={`url(#${stripeId})`} />

      {/* Case silhouette */}
      <rect x={caseX} y={caseY} width={caseW} height={caseH} rx={r} ry={r}
            fill="none" stroke={tone.ink} strokeOpacity="0.18" strokeWidth="1" />
      {/* Crown crest */}
      <path d={`M ${cx - 30} ${caseY - 6} L ${cx - 18} ${caseY - 22} L ${cx - 6} ${caseY - 8} L ${cx} ${caseY - 24} L ${cx + 6} ${caseY - 8} L ${cx + 18} ${caseY - 22} L ${cx + 30} ${caseY - 6} Z`}
            fill="none" stroke={tone.medallion} strokeOpacity="0.55" strokeWidth="1.2" />
      {/* Central medallion */}
      <circle cx={cx} cy={cy} r={Math.min(caseW, caseH) * 0.18}
              fill="none" stroke={tone.medallion} strokeOpacity="0.7" strokeWidth="1" />
      {/* Magen David inside medallion */}
      <g stroke={tone.medallion} strokeOpacity="0.55" strokeWidth="1" fill="none"
         transform={`translate(${cx} ${cy})`}>
        <polygon points={hexPoints(Math.min(caseW, caseH) * 0.13, 0)} />
        <polygon points={hexPoints(Math.min(caseW, caseH) * 0.13, Math.PI / 6)} />
      </g>

      {/* Tiny corner label */}
      <g transform={`translate(16 ${h - 14})`}>
        <text fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
              fontSize="9" letterSpacing="1.4" fill={tone.ink} fillOpacity="0.55">
          {label || tone.note}
        </text>
      </g>
    </svg>
  );
};

function hexPoints(r, rot) {
  // 3-point triangle (we render two for a star of david)
  const pts = [];
  for (let i = 0; i < 3; i++) {
    const a = rot + (i * 2 * Math.PI) / 3 - Math.PI / 2;
    pts.push(`${(Math.cos(a) * r).toFixed(2)},${(Math.sin(a) * r).toFixed(2)}`);
  }
  return pts.join(" ");
}

window.ProductPlaceholder = ProductPlaceholder;
window.SWATCH_TONES = SWATCH_TONES;