// ─── Reusable helpers ───────────────────────────────────────────────
const S = '#2C2C2A';
const G = '#B8922A';

const FloorLines = ({ x1, x2, startY, count, gap = 22 }) =>
  Array.from({ length: count }, (_, i) => (
    React.createElement('line', {
      key: i, x1, y1: startY + i * gap, x2, y2: startY + i * gap,
      stroke: S, strokeWidth: 0.55, strokeDasharray: '3,4', opacity: 0.065,
    })
  ));

const WindowGrid = ({ cols, rows, x0, y0, cw = 22, ch = 14, gap = 30, rowGap = 22 }) =>
  Array.from({ length: rows }, (_, r) =>
    Array.from({ length: cols }, (_, c) =>
      React.createElement('rect', {
        key: `${r}-${c}`,
        x: x0 + c * (cw + gap), y: y0 + r * rowGap,
        width: cw, height: ch,
        fill: 'none', stroke: S, strokeWidth: 0.45, opacity: 0.085,
      })
    )
  );

const DimLine = ({ x1, y1, x2, y2, tick = 6 }) => {
  const isV = x1 === x2;
  return React.createElement(React.Fragment, null,
    React.createElement('line', { x1, y1, x2, y2, stroke: S, strokeWidth: 0.5, opacity: 0.045 }),
    isV
      ? React.createElement(React.Fragment, null,
          React.createElement('line', { x1: x1 - tick / 2, y1, x2: x1 + tick / 2, y2: y1, stroke: S, strokeWidth: 0.5, opacity: 0.045 }),
          React.createElement('line', { x1: x2 - tick / 2, y1: y2, x2: x2 + tick / 2, y2, stroke: S, strokeWidth: 0.5, opacity: 0.045 })
        )
      : React.createElement(React.Fragment, null,
          React.createElement('line', { x1, y1: y1 - tick / 2, x2, y2: y1 + tick / 2, stroke: S, strokeWidth: 0.5, opacity: 0.045 }),
          React.createElement('line', { x1: x2, y1: y2 - tick / 2, x2, y2: y2 + tick / 2, stroke: S, strokeWidth: 0.5, opacity: 0.045 })
        )
  );
};

const GoldDot = ({ cx, cy }) =>
  React.createElement('circle', { cx, cy, r: 2.2, fill: G, opacity: 0.42 });

// ─── Hero Tower ──────────────────────────────────────────────────────
const HeroBuilding = () => (
  React.createElement('svg', { viewBox: '0 0 300 560', width: '100%', height: '100%', style: { display: 'block' } },
    // Base podium
    React.createElement('rect', { x: 48, y: 468, width: 204, height: 14, fill: 'none', stroke: S, strokeWidth: 0.65, opacity: 0.1 }),
    // Main body
    React.createElement('rect', { x: 75, y: 62, width: 150, height: 408, fill: 'none', stroke: S, strokeWidth: 0.7, opacity: 0.11 }),
    // Penthouse setback
    React.createElement('rect', { x: 95, y: 32, width: 110, height: 36, fill: 'none', stroke: S, strokeWidth: 0.6, opacity: 0.08 }),
    // Crown detail
    React.createElement('rect', { x: 110, y: 18, width: 80, height: 18, fill: 'none', stroke: S, strokeWidth: 0.55, opacity: 0.065 }),
    // Floor lines
    React.createElement(FloorLines, { x1: 75, x2: 225, startY: 84, count: 18, gap: 22 }),
    // Penthouse floor lines
    React.createElement(FloorLines, { x1: 95, x2: 205, startY: 46, count: 2, gap: 16 }),
    // Window grid — left stack
    React.createElement(WindowGrid, { cols: 2, rows: 17, x0: 87, y0: 70, cw: 20, ch: 13, gap: 4, rowGap: 22 }),
    // Window grid — right stack
    React.createElement(WindowGrid, { cols: 2, rows: 17, x0: 163, y0: 70, cw: 20, ch: 13, gap: 4, rowGap: 22 }),
    // Penthouse windows
    React.createElement(WindowGrid, { cols: 3, rows: 1, x0: 107, y0: 38, cw: 18, ch: 10, gap: 5, rowGap: 16 }),
    // Dimension lines
    React.createElement(DimLine, { x1: 60, y1: 62, x2: 60, y2: 468 }),
    React.createElement(DimLine, { x1: 75, y1: 52, x2: 225, y2: 52 }),
    // Annotation lines
    React.createElement('line', { x1: 60, y1: 172, x2: 75, y2: 172, stroke: S, strokeWidth: 0.45, opacity: 0.05 }),
    React.createElement('line', { x1: 60, y1: 304, x2: 75, y2: 304, stroke: S, strokeWidth: 0.45, opacity: 0.05 }),
    // Gold dots
    React.createElement(GoldDot, { cx: 60, cy: 172 }),
    React.createElement(GoldDot, { cx: 60, cy: 304 }),
    React.createElement(GoldDot, { cx: 225, cy: 128 }),
    // Grid background marks
    React.createElement('line', { x1: 0, y1: 280, x2: 300, y2: 280, stroke: S, strokeWidth: 0.4, strokeDasharray: '2,14', opacity: 0.035 }),
    React.createElement('line', { x1: 150, y1: 0, x2: 150, y2: 560, stroke: S, strokeWidth: 0.4, strokeDasharray: '2,14', opacity: 0.035 }),
  )
);

// ─── Coastal Tower (San Francisco Bay) ──────────────────────────────
const CoastalTower = () => (
  React.createElement('svg', { viewBox: '0 0 340 420', width: '100%', height: '100%', style: { display: 'block' } },
    // Water horizon
    React.createElement('line', { x1: 0, y1: 340, x2: 340, y2: 340, stroke: S, strokeWidth: 0.6, strokeDasharray: '8,6', opacity: 0.045 }),
    // Trees left
    React.createElement('ellipse', { cx: 48, cy: 318, rx: 22, ry: 28, fill: 'none', stroke: S, strokeWidth: 0.5, opacity: 0.045 }),
    React.createElement('line', { x1: 48, y1: 346, x2: 48, y2: 360, stroke: S, strokeWidth: 0.5, opacity: 0.045 }),
    // Trees right
    React.createElement('ellipse', { cx: 292, cy: 312, rx: 18, ry: 24, fill: 'none', stroke: S, strokeWidth: 0.5, opacity: 0.04 }),
    React.createElement('line', { x1: 292, y1: 336, x2: 292, y2: 355, stroke: S, strokeWidth: 0.5, opacity: 0.04 }),
    // Wide base
    React.createElement('rect', { x: 52, y: 318, width: 236, height: 10, fill: 'none', stroke: S, strokeWidth: 0.6, opacity: 0.09 }),
    // Main body
    React.createElement('rect', { x: 88, y: 58, width: 164, height: 262, fill: 'none', stroke: S, strokeWidth: 0.65, opacity: 0.11 }),
    // Side wings
    React.createElement('rect', { x: 68, y: 188, width: 22, height: 132, fill: 'none', stroke: S, strokeWidth: 0.5, opacity: 0.07 }),
    React.createElement('rect', { x: 250, y: 188, width: 22, height: 132, fill: 'none', stroke: S, strokeWidth: 0.5, opacity: 0.07 }),
    // Penthouse
    React.createElement('rect', { x: 110, y: 34, width: 120, height: 30, fill: 'none', stroke: S, strokeWidth: 0.6, opacity: 0.075 }),
    // Floor lines
    React.createElement(FloorLines, { x1: 88, x2: 252, startY: 76, count: 12, gap: 22 }),
    // Windows main
    React.createElement(WindowGrid, { cols: 3, rows: 11, x0: 100, y0: 64, cw: 22, ch: 14, gap: 6, rowGap: 22 }),
    React.createElement(WindowGrid, { cols: 3, rows: 11, x0: 174, y0: 64, cw: 22, ch: 14, gap: 2, rowGap: 22 }),
    // Dim lines
    React.createElement(DimLine, { x1: 68, y1: 58, x2: 68, y2: 318 }),
    // Gold dots
    React.createElement(GoldDot, { cx: 68, cy: 148 }),
    React.createElement(GoldDot, { cx: 252, cy: 240 }),
  )
);

// ─── Standard Tower (BIOMA) ──────────────────────────────────────────
const StandardTower = () => (
  React.createElement('svg', { viewBox: '0 0 260 380', width: '100%', height: '100%', style: { display: 'block' } },
    React.createElement('rect', { x: 40, y: 310, width: 180, height: 10, fill: 'none', stroke: S, strokeWidth: 0.6, opacity: 0.09 }),
    React.createElement('rect', { x: 60, y: 54, width: 140, height: 258, fill: 'none', stroke: S, strokeWidth: 0.65, opacity: 0.11 }),
    React.createElement('rect', { x: 74, y: 34, width: 112, height: 26, fill: 'none', stroke: S, strokeWidth: 0.55, opacity: 0.075 }),
    React.createElement(FloorLines, { x1: 60, x2: 200, startY: 70, count: 12, gap: 22 }),
    React.createElement(WindowGrid, { cols: 5, rows: 11, x0: 65, y0: 60, cw: 18, ch: 13, gap: 2, rowGap: 22 }),
    React.createElement(DimLine, { x1: 46, y1: 54, x2: 46, y2: 310 }),
    React.createElement(DimLine, { x1: 60, y1: 44, x2: 200, y2: 44 }),
    React.createElement(GoldDot, { cx: 46, cy: 162 }),
    React.createElement(GoldDot, { cx: 200, cy: 230 }),
  )
);

// ─── Low-Rise (MOVA) ────────────────────────────────────────────────
const LowRiseBuilding = () => (
  React.createElement('svg', { viewBox: '0 0 380 260', width: '100%', height: '100%', style: { display: 'block' } },
    React.createElement('line', { x1: 0, y1: 210, x2: 380, y2: 210, stroke: S, strokeWidth: 0.6, strokeDasharray: '10,6', opacity: 0.045 }),
    React.createElement('ellipse', { cx: 52, cy: 192, rx: 28, ry: 22, fill: 'none', stroke: S, strokeWidth: 0.5, opacity: 0.04 }),
    React.createElement('ellipse', { cx: 328, cy: 188, rx: 24, ry: 20, fill: 'none', stroke: S, strokeWidth: 0.5, opacity: 0.04 }),
    React.createElement('rect', { x: 52, y: 202, width: 276, height: 8, fill: 'none', stroke: S, strokeWidth: 0.6, opacity: 0.09 }),
    React.createElement('rect', { x: 68, y: 60, width: 244, height: 144, fill: 'none', stroke: S, strokeWidth: 0.65, opacity: 0.11 }),
    React.createElement('rect', { x: 100, y: 40, width: 180, height: 26, fill: 'none', stroke: S, strokeWidth: 0.55, opacity: 0.07 }),
    React.createElement(FloorLines, { x1: 68, x2: 312, startY: 84, count: 6, gap: 24 }),
    React.createElement(WindowGrid, { cols: 7, rows: 5, x0: 74, y0: 66, cw: 24, ch: 16, gap: 4, rowGap: 24 }),
    React.createElement(DimLine, { x1: 54, y1: 60, x2: 54, y2: 202 }),
    React.createElement(GoldDot, { cx: 54, cy: 130 }),
    React.createElement(GoldDot, { cx: 312, cy: 108 }),
  )
);

// ─── Financial Tower (Dovle) ─────────────────────────────────────────
const FinancialTower = () => (
  React.createElement('svg', { viewBox: '0 0 260 440', width: '100%', height: '100%', style: { display: 'block' } },
    React.createElement('rect', { x: 50, y: 376, width: 160, height: 10, fill: 'none', stroke: S, strokeWidth: 0.6, opacity: 0.09 }),
    React.createElement('rect', { x: 72, y: 68, width: 116, height: 310, fill: 'none', stroke: S, strokeWidth: 0.65, opacity: 0.11 }),
    // Distinctive crown
    React.createElement('rect', { x: 82, y: 44, width: 96, height: 30, fill: 'none', stroke: S, strokeWidth: 0.6, opacity: 0.08 }),
    React.createElement('rect', { x: 92, y: 24, width: 76, height: 24, fill: 'none', stroke: S, strokeWidth: 0.55, opacity: 0.065 }),
    React.createElement('rect', { x: 104, y: 10, width: 52, height: 18, fill: 'none', stroke: S, strokeWidth: 0.5, opacity: 0.055 }),
    React.createElement(FloorLines, { x1: 72, x2: 188, startY: 84, count: 14, gap: 22 }),
    React.createElement(WindowGrid, { cols: 3, rows: 13, x0: 78, y0: 72, cw: 22, ch: 14, gap: 4, rowGap: 22 }),
    React.createElement(DimLine, { x1: 58, y1: 68, x2: 58, y2: 376 }),
    React.createElement(GoldDot, { cx: 58, cy: 178 }),
    React.createElement(GoldDot, { cx: 188, cy: 300 }),
    React.createElement(GoldDot, { cx: 130, cy: 30 }),
  )
);

// ─── Panama Map ──────────────────────────────────────────────────────
// A cleaner, more faithful architectural sketch of Panama's isthmus.
const PanamaMap = () => (
  React.createElement('svg', { viewBox: '0 0 640 300', width: '100%', height: '100%', style: { display: 'block' } },
    // Drawing grid
    ...[0,1,2,3,4,5,6,7].map(i => React.createElement('line', { key: `pvg${i}`, x1: 70 + i * 70, y1: 28, x2: 70 + i * 70, y2: 268, stroke: 'rgba(244,241,236,0.10)', strokeWidth: 0.5, strokeDasharray: '2,10' })),
    ...[0,1,2,3].map(i => React.createElement('line', { key: `phg${i}`, x1: 30, y1: 62 + i * 54, x2: 610, y2: 62 + i * 54, stroke: 'rgba(244,241,236,0.10)', strokeWidth: 0.5, strokeDasharray: '2,10' })),

    // Caribbean coast — elongated western highlands, canal pinch, Darién curve
    React.createElement('path', {
      d: 'M 52 128 C 78 108, 104 94, 138 94 C 164 94, 184 104, 211 101 C 244 97, 266 80, 296 84 C 322 87, 334 107, 362 108 C 398 110, 428 84, 466 92 C 502 100, 520 126, 552 132 C 576 136, 594 128, 612 116',
      fill: 'none', stroke: 'rgba(244,241,236,0.44)', strokeWidth: 1.15, strokeDasharray: '7,4', strokeLinecap: 'round'
    }),
    // Pacific coast
    React.createElement('path', {
      d: 'M 44 162 C 78 180, 116 194, 154 188 C 190 182, 210 158, 242 160 C 276 162, 292 190, 326 188 C 358 186, 378 162, 414 166 C 450 170, 480 198, 520 192 C 552 187, 580 163, 614 154',
      fill: 'none', stroke: 'rgba(244,241,236,0.44)', strokeWidth: 1.15, strokeDasharray: '7,4', strokeLinecap: 'round'
    }),
    // Interior province/country-frame style cuts
    ...[
      ['M 132 98 C 126 124, 126 154, 151 188'],
      ['M 214 102 C 204 124, 206 146, 240 160'],
      ['M 298 86 C 286 118, 291 159, 326 188'],
      ['M 364 108 C 354 132, 366 154, 414 166'],
      ['M 468 94 C 458 124, 472 166, 520 192'],
    ].map((d, i) => React.createElement('path', { key: `pcut${i}`, d: d[0], fill: 'none', stroke: 'rgba(244,241,236,0.16)', strokeWidth: 0.7, strokeDasharray: '3,8' })),

    // Canal marker and region labels
    React.createElement('path', { d: 'M 336 104 C 328 128, 331 151, 344 184', fill: 'none', stroke: 'rgba(212,175,106,0.9)', strokeWidth: 1.6, strokeDasharray: '6,4', strokeLinecap: 'round' }),
    React.createElement('text', { x: 350, y: 145, fontFamily: 'DM Mono, monospace', fontSize: 8, fill: 'rgba(212,175,106,0.75)', letterSpacing: 1.8 }, 'CANAL'),
    React.createElement('text', { x: 74, y: 72, fontFamily: 'DM Mono, monospace', fontSize: 8, fill: 'rgba(244,241,236,0.25)', letterSpacing: 2 }, 'CARIBBEAN'),
    React.createElement('text', { x: 412, y: 232, fontFamily: 'DM Mono, monospace', fontSize: 8, fill: 'rgba(244,241,236,0.25)', letterSpacing: 2 }, 'PACIFIC'),

    // Panama City and Colón references
    React.createElement('circle', { cx: 350, cy: 175, r: 4.5, fill: '#F4F1EC', stroke: 'rgba(244,241,236,0.75)', strokeWidth: 1 }),
    React.createElement('text', { x: 361, y: 178, fontFamily: 'DM Mono, monospace', fontSize: 8, fill: 'rgba(244,241,236,0.78)', letterSpacing: 1 }, 'PANAMA CITY'),
    React.createElement('circle', { cx: 336, cy: 110, r: 3.2, fill: 'none', stroke: 'rgba(212,175,106,0.75)', strokeWidth: 1 }),
    React.createElement('text', { x: 348, y: 113, fontFamily: 'DM Mono, monospace', fontSize: 7, fill: 'rgba(212,175,106,0.65)', letterSpacing: 1 }, 'COLÓN'),

    // Darién direction and compass
    React.createElement('text', { x: 548, y: 96, fontFamily: 'DM Mono, monospace', fontSize: 7, fill: 'rgba(244,241,236,0.26)', letterSpacing: 1.6 }, 'DARIÉN'),
    React.createElement('g', null,
      React.createElement('circle', { cx: 578, cy: 230, r: 14, fill: 'none', stroke: 'rgba(244,241,236,0.18)', strokeWidth: 0.8 }),
      React.createElement('line', { x1: 578, y1: 216, x2: 578, y2: 244, stroke: 'rgba(244,241,236,0.25)', strokeWidth: 0.8 }),
      React.createElement('line', { x1: 564, y1: 230, x2: 592, y2: 230, stroke: 'rgba(244,241,236,0.25)', strokeWidth: 0.8 }),
      React.createElement('text', { x: 575, y: 212, fontFamily: 'DM Mono, monospace', fontSize: 7, fill: 'rgba(244,241,236,0.28)' }, 'N')
    )
  )
);

// ─── Staircase Sketch ────────────────────────────────────────────────
const StaircaseSketch = () => (
  React.createElement('svg', { viewBox: '0 0 200 180', width: '100%', height: '100%', style: { display: 'block' } },
    ...[0,1,2,3,4,5].map(i => React.createElement(React.Fragment, { key: i },
      React.createElement('line', { x1: 20 + i * 28, y1: 40 + i * 22, x2: 48 + i * 28, y2: 40 + i * 22, stroke: S, strokeWidth: 0.6, opacity: 0.09 }),
      React.createElement('line', { x1: 48 + i * 28, y1: 40 + i * 22, x2: 48 + i * 28, y2: 62 + i * 22, stroke: S, strokeWidth: 0.6, opacity: 0.09 }),
    )),
    React.createElement('line', { x1: 20, y1: 40, x2: 20, y2: 150, stroke: S, strokeWidth: 0.5, opacity: 0.06 }),
    React.createElement(GoldDot, { cx: 76, cy: 84 }),
  )
);

Object.assign(window, {
  HeroBuilding, CoastalTower, StandardTower,
  LowRiseBuilding, FinancialTower, PanamaMap, StaircaseSketch,
});