// House photo (SVG placeholder with a stylized house silhouette)
function HousePhoto({ house, size = 'md' }) {
  const heights = { sm: 64, md: 120, lg: 220, xl: 280 };
  const h = heights[size] || heights.md;
  const hue = house.photoHue;
  // Use a gradient background with a soft silhouette
  return (
    <div className="house-photo stripes"
         style={{
           height: h,
           borderRadius: 8,
           background: `linear-gradient(155deg, oklch(0.72 0.04 ${hue}), oklch(0.52 0.06 ${hue + 10}))`,
           position: 'relative',
           overflow: 'hidden',
         }}>
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.92 }}>
        <defs>
          <linearGradient id={`sky-${house.id}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor={`oklch(0.82 0.04 ${hue})`} />
            <stop offset="1" stopColor={`oklch(0.68 0.05 ${hue + 10})`} />
          </linearGradient>
          <linearGradient id={`ground-${house.id}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor={`oklch(0.55 0.05 ${hue + 20})`} />
            <stop offset="1" stopColor={`oklch(0.42 0.06 ${hue + 30})`} />
          </linearGradient>
        </defs>
        <rect x="0" y="0" width="400" height="200" fill={`url(#sky-${house.id})`} />
        <rect x="0" y="200" width="400" height="100" fill={`url(#ground-${house.id})`} />
        {/* Distant hills */}
        <path d="M0 200 Q 100 170, 200 190 T 400 180 L 400 210 L 0 210 Z" fill={`oklch(0.5 0.05 ${hue + 15})`} opacity="0.6"/>
        {/* House silhouette */}
        <g opacity="0.95">
          <rect x="140" y="165" width="130" height="75" fill={`oklch(0.92 0.02 ${hue})`} />
          <polygon points="130,168 205,115 280,168" fill={`oklch(0.38 0.04 ${hue + 20})`} />
          <rect x="160" y="190" width="22" height="32" fill={`oklch(0.55 0.06 ${hue + 20})`} />
          <rect x="200" y="190" width="20" height="20" fill={`oklch(0.55 0.06 ${hue + 20})`} />
          <rect x="230" y="190" width="20" height="20" fill={`oklch(0.55 0.06 ${hue + 20})`} />
          <rect x="195" y="150" width="20" height="12" fill={`oklch(0.55 0.06 ${hue + 20})`} />
          {/* chimney */}
          <rect x="248" y="135" width="14" height="22" fill={`oklch(0.38 0.04 ${hue + 20})`} />
        </g>
        {/* Foreground grass stroke */}
        <path d="M0 242 L 400 242" stroke={`oklch(0.38 0.06 ${hue + 30})`} strokeWidth="3" opacity="0.4"/>
      </svg>
    </div>
  );
}

Object.assign(window, { HousePhoto });