// ─── Higher-fidelity Americas + Europe ecosystem map ─────────────────
// Minimal architectural linework with recognizable continent/country frames.

const MAP_LOCATIONS = {
  canada:    { x: 190, y: 88,  label: 'Canada' },
  usa:       { x: 178, y: 148, label: 'United States' },
  mexico:    { x: 150, y: 214, label: 'Mexico' },
  guatemala: { x: 184, y: 252, label: 'Guatemala' },
  costarica: { x: 210, y: 278, label: 'Costa Rica' },
  panama:    { x: 232, y: 286, label: 'Panama' },
  colombia:  { x: 272, y: 318, label: 'Colombia' },
  venezuela: { x: 322, y: 298, label: 'Venezuela' },
  ecuador:   { x: 252, y: 348, label: 'Ecuador' },
  peru:      { x: 270, y: 392, label: 'Peru' },
  brazil:    { x: 366, y: 384, label: 'Brazil' },
  bolivia:   { x: 322, y: 418, label: 'Bolivia' },
  chile:     { x: 286, y: 476, label: 'Chile' },
  argentina: { x: 326, y: 486, label: 'Argentina' },
  uruguay:   { x: 370, y: 474, label: 'Uruguay' },
  dominican: { x: 330, y: 248, label: 'Dominican Rep.' },
  spain:     { x: 636, y: 196, label: 'Spain' },
  germany:   { x: 690, y: 154, label: 'Germany' },
};

const ALL_AMERICAS = ['canada','usa','mexico','guatemala','costarica','panama','colombia','venezuela','ecuador','peru','brazil','bolivia','chile','argentina','uruguay','dominican'];

const MAP_MODES = {
  clients: {
    btn: 'Where our clients come from',
    caption: 'Investors from every country in the Americas — plus Spain and Germany.',
    markers: [
      ...ALL_AMERICAS.map(id => ({ id, cat: 'client' })),
      { id: 'spain', cat: 'client', label: true },
      { id: 'germany', cat: 'client', label: true },
    ],
    legend: [['client', 'Client origin']],
  },
  operations: {
    btn: 'Where we operate',
    caption: 'Offices in Panama, Colombia and Germany. Partner markets across Latin America — and always open to grow our alliances.',
    markers: [
      { id: 'panama', cat: 'office', label: true },
      { id: 'colombia', cat: 'office', label: true },
      { id: 'germany', cat: 'office', label: true },
      { id: 'dominican', cat: 'partner', label: true },
      { id: 'peru', cat: 'partner', label: true },
      { id: 'venezuela', cat: 'partner', label: true },
      { id: 'mexico', cat: 'partner', label: true },
      { id: 'chile', cat: 'partner', label: true },
    ],
    legend: [['office', 'Office'], ['partner', 'Partner market']],
  },
  product: {
    btn: 'Where we have product',
    caption: 'Active inventory in Panama, the Dominican Republic and Colombia.',
    markers: [
      { id: 'panama', cat: 'product', label: true },
      { id: 'dominican', cat: 'product', label: true },
      { id: 'colombia', cat: 'product', label: true },
    ],
    legend: [['product', 'Active inventory']],
  },
};

const GOLD = '#D4AF6A';
const PAPER = '#F4F1EC';

const MapMarker = ({ loc, cat, showLabel, i }) => {
  const anim = { animation: `markerPop 420ms ease ${i * 45}ms both` };
  const labelEl = showLabel && React.createElement('text', {
    x: loc.x + 10, y: loc.y + 3.5,
    fontFamily: "'DM Mono', monospace", fontSize: 9,
    letterSpacing: 0.5, fill: 'rgba(244,241,236,0.82)',
    style: anim,
  }, loc.label);

  if (cat === 'client') {
    return React.createElement('g', null,
      React.createElement('circle', { cx: loc.x, cy: loc.y, r: 3, fill: 'rgba(244,241,236,0.45)', style: anim }),
      labelEl
    );
  }
  if (cat === 'office') {
    return React.createElement('g', null,
      React.createElement('circle', { cx: loc.x, cy: loc.y, r: 9, fill: 'none', stroke: 'rgba(212,175,106,0.38)', strokeWidth: 1, style: anim }),
      React.createElement('circle', { cx: loc.x, cy: loc.y, r: 4.5, fill: GOLD, style: anim }),
      labelEl
    );
  }
  if (cat === 'partner') {
    return React.createElement('g', null,
      React.createElement('circle', { cx: loc.x, cy: loc.y, r: 4.5, fill: 'none', stroke: 'rgba(244,241,236,0.75)', strokeWidth: 1, style: anim }),
      labelEl
    );
  }
  return React.createElement('g', null,
    React.createElement('rect', {
      x: loc.x - 4.5, y: loc.y - 4.5, width: 9, height: 9, fill: GOLD,
      transform: `rotate(45 ${loc.x} ${loc.y})`, style: anim,
    }),
    labelEl
  );
};

const LegendDot = ({ cat }) => {
  const common = { display: 'inline-block', width: 12, height: 12, marginRight: 8, flexShrink: 0 };
  if (cat === 'office')   return React.createElement('span', { style: { ...common, borderRadius: '50%', background: GOLD } });
  if (cat === 'partner')  return React.createElement('span', { style: { ...common, borderRadius: '50%', border: `1px solid ${PAPER}` } });
  if (cat === 'product')  return React.createElement('span', { style: { ...common, background: GOLD, transform: 'rotate(45deg)' } });
  return React.createElement('span', { style: { ...common, width: 8, height: 8, borderRadius: '50%', background: PAPER, opacity: 0.5, marginTop: 2 } });
};

const CoastPath = ({ d, wash }) => React.createElement('path', {
  d, fill: wash ? 'rgba(244,241,236,0.035)' : 'none',
  stroke: 'rgba(244,241,236,0.26)', strokeWidth: 0.75, strokeDasharray: '5,4', strokeLinejoin: 'round', strokeLinecap: 'round'
});

const BoundaryPath = ({ d }) => React.createElement('path', {
  d, fill: 'none', stroke: 'rgba(244,241,236,0.10)', strokeWidth: 0.55, strokeDasharray: '2,7', strokeLinecap: 'round'
});

const EcosystemMap = () => {
  const [mode, setMode] = React.useState('operations');
  const m = MAP_MODES[mode];

  return React.createElement('div', null,
    React.createElement('div', { style: { display: 'flex', gap: 2, marginBottom: 36, flexWrap: 'wrap' } },
      Object.keys(MAP_MODES).map(k =>
        React.createElement('button', {
          key: k,
          onClick: () => setMode(k),
          style: {
            background: mode === k ? PAPER : 'transparent',
            border: `1px solid ${mode === k ? PAPER : 'rgba(244,241,236,0.28)'}`,
            color: mode === k ? '#2C2C2A' : 'rgba(244,241,236,0.6)',
            fontFamily: "'DM Mono',monospace", fontSize: 9, fontWeight: 400,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            padding: '11px 20px', cursor: 'pointer', transition: 'all 200ms ease',
          },
        }, MAP_MODES[k].btn)
      )
    ),

    React.createElement('div', { style: { border: '1px solid rgba(244,241,236,0.12)', background: 'rgba(244,241,236,0.02)', padding: '12px' } },
      React.createElement('svg', { viewBox: '0 0 880 540', width: '100%', style: { display: 'block' } },
        ...[0,1,2,3,4,5,6,7].map(i => React.createElement('line', { key: `v${i}`, x1: 60 + i * 108, y1: 24, x2: 60 + i * 108, y2: 512, stroke: 'rgba(244,241,236,0.10)', strokeWidth: 0.5, strokeDasharray: '2,10' })),
        ...[0,1,2,3,4].map(i => React.createElement('line', { key: `h${i}`, x1: 40, y1: 52 + i * 105, x2: 840, y2: 52 + i * 105, stroke: 'rgba(244,241,236,0.10)', strokeWidth: 0.5, strokeDasharray: '2,10' })),

        // North America and Central America — recognizable outline
        React.createElement(CoastPath, { wash: true, d: 'M 86 76 C 116 44, 178 34, 232 52 C 282 68, 314 100, 304 132 C 298 152, 270 162, 254 180 C 232 204, 210 214, 186 210 C 154 204, 128 184, 112 154 C 96 124, 70 110, 86 76 Z' }),
        React.createElement(CoastPath, { d: 'M 146 210 C 164 224, 184 236, 202 252 C 218 266, 226 276, 236 286 C 248 298, 264 306, 278 316' }),
        React.createElement(CoastPath, { d: 'M 294 229 C 316 226, 342 230, 362 240' }),
        // South America
        React.createElement(CoastPath, { wash: true, d: 'M 248 306 C 286 286, 346 288, 386 322 C 430 360, 414 428, 370 470 C 350 490, 332 518, 308 508 C 288 500, 294 460, 278 432 C 260 402, 232 368, 248 306 Z' }),
        // Europe and Iberia
        React.createElement(CoastPath, { wash: true, d: 'M 592 130 C 622 104, 672 96, 720 112 C 756 124, 774 152, 758 178 C 740 208, 684 212, 642 196 C 604 182, 570 160, 592 130 Z' }),
        React.createElement(CoastPath, { d: 'M 616 194 C 638 204, 666 212, 682 232 C 662 236, 632 230, 610 216 C 602 208, 604 198, 616 194 Z' }),

        // Country/province frame hints
        ...[
          'M 150 58 C 142 92, 156 124, 188 150',
          'M 124 158 C 164 148, 214 150, 258 170',
          'M 168 214 C 178 226, 194 238, 210 248',
          'M 214 252 C 222 266, 228 276, 236 286',
          'M 252 310 C 282 316, 314 316, 346 304',
          'M 294 320 C 288 350, 276 378, 262 404',
          'M 328 306 C 342 350, 340 396, 326 438',
          'M 360 326 C 338 350, 318 376, 302 410',
          'M 308 448 C 326 454, 350 456, 374 444',
          'M 620 130 C 636 150, 638 174, 626 196',
          'M 664 114 C 660 142, 672 166, 704 188',
          'M 632 202 C 646 216, 668 220, 682 232',
        ].map((d, i) => React.createElement(BoundaryPath, { key: `bd${i}`, d })),

        // Labels and sea gap
        React.createElement('text', { x: 104, y: 320, fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: 3, fill: 'rgba(244,241,236,0.24)' }, 'AMERICAS'),
        React.createElement('text', { x: 620, y: 262, fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: 3, fill: 'rgba(244,241,236,0.24)' }, 'EUROPE'),
        React.createElement('path', { d: 'M 460 82 C 500 178, 492 300, 464 424', fill: 'none', stroke: 'rgba(212,175,106,0.13)', strokeWidth: 0.8, strokeDasharray: '3,9' }),

        React.createElement('g', { key: mode },
          m.markers.map((mk, i) =>
            React.createElement(MapMarker, { key: mk.id + i, loc: MAP_LOCATIONS[mk.id], cat: mk.cat, showLabel: mk.label, i })
          )
        )
      )
    ),

    React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 24, marginTop: 28 } },
      React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(244,241,236,0.55)', lineHeight: 1.85, maxWidth: 440 } }, m.caption),
      React.createElement('div', { style: { display: 'flex', gap: 24, flexWrap: 'wrap' } },
        m.legend.map(([cat, lbl]) =>
          React.createElement('div', { key: cat, style: { display: 'flex', alignItems: 'center' } },
            React.createElement(LegendDot, { cat }),
            React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.6)' } }, lbl)
          )
        )
      )
    )
  );
};

Object.assign(window, { EcosystemMap });