/* Placeholder image components — striped SVG with mono labels, matching default aesthetic but branded */

const Placeholder = ({ label = "Image", w = "100%", h = 200, tone = "warm", radius = 12, style = {}, children }) => {
  const tones = {
    warm: { bg: "#E7DFD2", stripe: "#D9CEBB", ink: "#8A7D66" },
    cool: { bg: "#DEE3EC", stripe: "#CAD2E0", ink: "#5A6278" },
    sage: { bg: "#C9DBCF", stripe: "#B5CCBD", ink: "#3F6651" },
    terra: { bg: "#EFCBBC", stripe: "#E5B5A0", ink: "#8A4329" },
    navy: { bg: "#4B4E6A", stripe: "#585C7A", ink: "#BFC3D6" },
    dark: { bg: "#2a2c42", stripe: "#363955", ink: "#bbb" },
  };
  const t = tones[tone] || tones.warm;
  return (
    <div style={{
      width: w, height: h, position: "relative", overflow: "hidden",
      background: t.bg, borderRadius: radius,
      backgroundImage: `repeating-linear-gradient(135deg, ${t.stripe} 0 14px, transparent 14px 28px)`,
      ...style,
    }}>
      <div style={{
        position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", justifyContent: "flex-start",
        padding: 16,
      }}>
        <span style={{
          fontFamily: "DM Mono, ui-monospace, monospace", fontSize: 11, letterSpacing: "0.1em",
          textTransform: "uppercase", color: t.ink,
          background: "rgba(255,255,255,0.5)", padding: "4px 8px", borderRadius: 4, backdropFilter: "blur(4px)",
        }}>{label}</span>
      </div>
      {children}
    </div>
  );
};

/* Hero image using the real copied JPEG */
const HeroImage = ({ src = "assets/hero-house.jpg", alt = "Woning", style = {}, label }) => (
  <div style={{ position: "relative", overflow: "hidden", borderRadius: 16, ...style }}>
    <img src={src} alt={alt} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    {label && <div style={{
      position: "absolute", bottom: 12, left: 12,
      fontFamily: "DM Sans", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
      background: "rgba(250,247,242,0.85)", padding: "6px 10px", borderRadius: 4, color: "var(--navy)",
    }}>{label}</div>}
  </div>
);

/* Cralux Logo — real brand image */
const Logo = ({ size = 28, style = {} }) => (
  <img src="assets/cralux-logo.png" alt="Cralux" style={{ height: size, width: "auto", display: "block", ...style }} />
);

window.Placeholder = Placeholder;
window.HeroImage = HeroImage;
window.Logo = Logo;