/* ============ Icons (inline SVG line set) ============ */
const I = {
  logo:(<svg viewBox="0 0 32 32" fill="none"><path d="M4 21l6-9 4 5 3-4 5 8" stroke="#fff" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/><path d="M3 25c2 0 2.5-1.4 4.5-1.4S10 25 12 25s2.5-1.4 4.5-1.4S19 25 21 25s2.5-1.4 4.5-1.4S28 25 29 25" stroke="#fff" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  home:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 11.5 12 4l9 7.5" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/><path d="M5.5 10v9.5h13V10" strokeWidth="1.7" strokeLinejoin="round"/><path d="M10 19.5V14h4v5.5" strokeWidth="1.7"/></svg>),
  yen:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 5l5 7 5-7" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/><path d="M12 12v7M8 14h8M8 17h8" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  baby:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="8" strokeWidth="1.7"/><circle cx="9.3" cy="11" r=".6" fill="currentColor" stroke="none"/><circle cx="14.7" cy="11" r=".6" fill="currentColor" stroke="none"/><path d="M9.5 14.5c.8.8 4.2.8 5 0" strokeWidth="1.5" strokeLinecap="round"/><path d="M12 4v-.5" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  child:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="9" r="4.4" strokeWidth="1.7"/><path d="M5 20c.6-3.6 3.4-5.4 7-5.4S18.4 16.4 19 20" strokeWidth="1.7" strokeLinecap="round"/><circle cx="10.3" cy="8.6" r=".55" fill="currentColor" stroke="none"/><circle cx="13.7" cy="8.6" r=".55" fill="currentColor" stroke="none"/></svg>),
  umbrella:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 4v1M3.5 11.5C4.2 7.4 7.8 5 12 5s7.8 2.4 8.5 6.5z" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/><path d="M12 11.5v6.5a2 2 0 0 1-4 0" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  rain:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 15a4 4 0 0 1-.6-7.95A5 5 0 0 1 16 7.5a3.5 3.5 0 0 1 .5 7" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/><path d="M8 18l-1 2M12 18l-1 2M16 18l-1 2" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  tag:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 13V5.5A1.5 1.5 0 0 1 5.5 4H13l7 7-8 8z" strokeWidth="1.7" strokeLinejoin="round"/><circle cx="9" cy="9" r="1.4" strokeWidth="1.6"/></svg>),
  pin:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 21c4.5-4.6 6.5-7.6 6.5-10.5A6.5 6.5 0 0 0 5.5 10.5C5.5 13.4 7.5 16.4 12 21z" strokeWidth="1.7" strokeLinejoin="round"/><circle cx="12" cy="10.5" r="2.3" strokeWidth="1.7"/></svg>),
  calendar:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="4" y="5.5" width="16" height="15" rx="2.5" strokeWidth="1.7"/><path d="M4 10h16M8 3.5v4M16 3.5v4" strokeWidth="1.7" strokeLinecap="round"/><circle cx="9" cy="14" r=".8" fill="currentColor" stroke="none"/><circle cx="13" cy="14" r=".8" fill="currentColor" stroke="none"/></svg>),
  bag:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 8h12l1 12H5z" strokeWidth="1.7" strokeLinejoin="round"/><path d="M9 9V6.5a3 3 0 0 1 6 0V9" strokeWidth="1.7"/></svg>),
  search:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="11" cy="11" r="6.5" strokeWidth="1.9"/><path d="M16 16l4.5 4.5" strokeWidth="1.9" strokeLinecap="round"/></svg>),
  menu:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 7h16M4 12h16M4 17h16" strokeWidth="1.9" strokeLinecap="round"/></svg>),
  close:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6l12 12M18 6L6 18" strokeWidth="1.9" strokeLinecap="round"/></svg>),
  sun:(<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="5" fill="#f5a623"/><g stroke="#f5a623" strokeWidth="1.8" strokeLinecap="round"><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.2 5.2l1.8 1.8M17 17l1.8 1.8M18.8 5.2 17 7M7 17l-1.8 1.8"/></g></svg>),
  raincloud:(<svg viewBox="0 0 24 24" fill="none"><path d="M7 15a4 4 0 0 1-.6-7.95A5 5 0 0 1 16 7.5a3.5 3.5 0 0 1 .5 7H7z" fill="#9cc4e8" stroke="#5b8fc4" strokeWidth="1.4" strokeLinejoin="round"/><g stroke="#3d82c4" strokeWidth="1.8" strokeLinecap="round"><path d="M8 17l-1 2.4M12 17l-1 2.4M16 17l-1 2.4"/></g></svg>),
  cloudsun:(<svg viewBox="0 0 24 24" fill="none"><circle cx="9" cy="8.5" r="3.2" fill="#f5a623"/><path d="M10 17a3.5 3.5 0 0 1-.5-6.96A4.4 4.4 0 0 1 18 11a3 3 0 0 1 .4 6H10z" fill="#cfe1f2" stroke="#7aa7d2" strokeWidth="1.3" strokeLinejoin="round"/></svg>),
  shirt:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 4 6 6 3.5 8.5 6 11l1.5-1.2V20h9V9.8L18 11l2.5-2.5L18 6l-3-2-1.5 2.2a2.2 2.2 0 0 1-3 0z" strokeWidth="1.6" strokeLinejoin="round"/></svg>),
  heart:(<svg viewBox="0 0 24 24"><path d="M12 20.3 4.2 12.7a4.7 4.7 0 0 1 6.6-6.7l1.2 1.2 1.2-1.2a4.7 4.7 0 0 1 6.6 6.7z" fill="currentColor"/></svg>),
  heartline:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 20.3 4.2 12.7a4.7 4.7 0 0 1 6.6-6.7l1.2 1.2 1.2-1.2a4.7 4.7 0 0 1 6.6 6.7z" strokeWidth="1.8" strokeLinejoin="round"/></svg>),
  star:(<svg viewBox="0 0 24 24"><path d="M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 17l-5.3 2.6 1-5.8L3.5 9.7l5.9-.9z" fill="currentColor"/></svg>),
  chevR:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 5l7 7-7 7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  chevL:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M15 5l-7 7 7 7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  arrowUp:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 19V6M6 11l6-6 6 6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  bell:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2.5H4.5z" strokeWidth="1.7" strokeLinejoin="round"/><path d="M10 19.5a2 2 0 0 0 4 0" strokeWidth="1.7"/></svg>),
  line:(<svg viewBox="0 0 24 24"><path d="M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.3 7.9.3.06.7.2.8.5.07.25.05.6.02.9l-.13.8c-.04.25-.2 1 .85.55s5.7-3.4 7.8-5.8C20.9 14.4 22 12.8 22 11c0-4.4-4.5-8-10-8z" fill="currentColor"/></svg>),
  insta:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="4" y="4" width="16" height="16" rx="5" strokeWidth="1.8"/><circle cx="12" cy="12" r="3.6" strokeWidth="1.8"/><circle cx="16.6" cy="7.4" r="1.1" fill="currentColor" stroke="none"/></svg>),
  clock:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="8.5" strokeWidth="1.7"/><path d="M12 7.5V12l3 2" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  ticket:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H6a2 2 0 0 1-2-2 2 2 0 0 0 0-4z" strokeWidth="1.6"/><path d="M12 6.5v11" strokeWidth="1.5" strokeDasharray="2 2.4"/></svg>),
  car:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 16v-2.5l1.6-4A2 2 0 0 1 7.5 8h9a2 2 0 0 1 1.9 1.5l1.6 4V16" strokeWidth="1.6" strokeLinejoin="round"/><path d="M4 16h16" strokeWidth="1.6"/><circle cx="7.5" cy="16.5" r="1.6" strokeWidth="1.6"/><circle cx="16.5" cy="16.5" r="1.6" strokeWidth="1.6"/></svg>),
  stroller:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 5l2 1 3 6h8a7 7 0 0 0-11-7z" strokeWidth="1.6" strokeLinejoin="round"/><path d="M9 12v5M17 12v5" strokeWidth="1.6"/><circle cx="9" cy="19" r="1.6" strokeWidth="1.6"/><circle cx="17" cy="19" r="1.6" strokeWidth="1.6"/></svg>),
  phone:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 4.5 8 4l1.6 3.4-1.7 1.3a11 11 0 0 0 4.4 4.4l1.3-1.7L17 13l-.5 2c-.2 1-1.2 1.6-2.2 1.4A12.5 12.5 0 0 1 4.6 6.7C4.4 5.7 5 4.7 6 4.5z" strokeWidth="1.6" strokeLinejoin="round"/></svg>),
  globe:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="8.5" strokeWidth="1.6"/><path d="M3.5 12h17M12 3.5c2.4 2.3 2.4 14.7 0 17M12 3.5c-2.4 2.3-2.4 14.7 0 17" strokeWidth="1.4"/></svg>),
  tree:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 3 6 11h3l-3 5h12l-3-5h3z" strokeWidth="1.6" strokeLinejoin="round"/><path d="M12 16v5" strokeWidth="1.6"/></svg>),
  train:(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="6" y="4" width="12" height="13" rx="3" strokeWidth="1.6"/><path d="M6 11h12" strokeWidth="1.5"/><circle cx="9" cy="14" r=".7" fill="currentColor" stroke="none"/><circle cx="15" cy="14" r=".7" fill="currentColor" stroke="none"/><path d="M8 17l-2 3M16 17l2 3" strokeWidth="1.6" strokeLinecap="round"/></svg>),
};

function Icon({n,...p}){return <span className="ic" {...p}>{I[n]||null}</span>}

/* ============ Placeholder image system ============ */
/* Curated duotone gradients + soft glyph, evoking the photo subject. */
const PH = {
  hero:{g:"linear-gradient(120deg,#cfe6f7 0%,#a9d0ee 42%,#dff0e2 100%)",glyph:"tree"},
  tulip:{g:"linear-gradient(125deg,#f4c6d6 0%,#e89bb6 38%,#9ed3a0 100%)",glyph:"tree"},
  park:{g:"linear-gradient(125deg,#bfe0b8 0%,#8cc88a 55%,#cfe8c4 100%)",glyph:"tree"},
  playground:{g:"linear-gradient(125deg,#f6d59a 0%,#eab36a 50%,#f3c99c 100%)",glyph:"child"},
  indoor:{g:"linear-gradient(125deg,#cdd9f0 0%,#a7b9e0 55%,#e0c9e8 100%)",glyph:"child"},
  train:{g:"linear-gradient(125deg,#e0b3a0 0%,#cf8a72 45%,#a9c7e0 100%)",glyph:"train"},
  sports:{g:"linear-gradient(125deg,#bfe0c9 0%,#7fc59c 55%,#cfe6da 100%)",glyph:"child"},
  museum:{g:"linear-gradient(125deg,#d7c9ec 0%,#b29bd8 55%,#cdd9f0 100%)",glyph:"baby"},
  food:{g:"linear-gradient(125deg,#f3d2b0 0%,#e3a878 50%,#efe0c4 100%)",glyph:"yen"},
  beach:{g:"linear-gradient(125deg,#bfe6e8 0%,#86c8d6 45%,#f0e2c2 100%)",glyph:"globe"},
  rainkid:{g:"linear-gradient(125deg,#cfe2f2 0%,#9bbfe0 55%,#bcd4ea 100%)",glyph:"umbrella"},
  picnic:{g:"linear-gradient(125deg,#cfe6b8 0%,#9ccb86 55%,#dceac6 100%)",glyph:"tree"},
  phone:{g:"linear-gradient(125deg,#dcebf8,#c4ddf2)",glyph:"phone"},
};
/* ============ 画像コンセプト：富山の風景を北欧ミニマルの図版で ============ */
/* ブランド配色で統一したフラットなSVGシーン。立山連峰＋富山湾を共通の土台に、
   カテゴリごとに前景を変える。写真ではないので「実在の場所」と誤認されない。
   将来、実写真ができたらこの枠に差し込めばよい。 */
function vary(seed){const s=String(seed||"x");let h=0;for(let i=0;i<s.length;i++)h=(h*31+s.charCodeAt(i))>>>0;return h;}

// 共通パーツ
const Sun=({x=320,y=56,c="#f6cf8e"})=>(<circle cx={x} cy={y} r="24" fill={c}/>);
const Tateyama=({y=160})=>(<g>
  <polygon points={`-10,${y} 78,${y-74} 150,${y}`} fill="#9cc1e3"/>
  <polygon points={`220,${y} 300,${y-62} 410,${y}`} fill="#7aa7d2"/>
  <polygon points={`88,${y} 200,${y-102} 304,${y}`} fill="#5f8fc4"/>
  <polygon points={`176,${y-70} 200,${y-102} 224,${y-70}`} fill="#ffffff"/>
</g>);
const Bay=({y=170})=>(<g>
  <rect x="0" y={y} width="400" height={260-y} fill="#8cc6d6"/>
  <path d={`M0 ${y+22} q40 -9 80 0 t80 0 t80 0 t80 0 t80 0`} stroke="#b3e0ea" strokeWidth="4" fill="none"/>
  <path d={`M0 ${y+44} q40 -9 80 0 t80 0 t80 0 t80 0 t80 0`} stroke="#b3e0ea" strokeWidth="4" fill="none" opacity="0.7"/>
</g>);
const Hills=({y=186})=>(<g>
  <path d={`M0 ${y} q100 -40 200 0 t200 0 V260 H0Z`} fill="#9ed39a"/>
  <path d={`M0 ${y+22} q120 -28 240 6 t160 -2 V260 H0Z`} fill="#7cbf86"/>
</g>);
const Tree=({x=66,y=196})=>(<g>
  <rect x={x-4} y={y} width="8" height="32" rx="3" fill="#9a6b4f"/>
  <circle cx={x} cy={y-8} r="22" fill="#6fb277"/>
  <circle cx={x-16} cy={y+3} r="14" fill="#7cbf86"/>
  <circle cx={x+16} cy={y+3} r="14" fill="#7cbf86"/>
</g>);

// カテゴリ別シーン（v はseedからの決定的な数値で軽く変化をつける）
function buildScene(kind,v){
  const sx=290+(v%70); // 太陽の位置を少しずらす
  switch(kind){
    case "hero": return (<g><Sun x={sx} y={54}/><Tateyama y={172}/><Bay y={172}/></g>);
    case "beach": return (<g><Sun x={sx} y={54}/><Bay y={120}/>
      <path d="M0 222 q100 -16 200 0 t200 0 V260 H0Z" fill="#efe0c4"/></g>);
    case "train": return (<g><Tateyama y={150}/><Bay y={158}/>
      <line x1="0" y1="214" x2="400" y2="214" stroke="#8a7a6a" strokeWidth="4"/>
      <g><rect x="116" y="166" width="176" height="46" rx="14" fill="#2c6aa6"/>
        <rect x="128" y="176" width="34" height="20" rx="4" fill="#cfe6f7"/>
        <rect x="170" y="176" width="34" height="20" rx="4" fill="#cfe6f7"/>
        <rect x="212" y="176" width="34" height="20" rx="4" fill="#cfe6f7"/>
        <rect x="256" y="176" width="26" height="20" rx="4" fill="#cfe6f7"/>
        <circle cx="150" cy="214" r="8" fill="#26405a"/><circle cx="256" cy="214" r="8" fill="#26405a"/></g></g>);
    case "tulip": return (<g><Sun x={sx} y={52}/><Tateyama y={150}/>
      <rect x="0" y="196" width="400" height="64" fill="#9ed39a"/>
      {[44,96,148,200,252,304,356].map((x,i)=>(<g key={i}>
        <line x1={x} y1="200" x2={x} y2="236" stroke="#5fa873" strokeWidth="4"/>
        <circle cx={x} cy="194" r="9" fill={["#e8718f","#f3a05a","#efc14e","#e89bb6"][(v+i)%4]}/></g>))}</g>);
    case "park": return (<g><Sun x={sx} y={54}/><Tateyama y={150}/><Hills y={184}/><Tree x={70} y={196}/></g>);
    case "picnic": return (<g><Sun x={sx} y={54}/><Hills y={170}/><Tree x={326} y={186}/>
      <g><rect x="110" y="196" width="150" height="56" rx="6" fill="#e98b8b"/>
        <line x1="160" y1="196" x2="160" y2="252" stroke="#fff" strokeWidth="3" opacity="0.6"/>
        <line x1="210" y1="196" x2="210" y2="252" stroke="#fff" strokeWidth="3" opacity="0.6"/>
        <line x1="110" y1="224" x2="260" y2="224" stroke="#fff" strokeWidth="3" opacity="0.6"/>
        <path d="M150 196 a26 16 0 0 1 52 0Z" fill="#caa06a"/></g></g>);
    case "playground": return (<g><Sun x={sx} y={54}/><Hills y={180}/>
      <line x1="118" y1="150" x2="118" y2="216" stroke="#c98a72" strokeWidth="6"/>
      <path d="M118 152 Q182 152 176 214" fill="none" stroke="#f3a05a" strokeWidth="11" strokeLinecap="round"/>
      <circle cx="118" cy="146" r="11" fill="#3d82c4"/></g>);
    case "sports": return (<g><Hills y={150}/>
      <rect x="40" y="120" width="60" height="44" rx="3" fill="none" stroke="#fff" strokeWidth="4" opacity="0.85"/>
      <circle cx="300" cy="206" r="20" fill="#ffffff" stroke="#2c6aa6" strokeWidth="3"/>
      <polygon points="300,194 309,201 305,212 295,212 291,201" fill="#2c6aa6"/></g>);
    case "indoor": return (<g><rect x="0" y="0" width="400" height="202" fill="#e9eef8"/>
      <rect x="0" y="202" width="400" height="58" fill="#e4d9c4"/>
      <rect x="248" y="40" width="112" height="92" rx="6" fill="#cfe6f7" stroke="#b7cfe6" strokeWidth="4"/>
      <line x1="304" y1="40" x2="304" y2="132" stroke="#b7cfe6" strokeWidth="4"/>
      <line x1="248" y1="86" x2="360" y2="86" stroke="#b7cfe6" strokeWidth="4"/>
      <rect x="60" y="158" width="44" height="44" rx="6" fill="#3d82c4"/>
      <rect x="108" y="170" width="32" height="32" rx="6" fill="#f3cf8a"/>
      <polygon points="166,202 146,202 156,166" fill="#e89bb6"/>
      <circle cx="208" cy="186" r="16" fill="#7cbf86"/></g>);
    case "museum": return (<g><rect x="40" y="208" width="320" height="52" fill="#dfe7ef"/>
      <rect x="74" y="150" width="252" height="62" fill="#faf7f0"/>
      <polygon points="60,150 200,96 340,150" fill="#274b6e"/>
      {[92,142,192,242,292].map((x,i)=>(<rect key={i} x={x} y="158" width="18" height="50" fill="#eef3f8" stroke="#cfd9e6" strokeWidth="2"/>))}</g>);
    case "rainkid": return (<g><ellipse cx="120" cy="62" rx="50" ry="26" fill="#c3d2de"/>
      <ellipse cx="170" cy="56" rx="38" ry="22" fill="#cfdbe6"/>
      {[90,140,190,240,290].map((x,i)=>(<line key={i} x1={x} y1="96" x2={x-8} y2="124" stroke="#7aa7d2" strokeWidth="4" strokeLinecap="round"/>))}
      <path d="M150 168 a56 50 0 0 1 112 0Z" fill="#2c6aa6"/>
      <line x1="206" y1="168" x2="206" y2="222" stroke="#274b6e" strokeWidth="5"/>
      <ellipse cx="206" cy="238" rx="46" ry="9" fill="#9bbfe0"/></g>);
    case "food": return (<g><rect x="0" y="182" width="400" height="78" fill="#d8a877"/>
      <ellipse cx="210" cy="180" rx="116" ry="32" fill="#f3ead9"/>
      <ellipse cx="210" cy="174" rx="96" ry="24" fill="#ffffff"/>
      <ellipse cx="176" cy="172" rx="26" ry="12" fill="#e9a18f"/>
      <ellipse cx="176" cy="170" rx="26" ry="9" fill="#f0b6a6"/>
      <ellipse cx="240" cy="176" rx="24" ry="11" fill="#e6c14e"/>
      <path d="M86 150 a34 22 0 0 0 68 0Z" fill="#2c6aa6"/>
      <line x1="250" y1="150" x2="296" y2="138" stroke="#9a6b4f" strokeWidth="3" strokeLinecap="round"/>
      <line x1="252" y1="156" x2="298" y2="144" stroke="#9a6b4f" strokeWidth="3" strokeLinecap="round"/></g>);
    default: return (<g><Sun x={sx} y={54}/><Tateyama y={160}/><Hills y={188}/></g>);
  }
}
const SCENE_BG={hero:"#dcebfa",beach:"#dff0f3",train:"#dfeaf5",tulip:"#eef4ec",park:"#e6f1ea",
  picnic:"#eaf3df",playground:"#fdf2e0",sports:"#e6f1ea",indoor:"#e9eef8",museum:"#eaf0f7",
  rainkid:"#dde5ec",food:"#f3ece0",phone:"#e6f0fa"};

function Placeholder({kind="park",seed,className=""}){
  const k=PH[kind]?kind:"park";
  const v=vary(seed||kind);
  return (
    <div className={"ph-img "+className} style={{background:SCENE_BG[k]||"#dcebfa"}}>
      <svg viewBox="0 0 400 260" preserveAspectRatio="xMidYMid slice"
        style={{position:"absolute",inset:0,width:"100%",height:"100%",zIndex:1,display:"block"}}
        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        {buildScene(k,v)}
      </svg>
    </div>
  );
}

/* Toyama prefecture simplified silhouette */
const ToyamaMap = ()=>(
  <svg className="area-map" viewBox="0 0 200 130" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 64 26 42l16-9 14 4 12-12 18-3 16 8 22-4 18 10 16-2 12 10-4 16-10 8-2 14-16 10-20-2-14 8-18-4-12 6-16-6-8-14-12-4z"/>
  </svg>
);

window.Icon=Icon;window.Placeholder=Placeholder;window.ToyamaMap=ToyamaMap;
