// Subtly-striped SVG placeholder with mono caption for "where a real photo goes"
function Placeholder({ label = "product shot", ratio = "3/4", tone = "warm", style = {}, className = "" }) {
  const stripeColor = tone === "dark" ? "rgba(245,237,226,.06)" : "rgba(28,24,21,.05)";
  const bg = tone === "dark" ? "#241F1B" : "#E6D8C2";
  const captionColor = tone === "dark" ? "rgba(245,237,226,.55)" : "rgba(28,24,21,.45)";
  return (
    <div
      className={className}
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: ratio,
        background: `repeating-linear-gradient(135deg, ${bg} 0 14px, ${stripeColor} 14px 15px)`,
        backgroundColor: bg,
        overflow: "hidden",
        ...style,
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "flex-start",
          padding: "14px",
        }}
      >
        <span
          style={{
            fontFamily: "ui-monospace, SF Mono, Menlo, monospace",
            fontSize: "10px",
            letterSpacing: ".12em",
            textTransform: "uppercase",
            color: captionColor,
            background: tone === "dark" ? "rgba(28,24,21,.5)" : "rgba(244,234,220,.7)",
            padding: "4px 7px",
          }}
        >
          {label}
        </span>
      </div>
    </div>
  );
}

window.Placeholder = Placeholder;