// Photo placeholders — striped SVGs with mono captions so real client photos can be dropped in later.

const PhotoPlaceholder = ({ label = "photo", tone = "warm", ratio = "4/3", scene = "machinery", style = {} }) => {
  const palettes = {
    warm:  ["#2a2118", "#3a2c1e", "#4a3828"],
    cool:  ["#13171a", "#1b2026", "#242b33"],
    green: ["#0e1a14", "#14241a", "#1c3024"],
    ember: ["#1a0d08", "#2a130a", "#3a1c10"],
  };
  const [c1, c2, c3] = palettes[tone] || palettes.warm;

  // tiny iconographic scene hint
  const Scene = () => {
    if (scene === "machinery") return (
      <g opacity="0.35" stroke="#f5f1ea" strokeWidth="1.5" fill="none">
        <path d="M 20 78 L 90 78 L 98 70 L 110 70 L 110 58 L 80 58 L 72 66 L 20 66 Z" />
        <circle cx="35" cy="82" r="5" />
        <circle cx="60" cy="82" r="5" />
        <circle cx="95" cy="74" r="4" />
        <path d="M 75 58 L 82 40 L 100 35" />
        <rect x="98" y="32" width="14" height="6" />
      </g>
    );
    if (scene === "trees") return (
      <g opacity="0.32" stroke="#f5f1ea" strokeWidth="1.2" fill="none">
        <path d="M 10 80 L 25 50 L 40 80 Z M 35 80 L 55 40 L 75 80 Z M 70 80 L 90 55 L 110 80 Z" />
        <line x1="0" y1="80" x2="130" y2="80" />
      </g>
    );
    if (scene === "aerial") return (
      <g opacity="0.3" stroke="#f5f1ea" strokeWidth="1" fill="none">
        <path d="M 5 65 Q 30 55 55 62 T 125 60" />
        <path d="M 5 72 Q 35 65 60 70 T 125 68" />
        <path d="M 5 80 Q 40 75 65 78 T 125 76" />
        <circle cx="90" cy="40" r="3" fill="#f5f1ea"/>
      </g>
    );
    if (scene === "portrait") return (
      <g opacity="0.3" stroke="#f5f1ea" strokeWidth="1.4" fill="none">
        <circle cx="65" cy="38" r="14" />
        <path d="M 35 90 Q 65 55 95 90" />
      </g>
    );
    return null;
  };

  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: ratio,
      overflow: "hidden",
      background: c1,
      ...style
    }}>
      <svg viewBox="0 0 130 90" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
        <defs>
          <pattern id={`stripes-${tone}-${label.replace(/\W/g,'')}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(25)">
            <rect width="6" height="6" fill={c1}/>
            <line x1="0" y1="0" x2="0" y2="6" stroke={c2} strokeWidth="3" />
          </pattern>
          <linearGradient id={`fade-${label.replace(/\W/g,'')}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={c3} stopOpacity="0.6"/>
            <stop offset="1" stopColor={c1} stopOpacity="0"/>
          </linearGradient>
        </defs>
        <rect width="130" height="90" fill={`url(#stripes-${tone}-${label.replace(/\W/g,'')})`} />
        <rect width="130" height="90" fill={`url(#fade-${label.replace(/\W/g,'')})`} />
        <Scene />
      </svg>
      <div style={{
        position: "absolute", left: 10, bottom: 8,
        fontFamily: "'IBM Plex Mono', monospace",
        fontSize: 10, letterSpacing: "0.04em",
        color: "rgba(245,241,234,0.55)",
        textTransform: "uppercase"
      }}>
        ▲ {label}
      </div>
    </div>
  );
};

window.PhotoPlaceholder = PhotoPlaceholder;