// House thumbnail SVGs — stylized Dutch terraced houses
// 5 variants matching the screenshots' colorways

const HouseThumb = ({ variant = 'brick', size = 56 }) => {
  const variants = {
    // Warm brick row houses (Hyacinthenstraat)
    brick: (
      <svg width={size} height={size} viewBox="0 0 56 56">
        <rect width="56" height="56" fill="#B5C4D0"/>
        {/* sky */}
        <rect width="56" height="22" fill="#C9D7DF"/>
        {/* trees */}
        <circle cx="8" cy="20" r="8" fill="#5D7A52"/>
        <circle cx="50" cy="18" r="9" fill="#6B8458"/>
        {/* brick facade */}
        <rect x="0" y="18" width="56" height="28" fill="#B8856A"/>
        <rect x="0" y="18" width="56" height="3" fill="#8B5E44"/>
        {/* white windows */}
        <rect x="6" y="24" width="8" height="10" fill="#F2EDDC"/>
        <rect x="18" y="24" width="8" height="10" fill="#F2EDDC"/>
        <rect x="30" y="24" width="8" height="10" fill="#F2EDDC"/>
        <rect x="42" y="24" width="8" height="10" fill="#F2EDDC"/>
        {/* shopfront */}
        <rect x="4" y="36" width="22" height="10" fill="#3E5166"/>
        <rect x="28" y="36" width="24" height="10" fill="#AF7B62"/>
        {/* ground */}
        <rect y="46" width="56" height="10" fill="#8A8A8A"/>
        {/* bushes */}
        <ellipse cx="14" cy="47" rx="6" ry="3" fill="#5A7048"/>
        <ellipse cx="40" cy="47" rx="7" ry="3" fill="#4E6540"/>
      </svg>
    ),
    // Green front yard (Hoofdstraat)
    green: (
      <svg width={size} height={size} viewBox="0 0 56 56">
        <rect width="56" height="56" fill="#BFD0C4"/>
        {/* sky */}
        <rect width="56" height="16" fill="#CFDDDB"/>
        {/* trees big */}
        <circle cx="12" cy="16" r="12" fill="#527A4F"/>
        <circle cx="46" cy="14" r="11" fill="#5C8356"/>
        {/* house peeking */}
        <rect x="16" y="22" width="26" height="18" fill="#C8998A"/>
        <polygon points="16,22 29,12 42,22" fill="#8A4B3A"/>
        <rect x="22" y="26" width="5" height="8" fill="#F0E4CF"/>
        <rect x="31" y="26" width="5" height="8" fill="#F0E4CF"/>
        {/* hedge */}
        <rect y="38" width="56" height="10" fill="#4E6540"/>
        <circle cx="8" cy="38" r="7" fill="#597B4A"/>
        <circle cx="28" cy="38" r="8" fill="#547246"/>
        <circle cx="48" cy="38" r="7" fill="#597B4A"/>
        {/* pavement */}
        <rect y="48" width="56" height="8" fill="#9C9C9C"/>
      </svg>
    ),
    // Blue-toned street (Rijksweg)
    blue: (
      <svg width={size} height={size} viewBox="0 0 56 56">
        <rect width="56" height="56" fill="#A9B8C6"/>
        {/* sky */}
        <rect width="56" height="20" fill="#B8CEDC"/>
        {/* row houses */}
        <rect x="0" y="12" width="56" height="30" fill="#9B6C52"/>
        <polygon points="0,12 10,4 20,12" fill="#6B3A24"/>
        <polygon points="18,12 28,4 38,12" fill="#6B3A24"/>
        <polygon points="36,12 46,4 56,12" fill="#6B3A24"/>
        {/* windows */}
        <rect x="4" y="18" width="8" height="8" fill="#DDE4E9"/>
        <rect x="22" y="18" width="8" height="8" fill="#DDE4E9"/>
        <rect x="40" y="18" width="8" height="8" fill="#DDE4E9"/>
        <rect x="4" y="30" width="8" height="8" fill="#DDE4E9"/>
        <rect x="22" y="30" width="8" height="8" fill="#DDE4E9"/>
        <rect x="40" y="30" width="8" height="8" fill="#DDE4E9"/>
        {/* street + car */}
        <rect y="42" width="56" height="14" fill="#6E747A"/>
        <rect x="6" y="44" width="20" height="9" rx="2" fill="#1E2A35"/>
        <rect x="8" y="46" width="16" height="4" fill="#6DA3C0"/>
      </svg>
    ),
    // Leafy street (Cremerlaan)
    leafy: (
      <svg width={size} height={size} viewBox="0 0 56 56">
        <rect width="56" height="56" fill="#C2D6CA"/>
        <rect width="56" height="18" fill="#D0DED6"/>
        {/* big tree canopy */}
        <circle cx="18" cy="18" r="14" fill="#486D48"/>
        <circle cx="44" cy="14" r="12" fill="#547A52"/>
        {/* house behind */}
        <rect x="24" y="20" width="22" height="18" fill="#A47864"/>
        <polygon points="24,20 35,12 46,20" fill="#6B3A24"/>
        <rect x="28" y="25" width="4" height="6" fill="#E6DCC7"/>
        <rect x="36" y="25" width="4" height="6" fill="#E6DCC7"/>
        {/* road */}
        <rect y="38" width="56" height="18" fill="#7A8177"/>
        <rect x="4" y="41" width="18" height="10" rx="2" fill="#222"/>
        <rect x="6" y="43" width="14" height="5" fill="#7EA9BE"/>
      </svg>
    ),
    // Grey/wintery (Roos en Beeklaan)
    grey: (
      <svg width={size} height={size} viewBox="0 0 56 56">
        <rect width="56" height="56" fill="#B8BCC2"/>
        <rect width="56" height="22" fill="#C7CBD0"/>
        {/* trees bare */}
        <circle cx="10" cy="20" r="8" fill="#8E988F"/>
        <circle cx="48" cy="18" r="9" fill="#A0A99F"/>
        {/* row house */}
        <rect x="0" y="20" width="56" height="24" fill="#C1A9A0"/>
        <rect x="0" y="20" width="56" height="4" fill="#7A5A50"/>
        <rect x="6" y="26" width="6" height="7" fill="#ECE4D6"/>
        <rect x="18" y="26" width="6" height="7" fill="#ECE4D6"/>
        <rect x="30" y="26" width="6" height="7" fill="#ECE4D6"/>
        <rect x="42" y="26" width="6" height="7" fill="#ECE4D6"/>
        <rect x="6" y="35" width="10" height="9" fill="#3A4B5C"/>
        <rect x="22" y="35" width="10" height="9" fill="#5C4436"/>
        <rect x="38" y="35" width="10" height="9" fill="#3A4B5C"/>
        {/* sidewalk */}
        <rect y="44" width="56" height="12" fill="#8C8C8C"/>
        <rect x="4" y="46" width="18" height="9" rx="1.5" fill="#2A2A2A"/>
      </svg>
    ),
  };
  return (
    <div style={{
      width: size, height: size, borderRadius: 10, overflow: 'hidden',
      flexShrink: 0, boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.04)',
    }}>
      {variants[variant] || variants.brick}
    </div>
  );
};

// Larger version for the detail view (full width)
const HouseHero = ({ variant = 'brick' }) => (
  <div style={{
    width: '100%', aspectRatio: '16/8', borderRadius: 10, overflow: 'hidden',
    position: 'relative',
  }}>
    <div style={{ width: '100%', height: '100%', transform: 'scale(3)', transformOrigin: 'center' }}>
      <HouseThumb variant={variant} size="100%" />
    </div>
  </div>
);

// Better: render a larger version with more detail
const HouseHeroSvg = ({ variant = 'brick' }) => {
  const variants = {
    brick: (
      <svg viewBox="0 0 320 160" style={{ width: '100%', height: '100%', display: 'block' }} preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="160" fill="#C9D7DF"/>
        {/* sky */}
        <rect width="320" height="60" fill="#D6E1E7"/>
        {/* trees */}
        <circle cx="30" cy="58" r="36" fill="#5D7A52"/>
        <circle cx="55" cy="48" r="28" fill="#6B8458"/>
        <circle cx="285" cy="55" r="42" fill="#6B8458"/>
        <circle cx="260" cy="45" r="30" fill="#7A9467"/>
        {/* facade — brick row */}
        <rect x="0" y="55" width="320" height="80" fill="#B8856A"/>
        <rect x="0" y="55" width="320" height="6" fill="#8B5E44"/>
        {/* windows upstairs */}
        {[20, 80, 140, 200, 260].map(x => (
          <g key={x}>
            <rect x={x} y="70" width="30" height="22" fill="#F2EDDC"/>
            <rect x={x} y="70" width="30" height="3" fill="#8B5E44"/>
            <rect x={x + 14} y="70" width="2" height="22" fill="#8B5E44"/>
            <rect x={x} y="80" width="30" height="2" fill="#8B5E44"/>
          </g>
        ))}
        {/* street sign pole */}
        <rect x="155" y="50" width="2.5" height="65" fill="#5A6670"/>
        <rect x="140" y="70" width="35" height="10" fill="#3D63DD"/>
        <text x="157.5" y="78" textAnchor="middle" fontFamily="sans-serif" fontSize="6" fontWeight="700" fill="#fff">STRAAT</text>
        {/* shopfront ground */}
        <rect x="10" y="100" width="80" height="28" fill="#3E5166"/>
        <rect x="14" y="104" width="72" height="18" fill="#D6D2C0"/>
        <rect x="100" y="100" width="100" height="28" fill="#AF7B62"/>
        <rect x="110" y="106" width="36" height="20" fill="#3A2A22"/>
        <rect x="150" y="106" width="40" height="20" fill="#D6D2C0"/>
        <rect x="210" y="100" width="100" height="28" fill="#7A9467"/>
        <rect x="220" y="106" width="80" height="20" fill="#4A5C3B"/>
        {/* ground */}
        <rect y="128" width="320" height="32" fill="#8A8A8A"/>
        {/* bushes */}
        <ellipse cx="50" cy="132" rx="30" ry="12" fill="#5A7048"/>
        <ellipse cx="180" cy="133" rx="40" ry="13" fill="#4E6540"/>
        <ellipse cx="280" cy="132" rx="30" ry="12" fill="#5A7048"/>
        {/* parked scooter silhouette */}
        <rect x="240" y="138" width="28" height="10" rx="2" fill="#1A1F2A"/>
        <circle cx="246" cy="150" r="5" fill="#1A1F2A"/>
        <circle cx="264" cy="150" r="5" fill="#1A1F2A"/>
      </svg>
    ),
    green: (
      <svg viewBox="0 0 320 160" style={{ width: '100%', height: '100%', display: 'block' }} preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="160" fill="#BFD0C4"/>
        <rect width="320" height="45" fill="#CFDDDB"/>
        <circle cx="60" cy="45" r="50" fill="#527A4F"/>
        <circle cx="250" cy="40" r="55" fill="#5C8356"/>
        <rect x="90" y="55" width="140" height="60" fill="#C8998A"/>
        <polygon points="90,55 160,25 230,55" fill="#8A4B3A"/>
        <rect x="108" y="75" width="22" height="30" fill="#F0E4CF"/>
        <rect x="150" y="75" width="22" height="30" fill="#F0E4CF"/>
        <rect x="190" y="75" width="22" height="30" fill="#F0E4CF"/>
        <rect y="115" width="320" height="30" fill="#4E6540"/>
        <circle cx="40" cy="115" r="26" fill="#597B4A"/>
        <circle cx="160" cy="115" r="30" fill="#547246"/>
        <circle cx="280" cy="115" r="26" fill="#597B4A"/>
        <rect y="145" width="320" height="15" fill="#9C9C9C"/>
      </svg>
    ),
    blue: (
      <svg viewBox="0 0 320 160" style={{ width: '100%', height: '100%', display: 'block' }} preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="160" fill="#A9B8C6"/>
        <rect width="320" height="40" fill="#B8CEDC"/>
        {/* roofs */}
        <polygon points="0,30 30,10 60,30" fill="#6B3A24"/>
        <polygon points="55,30 85,10 115,30" fill="#6B3A24"/>
        <polygon points="110,30 140,10 170,30" fill="#6B3A24"/>
        <polygon points="165,30 195,10 225,30" fill="#6B3A24"/>
        <polygon points="220,30 250,10 280,30" fill="#6B3A24"/>
        <polygon points="275,30 305,10 320,20 320,30" fill="#6B3A24"/>
        <rect x="0" y="28" width="320" height="90" fill="#9B6C52"/>
        {/* windows */}
        {[10, 65, 120, 175, 230, 285].map(x => (
          <g key={x}>
            <rect x={x} y="45" width="30" height="22" fill="#DDE4E9"/>
            <rect x={x} y="78" width="30" height="22" fill="#DDE4E9"/>
          </g>
        ))}
        {/* street + parked car */}
        <rect y="118" width="320" height="42" fill="#6E747A"/>
        <rect x="30" y="125" width="80" height="25" rx="4" fill="#1E2A35"/>
        <rect x="38" y="130" width="64" height="12" fill="#6DA3C0"/>
        <circle cx="48" cy="152" r="7" fill="#111"/>
        <circle cx="98" cy="152" r="7" fill="#111"/>
      </svg>
    ),
    leafy: (
      <svg viewBox="0 0 320 160" style={{ width: '100%', height: '100%', display: 'block' }} preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="160" fill="#C2D6CA"/>
        <rect width="320" height="35" fill="#D0DED6"/>
        <circle cx="80" cy="50" r="55" fill="#486D48"/>
        <circle cx="240" cy="40" r="50" fill="#547A52"/>
        <rect x="130" y="55" width="110" height="60" fill="#A47864"/>
        <polygon points="130,55 185,25 240,55" fill="#6B3A24"/>
        <rect x="148" y="75" width="20" height="26" fill="#E6DCC7"/>
        <rect x="195" y="75" width="20" height="26" fill="#E6DCC7"/>
        <rect y="115" width="320" height="45" fill="#7A8177"/>
        <rect x="20" y="125" width="85" height="26" rx="4" fill="#222"/>
        <rect x="30" y="130" width="65" height="12" fill="#7EA9BE"/>
        <circle cx="40" cy="152" r="7" fill="#111"/>
        <circle cx="95" cy="152" r="7" fill="#111"/>
      </svg>
    ),
    grey: (
      <svg viewBox="0 0 320 160" style={{ width: '100%', height: '100%', display: 'block' }} preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="160" fill="#B8BCC2"/>
        <rect width="320" height="50" fill="#C7CBD0"/>
        <circle cx="40" cy="55" r="30" fill="#8E988F"/>
        <circle cx="280" cy="50" r="36" fill="#A0A99F"/>
        <rect x="0" y="52" width="320" height="68" fill="#C1A9A0"/>
        <rect x="0" y="52" width="320" height="8" fill="#7A5A50"/>
        {[20, 85, 150, 215, 280].map(x => (
          <rect key={x} x={x} y="70" width="22" height="18" fill="#ECE4D6"/>
        ))}
        <rect x="20" y="95" width="40" height="25" fill="#3A4B5C"/>
        <rect x="85" y="95" width="40" height="25" fill="#5C4436"/>
        <rect x="150" y="95" width="40" height="25" fill="#3A4B5C"/>
        <rect x="215" y="95" width="40" height="25" fill="#5C4436"/>
        <rect x="280" y="95" width="40" height="25" fill="#3A4B5C"/>
        <rect y="120" width="320" height="40" fill="#8C8C8C"/>
        <rect x="30" y="128" width="80" height="24" rx="3" fill="#2A2A2A"/>
      </svg>
    ),
  };
  return (
    <div style={{
      width: '100%', borderRadius: 10, overflow: 'hidden',
      aspectRatio: '16 / 8',
    }}>
      {variants[variant] || variants.brick}
    </div>
  );
};

Object.assign(window, { HouseThumb, HouseHeroSvg });
