// Shared SVG photo-placeholder component
// Uses subtly-striped, moss-toned blocks with mono caption + index
// Generated palette derived from forest-green primary

const PALETTES = [
  ["#1f2d22", "#34493a", "#5d7a63"], // forest dim
  ["#243029", "#3a4f43", "#6e8576"], // dusk
  ["#0f1a14", "#243d2e", "#41614f"], // deep
  ["#2c3a2f", "#465e4b", "#7a967f"], // sage
  ["#1a261d", "#2f4434", "#557559"], // moss
  ["#0d1410", "#1d2a21", "#36493b"], // night
  ["#22332a", "#3e5644", "#688566"], // pine
  ["#172420", "#2b3e35", "#48635a"], // hemlock
];

function PhotoPlaceholder({ seed = 0, label, num, ratio = "4/5", style = {}, className = "", showCap = true }) {
  const pal = PALETTES[seed % PALETTES.length];
  const angle = [12, -8, 22, -18, 35, -28, 5, -45][seed % 8];
  const stripeW = [80, 120, 50, 180, 90, 140][seed % 6];

  return (
    <div className={`photo ${className}`} style={{ aspectRatio: ratio, ...style }}>
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id={`stripes-${seed}`} patternUnits="userSpaceOnUse"
            width={stripeW} height="500" patternTransform={`rotate(${angle})`}>
            <rect width={stripeW} height="500" fill={pal[0]} />
            <rect x={stripeW * 0.55} width={stripeW * 0.45} height="500" fill={pal[1]} opacity="0.6" />
            <rect x={stripeW * 0.85} width={stripeW * 0.15} height="500" fill={pal[2]} opacity="0.5" />
          </pattern>
          <linearGradient id={`vig-${seed}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#000" stopOpacity="0" />
            <stop offset="100%" stopColor="#000" stopOpacity="0.35" />
          </linearGradient>
        </defs>
        <rect width="400" height="500" fill={`url(#stripes-${seed})`} />
        <rect width="400" height="500" fill={`url(#vig-${seed})`} />
        {/* tiny "frame marks" for character */}
        <g opacity="0.4">
          <rect x="14" y="14" width="20" height="1" fill="#fff" />
          <rect x="14" y="14" width="1" height="20" fill="#fff" />
          <rect x="366" y="485" width="20" height="1" fill="#fff" />
          <rect x="385" y="465" width="1" height="20" fill="#fff" />
        </g>
      </svg>
      {showCap && label && (
        <div className="cap"><span className="dot"></span>{label}</div>
      )}
      {num && <div className="num">{num}</div>}
    </div>
  );
}

window.PhotoPlaceholder = PhotoPlaceholder;