// Placeholder scene illustrations (flat vector, daytime). Replace with photography later.
var SC = { sky: '#e6f3f5', sky2: '#f4fafb', cloud: '#ffffff', ground: '#dfe5e8', road: '#c9d1d6', wall: '#f3efe8', wall2: '#e7e1d6', concrete: '#d9dde0', roof: '#3d4a5c', wood: '#8a6a4f', wood2: '#a8835f', navy: '#103265', teal: '#31c2b9', tealL: '#ace5e5', amber: '#ffad3f', grey: '#65666b', psc: '#1d3f73', pscL: '#2f5f99', green: '#7fb88a', green2: '#5f9c6f', glass: '#cfe6ee' };

function PscPanel({ x, y, w, h, cols = 3, rows = 1 }) {
  const cw = w / cols, rh = h / rows, lines = [];
  for (let i = 1; i < cols; i++) lines.push(<line key={'c' + i} x1={x + cw * i} y1={y} x2={x + cw * i} y2={y + h} stroke={SC.pscL} strokeWidth="0.8" />);
  for (let j = 1; j < rows; j++) lines.push(<line key={'r' + j} x1={x} y1={y + rh * j} x2={x + w} y2={y + rh * j} stroke={SC.pscL} strokeWidth="0.8" />);
  return <g><rect x={x} y={y} width={w} height={h} fill={SC.psc} />{lines}<rect x={x} y={y} width={w} height={h * 0.18} fill="#ffffff" opacity="0.08" /></g>;
}

function Sky({ id }) {
  return (
    <g>
      <defs><linearGradient id={id} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={SC.sky} /><stop offset="1" stopColor={SC.sky2} /></linearGradient></defs>
      <rect width="400" height="420" fill={`url(#${id})`} />
      <circle cx="340" cy="58" r="22" fill={SC.amber} opacity="0.9" />
      <g fill={SC.cloud}><ellipse cx="80" cy="60" rx="34" ry="10" /><ellipse cx="102" cy="52" rx="20" ry="10" /><ellipse cx="250" cy="90" rx="26" ry="7" /></g>
    </g>
  );
}

// 1 — Japanese mansion, balcony railings fitted with PSC panels
function SceneMansion() {
  const floors = 7, fh = 36, top = 104, bx = 70, bw = 260;
  const rows = [];
  for (let f = 0; f < floors; f++) {
    const y = top + f * fh;
    rows.push(
      <g key={f}>
        <rect x={bx} y={y} width={bw} height={fh} fill={SC.wall} />
        {[0, 1, 2, 3].map((u) => <rect key={u} x={bx + 10 + u * 62} y={y + 4} width={50} height={20} fill={SC.glass} />)}
        <rect x={bx - 6} y={y + 22} width={bw + 12} height={2.5} fill={SC.concrete} />
        {[0, 1, 2, 3].map((u) => <PscPanel key={u} x={bx - 4 + u * 66} y={y + 24.5} w={62} h={11} cols={4} />)}
      </g>
    );
  }
  return (
    <svg viewBox="0 0 400 420" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
      <Sky id="skyA" />
      <rect x="0" y="230" width="60" height="140" fill={SC.wall2} /><rect x="345" y="200" width="55" height="170" fill={SC.wall2} />
      <rect x={bx - 8} y={top - 10} width={bw + 16} height={10} fill={SC.roof} />
      {rows}
      <rect x="0" y="356" width="400" height="64" fill={SC.ground} />
      <rect x="0" y="384" width="400" height="36" fill={SC.road} />
      <g fill={SC.green}><circle cx="40" cy="352" r="16" /><circle cx="362" cy="350" r="18" /></g>
      <rect x="38" y="352" width="4" height="10" fill={SC.wood} /><rect x="360" y="352" width="4" height="10" fill={SC.wood} />
    </svg>
  );
}

// 2 — Shotengai / machiya renovation with PSC on the façade lattice and awning
function SceneMachiya() {
  const shops = [0, 1, 2];
  return (
    <svg viewBox="0 0 400 420" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
      <Sky id="skyB" />
      {shops.map((i) => {
        const x = 14 + i * 126, w = 120;
        return (
          <g key={i}>
            <rect x={x} y={150} width={w} height={210} fill={i === 1 ? SC.wall2 : SC.wall} />
            <path d={`M${x - 6} 150 L${x + w / 2} 118 L${x + w + 6} 150 Z`} fill={SC.roof} />
            <PscPanel x={x + 10} y={164} w={w - 20} h={62} cols={4} rows={2} />
            <rect x={x + 10} y={226} width={w - 20} height={3} fill={SC.wood} />
            <path d={`M${x - 4} 248 L${x + w + 4} 248 L${x + w - 4} 262 L${x + 4} 262 Z`} fill={SC.roof} />
            <rect x={x + 8} y={262} width={w - 16} height={98} fill={SC.wood2} />
            {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((k) => <rect key={k} x={x + 12 + k * ((w - 24) / 9)} y={266} width={3} height={90} fill={SC.wood} />)}
            <rect x={x + w / 2 - 14} y={250} width={28} height={8} fill={[SC.amber, SC.teal, SC.tealL][i]} />
          </g>
        );
      })}
      <rect x="0" y="360" width="400" height="60" fill={SC.ground} />
      <rect x="0" y="392" width="400" height="28" fill={SC.road} />
      {[60, 200, 340].map((cx) => <g key={cx}><rect x={cx - 1} y={330} width={2} height={30} fill={SC.grey} /><circle cx={cx} cy={328} r={5} fill={SC.amber} /></g>)}
    </svg>
  );
}

// 3 — School / public building with PSC curtain-wall bands and a sports ground
function SceneSchool() {
  const floors = 4;
  return (
    <svg viewBox="0 0 400 420" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
      <Sky id="skyC" />
      <rect x="168" y="96" width="64" height="40" fill={SC.wall} />
      <circle cx="200" cy="114" r="11" fill="#ffffff" stroke={SC.grey} strokeWidth="2" />
      <line x1="200" y1="114" x2="200" y2="107" stroke={SC.navy} strokeWidth="2" /><line x1="200" y1="114" x2="205" y2="116" stroke={SC.navy} strokeWidth="2" />
      <rect x="24" y="132" width="352" height="8" fill={SC.roof} />
      {Array.from({ length: floors }).map((_, f) => {
        const y = 140 + f * 46;
        return (
          <g key={f}>
            <rect x="30" y={y} width="340" height="46" fill={SC.wall} />
            {Array.from({ length: 8 }).map((__, k) => <rect key={k} x={38 + k * 41.5} y={y + 6} width={34} height={20} fill={SC.glass} />)}
            <PscPanel x={30} y={y + 30} w={340} h={12} cols={16} />
          </g>
        );
      })}
      <rect x="0" y="324" width="400" height="96" fill="#e9dcc6" />
      <ellipse cx="200" cy="382" rx="150" ry="26" fill="none" stroke="#ffffff" strokeWidth="3" />
      <g fill={SC.green2}><circle cx="16" cy="318" r="18" /><circle cx="386" cy="316" r="20" /></g>
      <rect x="14" y="318" width="4" height="10" fill={SC.wood} /><rect x="384" y="318" width="4" height="10" fill={SC.wood} />
    </svg>
  );
}

var SCENES = [
  [SceneMansion, '集合住宅・陽台欄杆', 'マンション', '../../assets/scenes/scene-mansion-graded.jpg'],
  [SceneMachiya, '商店街・町屋改建', '商店街', '../../assets/scenes/scene-machiya-graded.jpg'],
  [SceneSchool, '學校・公共建築', '公共施設', '../../assets/scenes/scene-school-warm.jpg'],
];

function SceneRow() {
  return (
    <div className="gw-scenes" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,minmax(0,1fr))', gap: 'var(--space-5)' }}>
      {SCENES.map(([S, zh, ja, img]) => (
        <figure key={zh} style={{ margin: 0 }}>
          <div className="gw-scene-img" style={{ height: 360, borderRadius: 'var(--radius-md)', overflow: 'hidden', border: '1px solid var(--border-subtle)', position: 'relative' }}>{img ? <img src={img} alt={zh} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> : <S />}{img && <span style={{ position: 'absolute', right: 8, bottom: 8, fontFamily: 'var(--font-cjk)', fontSize: 11, color: '#fff', background: 'rgba(16,21,31,.55)', padding: '2px 6px', borderRadius: 4 }}>示意圖</span>}</div>
          <figcaption style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 'var(--space-3)' }}>
            <span style={{ fontFamily: 'var(--font-cjk)', fontWeight: 700, fontSize: 'var(--size-body)' }}>{zh}</span>
            <span style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-caption)', color: 'var(--text-muted)' }}>{ja}</span>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}
Object.assign(window, { SceneRow, SceneMansion, SceneMachiya, SceneSchool });