// Linkové vesnické motivy (obrysové, jen tahy) pro patičku.
// FooterSkyline = silueta vesnice: vlevo radnice, uprostřed kostel, vpravo
// hospoda, mezi nimi a kolem běžné domky, kulaté stromy a jehličnany.
// Základna leží přesně na spodní hraně viewBoxu, takže domky sedí na patičce.

const GY = 70;          // úroveň země = spodní hrana viewBoxu (výška 70)
const GAP = 14;         // mezera mezi stavbami
const HW = [56, 44, 68, 50, 60]; // šířky běžných domků (různorodost)

// --- jednotlivé stavby (x = levý okraj) ---
function fHouse(x, w, i, kp) {
  const wallH = 16 + ((i * 5) % 11);
  const apex = wallH + 11 + (i % 2) * 4;
  const mx = x + w / 2;
  const o = [<path key={`${kp}h${i}`} d={`M${x},${GY} V${GY - wallH} L${mx},${GY - apex} L${x + w},${GY - wallH} V${GY}`} />];
  if (i % 3 === 0) o.push(<path key={`${kp}hc${i}`} d={`M${x + w - 9},${GY - apex + 7} V${GY - apex - 2} H${x + w - 4} V${GY - apex + 11}`} />);
  return o;
}
function fTree(x, i, kp) {
  const r = 6 + (i % 4), cx = x + 10;
  return [
    <line key={`${kp}t${i}a`} x1={cx} y1={GY} x2={cx} y2={GY - 11} />,
    <circle key={`${kp}t${i}b`} cx={cx} cy={GY - 11 - r + 1} r={r} />,
  ];
}
function fConifer(x, i, kp) {
  const cx = x + 9;
  return [<path key={`${kp}c${i}`} d={`M${cx},${GY} V${GY - 7} M${cx - 8},${GY - 7} L${cx},${GY - 24} L${cx + 8},${GY - 7} Z`} />];
}
function fRadnice(x, kp) {
  return [
    <path key={`${kp}r1`} d={`M${x},${GY} V${GY - 36} H${x + 84} V${GY}`} />,
    <path key={`${kp}r2`} d={`M${x + 28},${GY - 36} L${x + 42},${GY - 48} L${x + 56},${GY - 36}`} />,
    <path key={`${kp}r3`} d={`M${x + 38},${GY - 48} V${GY - 60} H${x + 46} V${GY - 48}`} />,
    <path key={`${kp}r4`} d={`M${x + 46},${GY - 60} L${x + 57},${GY - 57} L${x + 46},${GY - 54}`} />,
    <circle key={`${kp}r5`} cx={x + 42} cy={GY - 52} r={3} />,
    <path key={`${kp}r6`} d={`M${x + 34},${GY} V${GY - 17} H${x + 50} V${GY}`} />,
    <path key={`${kp}r7`} d={`M${x + 10},${GY - 23} H${x + 22} V${GY - 11} H${x + 10} Z`} />,
    <path key={`${kp}r8`} d={`M${x + 62},${GY - 23} H${x + 74} V${GY - 11} H${x + 62} Z`} />,
  ];
}
function fChurch(x, kp) {
  return [
    <path key={`${kp}k1`} d={`M${x},${GY} V${GY - 46} L${x + 13},${GY - 60} L${x + 26},${GY - 46} V${GY}`} />,
    <line key={`${kp}k2`} x1={x + 13} y1={GY - 60} x2={x + 13} y2={GY - 70} />,
    <line key={`${kp}k3`} x1={x + 6} y1={GY - 66} x2={x + 20} y2={GY - 66} />,
    <path key={`${kp}k4`} d={`M${x + 26},${GY} V${GY - 32} L${x + 49},${GY - 46} L${x + 72},${GY - 32} V${GY}`} />,
    <circle key={`${kp}k5`} cx={x + 49} cy={GY - 21} r={5} />,
  ];
}
function fHospoda(x, kp) {
  return [
    <path key={`${kp}p1`} d={`M${x},${GY} V${GY - 28} L${x + 23},${GY - 42} L${x + 46},${GY - 28} V${GY}`} />,
    <path key={`${kp}p2`} d={`M${x + 16},${GY} V${GY - 15} H${x + 28} V${GY}`} />,
    <line key={`${kp}p3`} x1={x + 46} y1={GY - 26} x2={x + 61} y2={GY - 26} />,
    <path key={`${kp}p4`} d={`M${x + 55},${GY - 26} V${GY - 21} M${x + 49},${GY - 21} H${x + 61} V${GY - 11} H${x + 49} Z`} />,
  ];
}

function FooterSkyline({ color = '#1B1B1B', opacity = 0.45, strokeWidth = 2 }) {
  const items = [];
  // pořadí ve středu: radnice … domky/stromy … KOSTEL … domky/stromy … hospoda
  const center = ['radnice', 'house', 'tree', 'church', 'house', 'conifer', 'hospoda'];
  const wOf = { tree: 20, conifer: 18, radnice: 84, church: 72, hospoda: 72 };
  let hk = 0;
  const widthOf = t => (t === 'house' ? HW[hk++ % 5] : wOf[t]);
  let total = 0; hk = 0;
  center.forEach(t => { total += widthOf(t) + GAP; });
  total -= GAP;
  let x = Math.round(720 - total / 2);

  // levá výplň (běžná zástavba)
  const seqL = [5, 0, 1, 6, 2, 3, 0, 5, 1, 2, 6, 0, 3, 1, 5, 2];
  let li = 0, lx = 24;
  while (lx < x - 84) {
    const t = seqL[li % seqL.length];
    if (t === 6) { items.push(...fConifer(lx, li, 'L')); lx += 18 + GAP; }
    else if (t === 5) { items.push(...fTree(lx, li, 'L')); lx += 20 + GAP; }
    else { const w = HW[li % 5]; items.push(...fHouse(lx, w, li, 'L')); lx += w + GAP; }
    li++;
  }

  // střed (kurátorovaně)
  hk = 0; let ci = 0;
  center.forEach(t => {
    if (t === 'radnice') { items.push(...fRadnice(x, 'C')); x += 84 + GAP; }
    else if (t === 'church') { items.push(...fChurch(x, 'C')); x += 72 + GAP; }
    else if (t === 'hospoda') { items.push(...fHospoda(x, 'C')); x += 72 + GAP; }
    else if (t === 'tree') { items.push(...fTree(x, ci, 'C')); x += 20 + GAP; }
    else if (t === 'conifer') { items.push(...fConifer(x, ci, 'C')); x += 18 + GAP; }
    else { const w = HW[hk++ % 5]; items.push(...fHouse(x, w, ci + 3, 'C')); x += w + GAP; }
    ci++;
  });

  // pravá výplň
  const seqR = [1, 5, 2, 0, 6, 3, 1, 2, 5, 0, 6, 1, 3, 2, 0, 5];
  let ri = 0, rx = x;
  while (rx < 1416) {
    const t = seqR[ri % seqR.length];
    if (t === 6) { items.push(...fConifer(rx, ri, 'R')); rx += 18 + GAP; }
    else if (t === 5) { items.push(...fTree(rx, ri, 'R')); rx += 20 + GAP; }
    else { const w = HW[ri % 5]; items.push(...fHouse(rx, w, ri, 'R')); rx += w + GAP; }
    ri++;
  }

  return (
    <svg aria-hidden="true" viewBox={`0 0 1440 ${GY}`} preserveAspectRatio="xMidYMax meet"
      style={{ display: 'block', width: '100%', height: 'auto' }}>
      <g fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round" strokeLinecap="round" opacity={opacity}>
        {items}
      </g>
    </svg>
  );
}
window.FooterSkyline = FooterSkyline;