// Subtle striped placeholder with monospace label
function Ph({ label = "kitchen photo", variant = "warm", style }) {
  // variant: warm (default), green, dark
  const hues = {
    warm: { a: "#D8D2BF", b: "#E5E0D2", fg: "#6B7066" },
    warmer: { a: "#D0CAB3", b: "#DDD6C3", fg: "#5B604F" },
    green: { a: "#2C5540", b: "#335A46", fg: "#B8D0C0" },
    sage: { a: "#B6C7B8", b: "#C6D4C7", fg: "#456049" },
    cream: { a: "#EBE6D5", b: "#F2EDDC", fg: "#7A7461" },
  };
  const c = hues[variant] || hues.warm;
  const bg = `repeating-linear-gradient(135deg, ${c.a} 0 2px, ${c.b} 2px 16px)`;
  return (
    <div className="ph" style={{ background: bg, color: c.fg, ...style }} data-label={label} />
  );
}
window.Ph = Ph;