/* ===========================================================
   Photos — 実写優先、足りない部分はSVGプレースホルダーで補完
   実写は同フォルダ内の 画像素材/ から相対参照
   =========================================================== */

const RealPhotos = {
  harbor:    "images/work5.webp", // 神戸の夜景・港
  worker:    "images/work6.jpg",  // 職人＋クレーン・青空
  facade:    "images/work2.jpg",  // タワーマンション外観・夜景
  entrance:  "images/work4.jpg",  // マンションエントランス
  interior:  "images/work1.jpg",  // 高級マンション内エントランス
  modern:    "images/work3.jpg",  // 白壁モダン建築・夜
  team:      "images/team.jpg",
  president: "images/president.jpg",
  signature: "images/signature.gif",
  logo:      "images/logo.png",
};

const PhotoSwatches = {
  // 神戸の港町・建設中タワマンスカイライン（夕方）
  skyline: (
    <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" className="ph-svg">
      <defs>
        <linearGradient id="sky-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#1a1a1c"/>
          <stop offset=".7" stopColor="#2a2a2e"/>
          <stop offset="1" stopColor="#3a3a3e"/>
        </linearGradient>
      </defs>
      <rect width="800" height="600" fill="url(#sky-sky)"/>
      <path d="M0 360 L80 330 L150 345 L220 310 L300 335 L380 305 L460 330 L540 300 L640 325 L740 305 L800 320 L800 600 L0 600 Z"
            fill="#15151a" opacity=".9"/>
      <g fill="#0a0a0c">
        <rect x="40" y="380" width="60" height="220"/>
        <rect x="110" y="340" width="40" height="260"/>
        <rect x="160" y="400" width="80" height="200"/>
        <rect x="250" y="280" width="44" height="320"/>
        <rect x="300" y="360" width="58" height="240"/>
        <rect x="370" y="220" width="50" height="380"/>
        <rect x="430" y="320" width="70" height="280"/>
        <rect x="510" y="250" width="40" height="350"/>
        <rect x="560" y="380" width="64" height="220"/>
        <rect x="630" y="330" width="46" height="270"/>
        <rect x="690" y="260" width="50" height="340"/>
        <rect x="750" y="380" width="50" height="220"/>
      </g>
      <g fill="rgba(255,225,170,.22)">
        {Array.from({length:60}).map((_,i)=>{
          const x = (i*47)%760 + 40;
          const y = 260 + (i*23)%260;
          return <rect key={i} x={x} y={y} width="2" height="3"/>;
        })}
      </g>
    </svg>
  ),

  // 鉄筋・現場ディテール
  rebar: (
    <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" className="ph-svg">
      <defs>
        <linearGradient id="reb-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#2a2a2c"/>
          <stop offset="1" stopColor="#0e0e10"/>
        </linearGradient>
      </defs>
      <rect width="800" height="600" fill="url(#reb-bg)"/>
      <g stroke="#5a5856" strokeWidth="3" opacity=".9">
        {Array.from({length:18}).map((_,i)=>(
          <line key={"h"+i} x1="-20" y1={40+i*32} x2="820" y2={20+i*32}/>
        ))}
        {Array.from({length:24}).map((_,i)=>(
          <line key={"v"+i} x1={i*36} y1="-20" x2={i*36+10} y2="620"/>
        ))}
      </g>
      <rect width="800" height="600" fill="rgba(0,0,0,.25)"/>
    </svg>
  ),

  // school / 改修
  school: (
    <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" className="ph-svg">
      <rect width="800" height="600" fill="#9f9b94"/>
      <rect width="800" height="200" fill="#7a766f"/>
      <rect x="60" y="160" width="680" height="380" fill="#3a3a3c"/>
      <g fill="#dcd8d2">
        {Array.from({length:5}).map((_,r)=>
          Array.from({length:10}).map((_,c)=>(
            <rect key={`${r}-${c}`} x={88+c*64} y={188+r*72} width="40" height="48"/>
          ))
        )}
      </g>
      <g stroke="#1a1a1a" strokeWidth="2">
        {Array.from({length:5}).map((_,r)=>
          <line key={"r"+r} x1="60" y1={170+r*72} x2="740" y2={170+r*72}/>
        )}
      </g>
      <rect x="60" y="540" width="680" height="60" fill="#0a0a0a"/>
    </svg>
  ),

  // コンクリート打設
  concrete: (
    <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" className="ph-svg">
      <rect width="800" height="600" fill="#1a1a1c"/>
      {Array.from({length:280}).map((_,i)=>{
        const x = (i*97)%800;
        const y = (i*53)%600;
        const w = ((i*13)%24)+4;
        const h = ((i*17)%18)+4;
        const o = (((i*7)%30)+5)/100;
        return <rect key={i} x={x} y={y} width={w} height={h} fill="#fff" opacity={o*.18}/>;
      })}
      <rect width="800" height="600" fill="rgba(0,0,0,.25)"/>
    </svg>
  ),

  // 抽象的な現場
  site: (
    <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" className="ph-svg">
      <rect width="800" height="600" fill="#16161a"/>
      <polygon points="0,180 800,80 800,260 0,360" fill="#1f1f25" opacity=".9"/>
      <g stroke="#3a3a3a" strokeWidth="3">
        {Array.from({length:6}).map((_,i)=>(
          <line key={"v"+i} x1={120+i*120} y1="0" x2={120+i*120} y2="600"/>
        ))}
        {Array.from({length:5}).map((_,i)=>(
          <line key={"h"+i} x1="0" y1={120+i*100} x2="800" y2={120+i*100}/>
        ))}
      </g>
    </svg>
  ),
};

const Photo = ({ kind = "site", label, className = "" }) => {
  const realSrc = RealPhotos[kind];
  return (
    <div className={`photo ${className}`}>
      {realSrc ? (
        <img src={realSrc} alt={label || kind} className="ph-img" loading="lazy" />
      ) : (
        PhotoSwatches[kind] || PhotoSwatches.site
      )}
      {label && <span className="ph-label">{label}</span>}
    </div>
  );
};

window.Photo = Photo;
window.PhotoSwatches = PhotoSwatches;
window.RealPhotos = RealPhotos;