// Decorative SVG "placeholder" imagery for listings — each is a stylized
// architectural silhouette in tones that match the sand/cream palette.
// These are intentionally minimal — no photo slop, just calm placeholders
// that signal "this is where a real property photo goes".

const ListingArt = ({ tone = 'warm', sold = false }) => {
  const palettes = {
    warm:  { sky: '#d6c4a8', a: '#b89e7a', b: '#8a7052', c: '#5d4a34' },
    sage:  { sky: '#c5c8b4', a: '#9aa186', b: '#6f7a60', c: '#4a523c' },
    clay:  { sky: '#d2b89f', a: '#a88063', b: '#7c5a42', c: '#4f3a28' },
    mist:  { sky: '#c2bfb4', a: '#908c80', b: '#615e55', c: '#3d3b35' },
  };
  const p = palettes[tone] || palettes.warm;
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" style={sold ? {filter: 'grayscale(0.6) brightness(0.92)'} : {}}>
      <defs>
        <linearGradient id={`sky-${tone}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={p.sky} stopOpacity="0.9" />
          <stop offset="1" stopColor={p.a} stopOpacity="0.8" />
        </linearGradient>
        <pattern id={`tex-${tone}`} width="3" height="3" patternUnits="userSpaceOnUse">
          <rect width="3" height="3" fill="transparent" />
          <circle cx="1" cy="1" r="0.3" fill={p.c} fillOpacity="0.06" />
        </pattern>
      </defs>
      <rect width="400" height="300" fill={`url(#sky-${tone})`} />
      <rect width="400" height="300" fill={`url(#tex-${tone})`} />
      {/* distant trees */}
      <g fill={p.b} opacity="0.35">
        <circle cx="40" cy="200" r="28" />
        <circle cx="70" cy="205" r="22" />
        <circle cx="330" cy="195" r="30" />
        <circle cx="365" cy="200" r="24" />
      </g>
      {/* house silhouette */}
      <g fill={p.b}>
        <polygon points="140,160 200,110 260,160 260,230 140,230" />
        <polygon points="260,165 310,135 310,230 260,230" opacity="0.85" />
      </g>
      <rect x="188" y="185" width="24" height="45" fill={p.sky} opacity="0.45" />
      <rect x="158" y="175" width="18" height="22" fill={p.sky} opacity="0.45" />
      <rect x="224" y="175" width="18" height="22" fill={p.sky} opacity="0.45" />
      <rect x="272" y="180" width="14" height="20" fill={p.sky} opacity="0.45" />
      {/* ground */}
      <rect x="0" y="228" width="400" height="72" fill={p.c} opacity="0.35" />
      <rect x="0" y="246" width="400" height="54" fill={p.c} opacity="0.5" />
    </svg>
  );
};

// Tiny inline icons (stroke-only)
const Ico = ({ name }) => {
  const paths = {
    bed: 'M3 12v6M21 12v6M3 14h18M5 14v-3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3',
    bath: 'M4 12h16v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-4zM6 12V7a2 2 0 0 1 2-2h1',
    area: 'M3 9V3h6M21 15v6h-6M3 3l7 7M21 21l-7-7',
    mail: 'M4 6h16v12H4zM4 6l8 7 8-7',
    phone: 'M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z',
    pin: 'M12 22s7-6 7-12a7 7 0 0 0-14 0c0 6 7 12 7 12z M12 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z',
    arrow: 'M5 12h14M13 5l7 7-7 7',
  };
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[name]} />
    </svg>
  );
};

Object.assign(window, { ListingArt, Ico });