// photos.jsx — 写真プレースホルダー（CSSグラデーション+SVGで雰囲気を出す）
// 実写真がないため、施工現場・職人・住宅を抽象的に表現

const PhotoPlaceholder = ({ kind, label, style }) => {
  const variants = {
    inspection: {
      bg: "linear-gradient(135deg, #2a4f7a 0%, #4a7ba8 50%, #6a9bc4 100%)",
      svg: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
          <defs>
            <linearGradient id="floor1" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#3d2818" />
              <stop offset="1" stopColor="#1a0f08" />
            </linearGradient>
          </defs>
          <rect width="400" height="250" fill="url(#floor1)" />
          {/* 床下のコンクリート */}
          <rect y="180" width="400" height="70" fill="#5a4030" opacity="0.5" />
          {/* 木材の梁 */}
          <rect x="0" y="60" width="400" height="20" fill="#8b6840" opacity="0.7" />
          <rect x="0" y="120" width="400" height="14" fill="#6b4f2c" opacity="0.6" />
          {/* 懐中電灯の光 */}
          <ellipse cx="280" cy="160" rx="100" ry="60" fill="#ffeaa0" opacity="0.35" />
          <ellipse cx="280" cy="160" rx="55" ry="35" fill="#fff5c8" opacity="0.5" />
          {/* 作業員シルエット */}
          <ellipse cx="120" cy="155" rx="34" ry="22" fill="#1a1a2a" />
          <circle cx="120" cy="118" r="14" fill="#1a1a2a" />
          <rect x="115" y="105" width="10" height="6" fill="#ffd866" />
          {/* スプレーノズル */}
          <line x1="148" y1="148" x2="200" y2="135" stroke="#3a3a4a" strokeWidth="3" strokeLinecap="round" />
        </svg>
      )
    },
    house: {
      bg: "linear-gradient(180deg, #87bce8 0%, #c5e0f0 60%, #e8f0e0 100%)",
      svg: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
          <defs>
            <linearGradient id="sky1" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#9bcde8" />
              <stop offset="1" stopColor="#dcebf5" />
            </linearGradient>
          </defs>
          <rect width="400" height="180" fill="url(#sky1)" />
          <rect y="180" width="400" height="70" fill="#a8c889" />
          {/* 雲 */}
          <ellipse cx="80" cy="50" rx="40" ry="14" fill="white" opacity="0.85" />
          <ellipse cx="320" cy="40" rx="32" ry="11" fill="white" opacity="0.85" />
          {/* 家 */}
          <polygon points="120,120 200,70 280,120" fill="#b85040" />
          <polygon points="120,120 200,75 280,120 280,125 200,80 120,125" fill="#8a3528" />
          <rect x="135" y="120" width="135" height="80" fill="#f5ecd8" />
          <rect x="135" y="195" width="135" height="6" fill="#5a4030" />
          {/* 窓 */}
          <rect x="148" y="138" width="32" height="32" fill="#7ab8d8" stroke="#4a3020" strokeWidth="2" />
          <line x1="164" y1="138" x2="164" y2="170" stroke="#4a3020" strokeWidth="1.5" />
          <line x1="148" y1="154" x2="180" y2="154" stroke="#4a3020" strokeWidth="1.5" />
          <rect x="225" y="138" width="32" height="32" fill="#7ab8d8" stroke="#4a3020" strokeWidth="2" />
          <line x1="241" y1="138" x2="241" y2="170" stroke="#4a3020" strokeWidth="1.5" />
          <line x1="225" y1="154" x2="257" y2="154" stroke="#4a3020" strokeWidth="1.5" />
          {/* ドア */}
          <rect x="190" y="160" width="24" height="40" fill="#6b4530" stroke="#3a2515" strokeWidth="2" />
          <circle cx="208" cy="180" r="1.5" fill="#dcc060" />
          {/* 木 */}
          <rect x="60" y="170" width="6" height="22" fill="#5a3a20" />
          <circle cx="63" cy="160" r="18" fill="#6ba055" />
          <rect x="340" y="170" width="6" height="22" fill="#5a3a20" />
          <circle cx="343" cy="160" r="18" fill="#7ab058" />
        </svg>
      )
    },
    worker: {
      bg: "linear-gradient(135deg, #e8d4b0 0%, #d4b888 100%)",
      svg: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
          <rect width="400" height="250" fill="#dcc498" />
          <rect y="160" width="400" height="90" fill="#a8814e" />
          {/* 作業員 */}
          <ellipse cx="200" cy="240" rx="80" ry="20" fill="#7a5a30" opacity="0.4" />
          <rect x="160" y="120" width="80" height="120" rx="8" fill="#1a4f8a" />
          <circle cx="200" cy="80" r="36" fill="#f5d4a8" />
          {/* ヘルメット */}
          <path d="M 162 70 Q 200 36 238 70 L 238 80 L 162 80 Z" fill="#d8a020" />
          <rect x="162" y="76" width="76" height="6" fill="#a87810" />
          {/* 顔 */}
          <circle cx="190" cy="84" r="2.5" fill="#2a1a0a" />
          <circle cx="210" cy="84" r="2.5" fill="#2a1a0a" />
          <path d="M 192 96 Q 200 100 208 96" stroke="#2a1a0a" strokeWidth="2" fill="none" />
          {/* 腕 */}
          <rect x="135" y="125" width="25" height="60" rx="6" fill="#1a4f8a" />
          <rect x="240" y="125" width="25" height="60" rx="6" fill="#1a4f8a" />
          <circle cx="147" cy="190" r="10" fill="#f5d4a8" />
          <circle cx="252" cy="190" r="10" fill="#f5d4a8" />
          {/* 名札 */}
          <rect x="180" y="148" width="40" height="14" rx="2" fill="white" />
        </svg>
      )
    },
    floor: {
      bg: "linear-gradient(180deg, #2a1a10 0%, #4a3020 100%)",
      svg: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
          <rect width="400" height="250" fill="#3a2515" />
          {/* 木材 */}
          <rect x="0" y="0" width="400" height="40" fill="#6b4530" />
          <rect x="0" y="40" width="400" height="3" fill="#2a1a0a" />
          <rect x="0" y="120" width="400" height="35" fill="#5a3a25" />
          <rect x="0" y="155" width="400" height="3" fill="#2a1a0a" />
          {/* 木目 */}
          <ellipse cx="80" cy="20" rx="20" ry="6" fill="#4a2f1c" opacity="0.5" />
          <ellipse cx="240" cy="22" rx="25" ry="5" fill="#4a2f1c" opacity="0.5" />
          <ellipse cx="120" cy="138" rx="22" ry="5" fill="#3a2515" opacity="0.6" />
          {/* シロアリ食害の穴・線 */}
          <ellipse cx="180" cy="60" rx="40" ry="12" fill="#1a0a05" opacity="0.7" />
          <ellipse cx="220" cy="180" rx="30" ry="10" fill="#1a0a05" opacity="0.7" />
          <path d="M 60 70 Q 100 65 140 75 Q 180 85 220 78" stroke="#0a0502" strokeWidth="2" fill="none" opacity="0.5" />
          <path d="M 100 200 Q 160 195 220 205 Q 280 215 340 208" stroke="#0a0502" strokeWidth="2" fill="none" opacity="0.5" />
          {/* 白い土の道（蟻道） */}
          <path d="M 50 100 Q 150 95 250 105 Q 320 110 380 100" stroke="#a89878" strokeWidth="6" fill="none" opacity="0.7" strokeLinecap="round" />
        </svg>
      )
    },
    teamphoto: {
      bg: "linear-gradient(180deg, #b0d4eb 0%, #e0eaf0 100%)",
      svg: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
          <rect width="400" height="250" fill="#cce0f0" />
          <rect y="180" width="400" height="70" fill="#8aa888" />
          {/* チーム3人 */}
          {[80, 200, 320].map((x, i) => (
            <g key={i}>
              <ellipse cx={x} cy="240" rx="50" ry="12" fill="#5a7058" opacity="0.4" />
              <rect x={x - 28} y="130" width="56" height="100" rx="6" fill={["#1a4f8a", "#0a3a6e", "#2a6fa8"][i]} />
              <circle cx={x} cy="100" r="26" fill="#f5d4a8" />
              <path d={`M ${x - 26} 92 Q ${x} 64 ${x + 26} 92 L ${x + 26} 100 L ${x - 26} 100 Z`} fill="#d8a020" />
              <circle cx={x - 8} cy="102" r="2" fill="#2a1a0a" />
              <circle cx={x + 8} cy="102" r="2" fill="#2a1a0a" />
              <path d={`M ${x - 6} 112 Q ${x} 116 ${x + 6} 112`} stroke="#2a1a0a" strokeWidth="1.5" fill="none" />
              <rect x={x - 12} y="160" width="24" height="10" rx="2" fill="white" />
            </g>
          ))}
          {/* 雲 */}
          <ellipse cx="60" cy="40" rx="30" ry="10" fill="white" opacity="0.85" />
          <ellipse cx="340" cy="50" rx="34" ry="11" fill="white" opacity="0.85" />
        </svg>
      )
    },
    portrait: {
      bg: "linear-gradient(135deg, #d8e4f0 0%, #b0c8e0 100%)",
      svg: (
        <svg viewBox="0 0 200 220" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
          <rect width="200" height="220" fill="#cfdce8" />
          <rect x="35" y="115" width="130" height="105" rx="10" fill="#0a3a6e" />
          <circle cx="100" cy="90" r="40" fill="#f5d4a8" />
          <path d="M 60 80 Q 100 40 140 80 L 140 90 L 60 90 Z" fill="#d8a020" />
          <circle cx="86" cy="92" r="3" fill="#2a1a0a" />
          <circle cx="114" cy="92" r="3" fill="#2a1a0a" />
          <path d="M 88 108 Q 100 116 112 108" stroke="#2a1a0a" strokeWidth="2" fill="none" />
          <rect x="80" y="140" width="40" height="14" rx="2" fill="white" />
        </svg>
      )
    }
  };
  const v = variants[kind] || variants.house;
  return (
    <div style={{ position: "absolute", inset: 0, background: v.bg, overflow: "hidden", ...style }}>
      {v.svg}
      {label && (
        <div style={{ position: "absolute", bottom: 10, right: 10, background: "rgba(0,0,0,0.55)", color: "white", fontSize: 10, padding: "3px 8px", borderRadius: 4, letterSpacing: "0.05em" }}>
          {label}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { PhotoPlaceholder });
