// Striped editorial image placeholder with monospaced caption describing what should be there.
// Avoids fake photography while keeping the layout convincing.
function Placeholder({ caption, tone = "dark", height, style, children }) {
  const palettes = {
    dark:   { bg: "linear-gradient(135deg, #2a2622 0%, #14110f 100%)", text: "rgba(250,248,244,0.62)", border: "rgba(250,248,244,0.16)", stripe: "rgba(250,248,244,0.025)" },
    navy:   { bg: "linear-gradient(135deg, #0a2238 0%, #03101e 100%)", text: "rgba(250,248,244,0.62)", border: "rgba(250,248,244,0.18)", stripe: "rgba(250,248,244,0.03)" },
    warm:   { bg: "linear-gradient(135deg, #e9e2d4 0%, #d4cab8 100%)", text: "rgba(17,17,17,0.55)",   border: "rgba(17,17,17,0.14)",   stripe: "rgba(17,17,17,0.04)" },
    ivory:  { bg: "linear-gradient(135deg, #efe9dc 0%, #e2d9c6 100%)", text: "rgba(17,17,17,0.55)",   border: "rgba(17,17,17,0.12)",   stripe: "rgba(17,17,17,0.035)" },
  };
  const p = palettes[tone] || palettes.dark;
  return (
    <div
      role="img"
      aria-label={caption}
      style={{
        position: "relative",
        width: "100%",
        height: height || "100%",
        background: p.bg,
        overflow: "hidden",
        borderRadius: 2,
        ...style,
      }}
    >
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `repeating-linear-gradient(135deg, ${p.stripe} 0 2px, transparent 2px 14px)`,
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: tone === "warm" || tone === "ivory"
          ? "radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0) 60%)"
          : "radial-gradient(ellipse at 50% 35%, rgba(250,248,244,0.08) 0%, rgba(0,0,0,0) 60%), linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.32) 100%)",
      }} />
      <div style={{
        position: "absolute",
        top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        maxWidth: "76%",
        display: "flex", alignItems: "flex-start", gap: 8,
        padding: "16px 18px",
        border: `1px solid ${p.border}`,
        color: p.text,
        fontFamily: BM.f.sans,
        fontSize: 11,
        letterSpacing: "0.02em",
        lineHeight: 1.55,
        background: tone === "warm" || tone === "ivory" ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.18)",
        backdropFilter: "blur(2px)",
      }}>
        <span style={{ opacity: 0.55, fontSize: 13 }}>[</span>
        <span style={{ flex: 1, fontVariantNumeric: "tabular-nums" }}>{caption}</span>
        <span style={{ opacity: 0.55, fontSize: 13 }}>]</span>
      </div>
      {children}
    </div>
  );
}
window.Placeholder = Placeholder;