/* Reusable architectural-plate placeholder + image component */
const Plate = ({ aspect = "4-5", label, corner, src, alt, onClick, tone = "warm" }) => {
  const ar = `plate-aspect-${aspect}`;
  // Subtle SVG placeholder when no src — striped + monogram glyph
  const palette = {
    warm: { bg: "#e2d8c1", fg: "#7a6b54", glyph: "#8a6a3b" },
    cool: { bg: "#d8d4c9", fg: "#5a5448", glyph: "#5a5a3a" },
    dark: { bg: "#2a2520", fg: "#9a8c70", glyph: "#c9b890" },
  }[tone] || { bg: "#e2d8c1", fg: "#7a6b54", glyph: "#8a6a3b" };

  return (
    <figure className={`plate ${ar} ${src ? "real" : ""}`} onClick={onClick} data-cursor="zoom">
      {src ? (
        <img src={src} alt={alt || label || ""} loading="lazy" />
      ) : (
        <>
          <svg viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
            <defs>
              <pattern id={`stripes-${aspect}-${label}`} width="28" height="28" patternUnits="userSpaceOnUse" patternTransform="rotate(-38)">
                <line x1="0" y1="0" x2="0" y2="28" stroke={palette.fg} strokeWidth="1" opacity="0.18" />
              </pattern>
            </defs>
            <rect width="800" height="1000" fill={palette.bg} />
            <rect width="800" height="1000" fill={`url(#stripes-${aspect}-${label})`} />
            {/* faint architectural rule lines */}
            <line x1="0" y1="780" x2="800" y2="780" stroke={palette.fg} strokeWidth="1" opacity="0.25" />
            <line x1="0" y1="220" x2="800" y2="220" stroke={palette.fg} strokeWidth="1" opacity="0.18" />
            {/* monogram VF */}
            <g opacity="0.32" transform="translate(400, 500)">
              <text x="0" y="0"
                textAnchor="middle"
                dominantBaseline="middle"
                fontFamily="Cormorant Garamond, serif"
                fontStyle="italic"
                fontSize="180"
                fontWeight="300"
                fill={palette.glyph}
                letterSpacing="-6">VF</text>
            </g>
          </svg>
          {corner && <div className="plate-corner">{corner}</div>}
          {label && <figcaption className="plate-label">{label}</figcaption>}
        </>
      )}
      {src && corner && <div className="plate-corner" style={{ color: "rgba(245,240,230,0.85)" }}>{corner}</div>}
      {src && label && <figcaption className="plate-label" style={{ color: "rgba(245,240,230,0.9)" }}>{label}</figcaption>}
    </figure>
  );
};

window.Plate = Plate;