/* global React */

// SVG-based illustrative placeholders evoking Sierra foothills construction
// Used in lieu of real photography. Each returns a full-bleed scene.

const Placeholder = ({ kind = "house", className = "", caption }) => {
  const scenes = {
    house: (
      <svg viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sky1" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#D9C9A6" />
            <stop offset="0.6" stopColor="#C8B58A" />
            <stop offset="1" stopColor="#8E7A56" />
          </linearGradient>
          <linearGradient id="wood1" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="#7A4A24" />
            <stop offset="1" stopColor="#5C361A" />
          </linearGradient>
        </defs>
        <rect width="800" height="1000" fill="url(#sky1)" />
        {/* distant ridge */}
        <path d="M0,520 L120,470 L240,500 L360,440 L500,490 L640,450 L800,500 L800,1000 L0,1000 Z" fill="#3A4530" opacity="0.55" />
        <path d="M0,600 L100,560 L220,590 L340,540 L480,580 L620,550 L800,590 L800,1000 L0,1000 Z" fill="#2F4A33" opacity="0.85" />
        {/* foreground field */}
        <rect x="0" y="780" width="800" height="220" fill="#2A2A28" />
        {/* house body */}
        <rect x="180" y="500" width="440" height="280" fill="#F4ECDD" />
        {/* roof */}
        <polygon points="160,500 400,360 640,500" fill="url(#wood1)" />
        <polygon points="160,500 400,360 640,500" fill="#000" opacity="0.0" />
        {/* roof shingle lines */}
        {[0,1,2,3,4].map(i => (
          <line key={i} x1={160 + i*15} y1={500 - i*8} x2={640 - i*15} y2={500 - i*8} stroke="#1F1A14" strokeOpacity="0.2" strokeWidth="1.5" />
        ))}
        {/* door */}
        <rect x="370" y="620" width="70" height="160" fill="#B5471F" />
        <circle cx="425" cy="700" r="3" fill="#1F1A14" />
        {/* windows */}
        <rect x="220" y="560" width="100" height="80" fill="#2A2A28" />
        <line x1="270" y1="560" x2="270" y2="640" stroke="#F4ECDD" strokeWidth="3" />
        <line x1="220" y1="600" x2="320" y2="600" stroke="#F4ECDD" strokeWidth="3" />
        <rect x="480" y="560" width="100" height="80" fill="#2A2A28" />
        <line x1="530" y1="560" x2="530" y2="640" stroke="#F4ECDD" strokeWidth="3" />
        <line x1="480" y1="600" x2="580" y2="600" stroke="#F4ECDD" strokeWidth="3" />
        {/* chimney */}
        <rect x="520" y="380" width="40" height="100" fill="#8E3416" />
        {/* porch */}
        <rect x="160" y="780" width="480" height="20" fill="#3A3026" />
        {/* tree */}
        <rect x="80" y="600" width="14" height="180" fill="#3A3026" />
        <circle cx="87" cy="580" r="60" fill="#2F4A33" />
        <circle cx="60" cy="600" r="40" fill="#486B4D" />
        <circle cx="115" cy="600" r="40" fill="#486B4D" />
      </svg>
    ),
    deck: (
      <svg viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sky2" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#B89D6F" />
            <stop offset="1" stopColor="#7A6745" />
          </linearGradient>
        </defs>
        <rect width="800" height="1000" fill="url(#sky2)" />
        {/* trees */}
        {[60, 180, 720, 640].map((x, i) => (
          <g key={i}>
            <rect x={x-3} y="350" width="6" height="300" fill="#3A3026" />
            <ellipse cx={x} cy="380" rx="50" ry="120" fill="#2F4A33" opacity="0.85" />
          </g>
        ))}
        {/* deck planks */}
        <rect x="0" y="600" width="800" height="400" fill="#7A4A24" />
        {[0,1,2,3,4,5,6].map(i => (
          <rect key={i} x="0" y={620 + i*54} width="800" height="3" fill="#3A2614" opacity="0.6" />
        ))}
        {/* railing */}
        <rect x="0" y="540" width="800" height="14" fill="#5C361A" />
        {[60,160,260,360,460,560,660,760].map(x => (
          <rect key={x} x={x} y="560" width="6" height="50" fill="#5C361A" />
        ))}
        {/* adirondack chair */}
        <g transform="translate(440 480)">
          <polygon points="0,140 10,40 60,40 70,140" fill="#B5471F" />
          <polygon points="60,40 90,30 90,140 70,140" fill="#8E3416" />
          <rect x="0" y="135" width="90" height="6" fill="#5C361A" />
          <rect x="-5" y="100" width="20" height="50" fill="#8E3416" />
        </g>
        {/* potted plant */}
        <g transform="translate(180 460)">
          <rect x="0" y="100" width="60" height="60" fill="#3A3026" />
          <circle cx="30" cy="80" r="40" fill="#486B4D" />
          <circle cx="10" cy="90" r="22" fill="#708A4E" />
          <circle cx="50" cy="90" r="22" fill="#708A4E" />
        </g>
        {/* lantern */}
        <g transform="translate(680 420)">
          <line x1="20" y1="0" x2="20" y2="40" stroke="#1F1A14" strokeWidth="2" />
          <rect x="5" y="40" width="30" height="40" fill="#F4ECDD" stroke="#1F1A14" strokeWidth="2" />
        </g>
      </svg>
    ),
    roof: (
      <svg viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sky3" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#6E8AA1" />
            <stop offset="1" stopColor="#A8B4C0" />
          </linearGradient>
        </defs>
        <rect width="800" height="1000" fill="url(#sky3)" />
        {/* clouds */}
        <ellipse cx="200" cy="180" rx="100" ry="22" fill="#F4ECDD" opacity="0.6" />
        <ellipse cx="600" cy="120" rx="120" ry="26" fill="#F4ECDD" opacity="0.5" />
        {/* large roof angled view */}
        <polygon points="0,500 800,700 800,1000 0,1000" fill="#3A3026" />
        {/* shingles pattern */}
        {[...Array(12)].map((_, row) => (
          <g key={row}>
            {[...Array(20)].map((_, col) => {
              const offset = row % 2 === 0 ? 0 : 22;
              const y = 540 + row * 38 + col * 0;
              const x = -30 + col * 48 + offset;
              const skew = (col - 10) * 4;
              return (
                <rect key={col} x={x} y={y + skew} width="44" height="34"
                  fill={row % 3 === 0 ? "#5C361A" : row % 3 === 1 ? "#7A4A24" : "#3A2614"}
                  stroke="#1F1A14" strokeWidth="0.5" />
              );
            })}
          </g>
        ))}
        {/* worker silhouette */}
        <g transform="translate(420 380)">
          <circle cx="0" cy="0" r="18" fill="#1F1A14" />
          <rect x="-5" y="-25" width="10" height="6" fill="#B5471F" />
          <rect x="-12" y="-22" width="24" height="6" fill="#B5471F" />
          <rect x="-15" y="15" width="30" height="60" fill="#1F1A14" />
          <rect x="-20" y="75" width="40" height="30" fill="#3A3026" />
        </g>
        {/* sun ray */}
        <circle cx="700" cy="200" r="40" fill="#F4ECDD" opacity="0.5" />
      </svg>
    ),
    concrete: (
      <svg viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="1000" fill="#A8A096" />
        {/* slab pour */}
        <rect x="0" y="500" width="800" height="500" fill="#C9C2B2" />
        {/* expansion joints */}
        <line x1="200" y1="500" x2="200" y2="1000" stroke="#7A6F5E" strokeWidth="2" strokeDasharray="6 6" />
        <line x1="400" y1="500" x2="400" y2="1000" stroke="#7A6F5E" strokeWidth="2" strokeDasharray="6 6" />
        <line x1="600" y1="500" x2="600" y2="1000" stroke="#7A6F5E" strokeWidth="2" strokeDasharray="6 6" />
        {/* texture dots */}
        {[...Array(80)].map((_, i) => (
          <circle key={i} cx={Math.random()*800} cy={500 + Math.random()*500}
            r={Math.random()*2 + 0.5} fill="#7A6F5E" opacity={Math.random()*0.4} />
        ))}
        {/* form boards */}
        <rect x="0" y="490" width="800" height="14" fill="#7A4A24" />
        {/* rebar grid background */}
        <g opacity="0.3">
          {[...Array(8)].map((_, i) => (
            <line key={`h${i}`} x1="0" y1={150 + i*40} x2="800" y2={150 + i*40} stroke="#5C361A" strokeWidth="3" />
          ))}
          {[...Array(15)].map((_, i) => (
            <line key={`v${i}`} x1={i*60} y1="100" x2={i*60} y2="490" stroke="#5C361A" strokeWidth="3" />
          ))}
        </g>
        {/* trowel */}
        <g transform="translate(500 380) rotate(-15)">
          <rect x="0" y="0" width="200" height="30" fill="#1F1A14" />
          <rect x="80" y="-50" width="20" height="50" fill="#7A4A24" />
          <rect x="60" y="-65" width="60" height="20" fill="#1F1A14" />
        </g>
      </svg>
    ),
    portrait: (
      <svg viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="bgport" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#7A4A24" />
            <stop offset="1" stopColor="#3A2614" />
          </linearGradient>
        </defs>
        <rect width="800" height="1000" fill="url(#bgport)" />
        {/* wood grain wall */}
        {[...Array(8)].map((_, i) => (
          <rect key={i} x="0" y={i*125} width="800" height="125" fill={i % 2 ? "#5C361A" : "#7A4A24"} opacity="0.5" />
        ))}
        {[...Array(20)].map((_, i) => (
          <ellipse key={i} cx={Math.random()*800} cy={Math.random()*1000} rx="60" ry="3" fill="#3A2614" opacity="0.3" />
        ))}
        {/* figure silhouette */}
        <g transform="translate(400 500)">
          {/* shoulders/torso */}
          <path d="M-180,500 Q-180,200 -120,140 Q-60,100 0,90 Q60,100 120,140 Q180,200 180,500 Z" fill="#1F1A14" />
          {/* shirt collar V */}
          <path d="M-30,140 L0,200 L30,140 Z" fill="#F4ECDD" opacity="0.1" />
          {/* head */}
          <ellipse cx="0" cy="-20" rx="80" ry="100" fill="#C9956E" />
          {/* hair / cap */}
          <path d="M-90,-50 Q-100,-130 0,-140 Q100,-130 90,-50 L70,-30 Q0,-80 -70,-30 Z" fill="#1F1A14" />
          <rect x="-95" y="-55" width="190" height="20" fill="#1F1A14" />
          {/* beard */}
          <path d="M-50,30 Q-45,80 0,90 Q45,80 50,30 Q40,50 0,55 Q-40,50 -50,30 Z" fill="#3A3026" />
          {/* eyes */}
          <circle cx="-25" cy="-15" r="3" fill="#1F1A14" />
          <circle cx="25" cy="-15" r="3" fill="#1F1A14" />
        </g>
        {/* dust particles */}
        {[...Array(15)].map((_, i) => (
          <circle key={i} cx={Math.random()*800} cy={Math.random()*500} r="1.5" fill="#F4ECDD" opacity="0.5" />
        ))}
      </svg>
    ),
    workshop: (
      <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="600" fill="#3A2614" />
        {/* pegboard */}
        <rect x="40" y="40" width="720" height="320" fill="#7A4A24" />
        {[...Array(20)].map((_, i) => (
          [...Array(10)].map((_, j) => (
            <circle key={`${i}-${j}`} cx={70 + i*34} cy={70 + j*30} r="2" fill="#3A2614" />
          ))
        ))}
        {/* tools */}
        <g transform="translate(140 120)">
          <rect x="0" y="0" width="14" height="80" fill="#1F1A14" />
          <polygon points="-15,0 29,0 7,-30" fill="#8B8B85" />
        </g>
        <g transform="translate(280 100)">
          <rect x="0" y="40" width="80" height="14" fill="#5C361A" />
          <rect x="80" y="35" width="40" height="24" fill="#8B8B85" />
        </g>
        <g transform="translate(450 110)">
          <rect x="0" y="0" width="6" height="100" fill="#1F1A14" />
          <rect x="-20" y="100" width="46" height="14" fill="#8B8B85" />
        </g>
        <g transform="translate(580 150)">
          <circle cx="30" cy="30" r="30" fill="none" stroke="#8B8B85" strokeWidth="6" />
          {[...Array(16)].map((_, i) => (
            <line key={i} x1="30" y1="30" x2={30 + Math.cos(i * Math.PI/8) * 28} y2={30 + Math.sin(i * Math.PI/8) * 28} stroke="#1F1A14" strokeWidth="2" />
          ))}
        </g>
        {/* workbench */}
        <rect x="0" y="380" width="800" height="220" fill="#5C361A" />
        <rect x="0" y="380" width="800" height="14" fill="#7A4A24" />
        {[100, 700].map(x => (
          <rect key={x} x={x} y="394" width="14" height="206" fill="#3A2614" />
        ))}
        {/* lumber pile */}
        <rect x="500" y="320" width="220" height="14" fill="#C9956E" />
        <rect x="510" y="334" width="220" height="14" fill="#A87B52" />
        <rect x="490" y="348" width="220" height="14" fill="#C9956E" />
        <rect x="520" y="362" width="220" height="14" fill="#A87B52" />
      </svg>
    ),
    map: (
      <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="600" fill="#EBE0CB" />
        {/* topographic contour lines */}
        <g fill="none" stroke="#B5A883" strokeWidth="1">
          <path d="M-50,200 Q200,150 400,220 T850,180" />
          <path d="M-50,260 Q200,210 400,280 T850,240" />
          <path d="M-50,320 Q200,280 400,340 T850,310" />
          <path d="M-50,380 Q200,340 400,400 T850,370" />
          <path d="M-50,140 Q200,90 400,160 T850,120" />
        </g>
        {/* river */}
        <path d="M-20,440 Q150,420 250,460 T500,440 Q650,420 820,460" fill="none" stroke="#6E8AA1" strokeWidth="6" opacity="0.7" />
        {/* roads */}
        <path d="M0,300 Q200,310 400,300 T800,305" fill="none" stroke="#3A3026" strokeWidth="3" strokeDasharray="8 4" />
        <path d="M400,0 Q380,200 400,300 T420,600" fill="none" stroke="#3A3026" strokeWidth="3" strokeDasharray="8 4" />
        {/* trees scattered */}
        {[[120,180],[180,260],[260,140],[540,200],[620,280],[700,150],[150,420],[680,440],[300,500],[560,520]].map(([x,y], i) => (
          <g key={i} transform={`translate(${x} ${y})`}>
            <circle cx="0" cy="0" r="10" fill="#2F4A33" />
            <circle cx="-6" cy="2" r="6" fill="#486B4D" />
          </g>
        ))}
        {/* Murphys marker (center) */}
        <g transform="translate(400 300)">
          <circle cx="0" cy="0" r="60" fill="#B5471F" opacity="0.15" />
          <circle cx="0" cy="0" r="32" fill="#B5471F" opacity="0.3" />
          <circle cx="0" cy="0" r="10" fill="#B5471F" />
          <circle cx="0" cy="0" r="4" fill="#F4ECDD" />
          <text x="14" y="6" fontFamily="Bitter, serif" fontSize="18" fontWeight="700" fill="#1F1A14">Murphys</text>
        </g>
        {/* satellite town pins */}
        {[
          [180, 220, "Angels Camp"],
          [560, 180, "Arnold"],
          [240, 440, "Vallecito"],
          [620, 360, "Avery"],
          [120, 360, "San Andreas"],
          [680, 480, "Dorrington"],
        ].map(([x, y, name], i) => (
          <g key={i} transform={`translate(${x} ${y})`}>
            <circle cx="0" cy="0" r="5" fill="#3A3026" />
            <text x="10" y="4" fontFamily="DM Sans, sans-serif" fontSize="12" fill="#3A3026">{name}</text>
          </g>
        ))}
        {/* compass */}
        <g transform="translate(720 80)">
          <circle cx="0" cy="0" r="30" fill="#FBF6EA" stroke="#3A3026" strokeWidth="1.5" />
          <polygon points="0,-22 6,0 0,22 -6,0" fill="#B5471F" />
          <polygon points="0,-22 6,0 0,0" fill="#8E3416" />
          <text x="-4" y="-34" fontFamily="Bitter, serif" fontSize="12" fontWeight="700" fill="#1F1A14">N</text>
        </g>
      </svg>
    ),
    community: (
      <svg viewBox="0 0 800 450" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="commsky" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#D9C9A6" />
            <stop offset="1" stopColor="#B89D6F" />
          </linearGradient>
        </defs>
        <rect width="800" height="450" fill="url(#commsky)" />
        {/* main street facade */}
        <rect x="0" y="200" width="800" height="250" fill="#7A4A24" />
        {/* building 1 */}
        <rect x="40" y="120" width="180" height="180" fill="#B5471F" />
        <rect x="60" y="160" width="40" height="60" fill="#1F1A14" />
        <rect x="120" y="160" width="40" height="60" fill="#1F1A14" />
        <rect x="180" y="160" width="40" height="60" fill="#1F1A14" />
        <polygon points="30,120 130,80 230,120" fill="#3A3026" />
        {/* building 2 */}
        <rect x="240" y="100" width="200" height="200" fill="#F4ECDD" />
        <rect x="260" y="140" width="50" height="80" fill="#2A2A28" />
        <rect x="330" y="140" width="50" height="80" fill="#2A2A28" />
        <rect x="260" y="240" width="160" height="20" fill="#B5471F" />
        <text x="340" y="256" fontFamily="Bitter, serif" fontSize="14" fontWeight="700" fill="#F4ECDD" textAnchor="middle">MERCANTILE</text>
        {/* building 3 */}
        <rect x="460" y="130" width="180" height="170" fill="#486B4D" />
        <rect x="490" y="170" width="120" height="80" fill="#1F1A14" opacity="0.5" />
        <line x1="550" y1="170" x2="550" y2="250" stroke="#F4ECDD" strokeWidth="3" />
        <line x1="490" y1="210" x2="610" y2="210" stroke="#F4ECDD" strokeWidth="3" />
        {/* building 4 */}
        <rect x="660" y="150" width="140" height="150" fill="#D9C9A6" />
        <rect x="680" y="190" width="40" height="60" fill="#2A2A28" />
        <rect x="740" y="190" width="40" height="60" fill="#2A2A28" />
        {/* sidewalk */}
        <rect x="0" y="300" width="800" height="20" fill="#A8A096" />
        {/* people */}
        {[120, 280, 420, 580].map((x, i) => (
          <g key={i} transform={`translate(${x} 320)`}>
            <circle cx="0" cy="-40" r="8" fill="#3A2614" />
            <rect x="-8" y="-30" width="16" height="22" fill={["#B5471F","#486B4D","#3A3026","#6E8AA1"][i]} />
            <rect x="-8" y="-8" width="6" height="16" fill="#3A3026" />
            <rect x="2" y="-8" width="6" height="16" fill="#3A3026" />
          </g>
        ))}
        {/* bunting */}
        <line x1="220" y1="100" x2="460" y2="100" stroke="#1F1A14" strokeWidth="1" />
        {[240,280,320,360,400,440].map((x, i) => (
          <polygon key={i} points={`${x-8},100 ${x+8},100 ${x},120`} fill={i%2 ? "#B5471F" : "#486B4D"} />
        ))}
      </svg>
    ),
    project: (
      <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <rect width="800" height="600" fill="#3A3026" />
        {/* framing study */}
        <g stroke="#C9956E" strokeWidth="6" fill="none">
          <rect x="100" y="100" width="600" height="400" />
          <line x1="100" y1="200" x2="700" y2="200" />
          <line x1="200" y1="100" x2="200" y2="500" />
          <line x1="300" y1="100" x2="300" y2="500" />
          <line x1="400" y1="100" x2="400" y2="500" />
          <line x1="500" y1="100" x2="500" y2="500" />
          <line x1="600" y1="100" x2="600" y2="500" />
          <line x1="100" y1="350" x2="700" y2="350" />
        </g>
        {/* diagonal braces */}
        <line x1="100" y1="500" x2="200" y2="350" stroke="#A87B52" strokeWidth="6" />
        <line x1="700" y1="500" x2="600" y2="350" stroke="#A87B52" strokeWidth="6" />
        {/* tarp */}
        <polygon points="80,80 720,80 740,100 60,100" fill="#B5471F" />
      </svg>
    ),
  };

  return (
    <div className={`placeholder ph-${kind} ${className}`} style={{position: "absolute", inset: 0, overflow: "hidden"}}>
      {scenes[kind] || scenes.house}
      {caption && <div className="ph-caption">{caption}</div>}
    </div>
  );
};

window.Placeholder = Placeholder;