// ─── ProjectMap — minimalist SVG location sketches ──────────────────
// Clean architectural map sketches for the project pages. No map tiles, no API key.
// The button still opens the exact Google Maps search for visiting / verification.

const PROJECT_MAPS = {
  'Bioma': {
    label: 'Costa del Este, Panama City', query: 'PH Bioma Costa del Este Panama',
    sea: 'Pacific edge', district: 'COSTA DEL ESTE', marker: [610, 242],
    roads: [
      ['M 70 315 C 220 285, 382 284, 805 230', 'Corredor Sur'],
      ['M 104 155 C 270 185, 430 205, 760 205', 'Ave. Costa del Este'],
      ['M 540 72 C 558 150, 575 255, 596 414', 'Town Center axis'],
      ['M 666 90 C 650 180, 640 270, 618 415', 'Park line'],
    ],
    blocks: [[470,150,105,64],[584,142,122,70],[450,230,118,80],[582,238,140,92],[720,185,70,126]],
    water: 'M 42 380 C 190 348, 350 340, 510 352 C 654 362, 752 332, 838 302 L 838 468 L 42 468 Z',
    pois: [{p:[540,190],t:'Town Center'}, {p:[690,250],t:'Business district'}, {p:[600,322],t:'Parks'}]
  },
  'Nayamara': {
    label: 'Amador, Panama City', query: 'Nayamara Amador Panama',
    sea: 'Canal entrance', district: 'AMADOR', marker: [538, 236],
    roads: [
      ['M 106 278 C 245 250, 345 250, 452 222 C 522 204, 612 182, 756 118', 'Calzada de Amador'],
      ['M 162 356 C 286 312, 384 286, 510 254 C 608 230, 680 192, 792 150', 'Coastal drive'],
      ['M 448 92 C 450 154, 456 216, 474 344', 'Causeway spine'],
    ],
    blocks: [[390,198,80,58],[490,176,92,68],[578,140,86,54],[286,248,94,44]],
    water: 'M 34 48 L 846 48 L 846 468 L 34 468 Z',
    land: 'M 78 305 C 208 260, 348 278, 468 224 C 592 170, 698 98, 826 96 L 826 292 C 678 252, 572 282, 444 326 C 310 370, 174 378, 78 344 Z',
    pois: [{p:[460,205],t:'Causeway'}, {p:[640,168],t:'Marina'}, {p:[350,270],t:'Bridge'}]
  },
  'Cavarrosa': {
    label: 'Amador, Panama City', query: 'Cavarosa Amador Panama',
    sea: 'Canal entrance', district: 'AMADOR', marker: [584, 205],
    roads: [
      ['M 106 278 C 245 250, 345 250, 452 222 C 522 204, 612 182, 756 118', 'Calzada de Amador'],
      ['M 162 356 C 286 312, 384 286, 510 254 C 608 230, 680 192, 792 150', 'Coastal drive'],
      ['M 530 84 C 522 154, 530 224, 558 336', 'Amador spine'],
    ],
    blocks: [[430,198,80,58],[528,176,92,68],[626,140,86,54],[306,248,94,44]],
    water: 'M 34 48 L 846 48 L 846 468 L 34 468 Z',
    land: 'M 78 305 C 208 260, 348 278, 468 224 C 592 170, 698 98, 826 96 L 826 292 C 678 252, 572 282, 444 326 C 310 370, 174 378, 78 344 Z',
    pois: [{p:[535,190],t:'Amador'}, {p:[660,160],t:'Marina'}, {p:[400,250],t:'Panama Bay'}]
  },
  'Cavarosa': null,
  'Mova': {
    label: 'Obarrio, Panama City', query: 'MOVA Obarrio Panama City Panama',
    sea: 'Urban grid', district: 'OBARRIO', marker: [500, 244],
    roads: [
      ['M 80 158 C 235 172, 412 178, 796 164', 'Vía España'],
      ['M 82 302 C 260 280, 455 284, 802 262', 'Calle 50'],
      ['M 330 78 C 335 178, 340 284, 346 420', 'Vía Brasil'],
      ['M 506 70 C 506 168, 512 282, 526 420', 'Obarrio axis'],
      ['M 650 76 C 638 176, 630 286, 620 420', 'Financial district'],
    ],
    blocks: [[378,184,86,76],[482,174,88,88],[590,178,94,68],[382,284,116,70],[522,284,118,82]],
    water: null,
    pois: [{p:[455,210],t:'Financial district'}, {p:[550,300],t:'Calle 50'}, {p:[340,246],t:'Metro'}]
  },
  'Boreal': {
    label: 'Obarrio, Panama City', query: 'Boreal Obarrio Panama City GK Properties',
    sea: 'Urban grid', district: 'OBARRIO', marker: [530, 255],
    roads: [
      ['M 80 158 C 235 172, 412 178, 796 164', 'Vía España'],
      ['M 82 302 C 260 280, 455 284, 802 262', 'Calle 50'],
      ['M 330 78 C 335 178, 340 284, 346 420', 'Vía Brasil'],
      ['M 506 70 C 506 168, 512 282, 526 420', 'Obarrio axis'],
      ['M 650 76 C 638 176, 630 286, 620 420', 'Financial district'],
    ],
    blocks: [[378,184,86,76],[482,174,88,88],[590,178,94,68],[382,284,116,70],[522,284,118,82]],
    water: null,
    pois: [{p:[498,212],t:'Obarrio'}, {p:[570,300],t:'Calle 50'}, {p:[640,215],t:'Services'}]
  },
  'Playa Escondida': {
    label: 'María Chiquita, Colón', query: 'Playa Escondida Resort & Marina Maria Chiquita Colon Panama',
    sea: 'Caribbean coast', district: 'MARÍA CHIQUITA · COLÓN', marker: [530, 236],
    roads: [
      ['M 84 330 C 214 304, 340 304, 462 280 C 570 258, 670 250, 794 220', 'Coastal road'],
      ['M 382 112 C 400 168, 430 222, 486 312', 'Resort access'],
      ['M 574 98 C 548 160, 536 220, 522 340', 'Lagoon edge'],
    ],
    blocks: [[458,200,78,62],[550,192,72,58],[620,214,82,54],[430,286,94,50]],
    water: 'M 36 44 L 844 44 L 844 198 C 730 180, 642 172, 526 188 C 404 204, 310 196, 210 176 C 136 160, 80 164, 36 182 Z',
    land: 'M 36 198 C 115 156, 220 184, 330 202 C 454 222, 538 178, 676 184 C 742 188, 798 198, 844 220 L 844 468 L 36 468 Z',
    pois: [{p:[490,210],t:'Lagoon'}, {p:[610,220],t:'Beach'}, {p:[438,290],t:'Village'}]
  },
};
PROJECT_MAPS['Cavarosa'] = PROJECT_MAPS['Cavarrosa'];

const encodeMap = (q) => encodeURIComponent(q || 'Panama City, Panama');
const GOLD = '#D4AF6A';
const PAPER = '#F4F1EC';

const SketchRoad = ({ road, i }) => React.createElement('g', null,
  React.createElement('path', { id: `pm-road-${i}`, d: road[0], fill: 'none', stroke: 'transparent' }),
  React.createElement('path', { d: road[0], fill: 'none', stroke: 'rgba(244,241,236,0.34)', strokeWidth: i === 0 ? 1.8 : 1.05, strokeLinecap: 'round' }),
  React.createElement('text', { dy: -7, fontFamily: "'DM Mono',monospace", fontSize: 7.5, letterSpacing: 1.2, fill: 'rgba(244,241,236,0.34)' },
    React.createElement('textPath', { href: `#pm-road-${i}`, startOffset: '52%', textAnchor: 'middle' }, road[1])
  )
);

const ProjectMap = ({ project }) => {
  const projectName = project && project.name ? project.name : 'Project';
  const data = PROJECT_MAPS[projectName] || PROJECT_MAPS.Mova;
  const query = (project && project.mapQuery) || data.query || `${projectName} ${project && (project.district || project.location || project.region) || 'Panama'}`;
  const open = `https://www.google.com/maps/search/?api=1&query=${encodeMap(query)}`;
  const [mx, my] = data.marker;

  return React.createElement('div', null,
    React.createElement('div', {
      style: { border: '1px solid rgba(244,241,236,0.12)', background: 'rgba(244,241,236,0.02)', padding: 12 },
    },
      React.createElement('svg', { viewBox: '0 0 880 470', width: '100%', style: { display: 'block', background: '#242421' } },
        // background graticule
        ...[0,1,2,3,4,5,6,7].map(i => React.createElement('line', { key: `v${i}`, x1: 70 + i * 105, y1: 34, x2: 70 + i * 105, y2: 432, stroke: 'rgba(244,241,236,0.075)', strokeWidth: 0.5, strokeDasharray: '2,10' })),
        ...[0,1,2,3,4].map(i => React.createElement('line', { key: `h${i}`, x1: 40, y1: 54 + i * 82, x2: 840, y2: 54 + i * 82, stroke: 'rgba(244,241,236,0.075)', strokeWidth: 0.5, strokeDasharray: '2,10' })),

        data.water && React.createElement('path', { d: data.water, fill: 'rgba(212,175,106,0.045)', stroke: 'rgba(244,241,236,0.18)', strokeWidth: 0.9, strokeDasharray: '5,7' }),
        data.land && React.createElement('path', { d: data.land, fill: 'rgba(244,241,236,0.035)', stroke: 'rgba(244,241,236,0.15)', strokeWidth: 0.8 }),

        ...(data.blocks || []).map((b, i) => React.createElement('rect', { key: `b${i}`, x: b[0], y: b[1], width: b[2], height: b[3], fill: 'rgba(244,241,236,0.032)', stroke: 'rgba(244,241,236,0.11)', strokeWidth: 0.7 })),
        ...(data.roads || []).map((r, i) => React.createElement(SketchRoad, { key: `r${i}`, road: r, i })),

        // POIs
        ...(data.pois || []).map((poi, i) => React.createElement('g', { key: `poi${i}` },
          React.createElement('line', { x1: mx, y1: my, x2: poi.p[0], y2: poi.p[1], stroke: 'rgba(244,241,236,0.12)', strokeWidth: 0.6, strokeDasharray: '3,8' }),
          React.createElement('circle', { cx: poi.p[0], cy: poi.p[1], r: 4, fill: 'none', stroke: 'rgba(244,241,236,0.58)', strokeWidth: 1 }),
          React.createElement('text', { x: poi.p[0] + 10, y: poi.p[1] + 4, fontFamily: "'DM Mono',monospace", fontSize: 9, fill: 'rgba(244,241,236,0.58)', letterSpacing: 0.7 }, poi.t)
        )),

        // Labels
        React.createElement('text', { x: 54, y: 74, fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: 2.8, fill: 'rgba(244,241,236,0.28)' }, data.district),
        React.createElement('text', { x: 54, y: 94, fontFamily: "'DM Mono',monospace", fontSize: 7, letterSpacing: 1.8, fill: 'rgba(244,241,236,0.20)' }, data.sea),
        React.createElement('circle', { cx: 796, cy: 68, r: 22, fill: 'none', stroke: 'rgba(244,241,236,0.18)', strokeWidth: 0.8 }),
        React.createElement('text', { x: 796, y: 73, textAnchor: 'middle', fontFamily: "'DM Mono',monospace", fontSize: 11, fill: 'rgba(244,241,236,0.45)' }, 'N'),
        React.createElement('line', { x1: 796, y1: 36, x2: 796, y2: 49, stroke: GOLD, strokeWidth: 1 }),

        // Project marker
        React.createElement('g', { transform: `translate(${mx} ${my})` },
          React.createElement('circle', { r: 28, fill: 'none', stroke: 'rgba(212,175,106,0.26)', strokeWidth: 1.2, style: { animation: 'pmPulse 3s ease-in-out infinite', transformOrigin: 'center' } }),
          React.createElement('circle', { r: 15, fill: 'none', stroke: 'rgba(212,175,106,0.56)', strokeWidth: 1 }),
          React.createElement('rect', { x: -7, y: -7, width: 14, height: 14, fill: GOLD, transform: 'rotate(45)' })
        ),
        React.createElement('text', { x: mx, y: my - 42, textAnchor: 'middle', fontFamily: "'Cormorant Garamond',serif", fontSize: 24, fill: PAPER }, projectName),
        React.createElement('text', { x: mx, y: my + 46, textAnchor: 'middle', fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: 1.5, fill: 'rgba(244,241,236,0.56)', textTransform: 'uppercase' }, data.label)
      )
    ),
    React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 24, marginTop: 26 } },
      React.createElement('div', null,
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9, marginBottom: 10, fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.14em', textTransform: 'uppercase', color: GOLD } },
          React.createElement('span', { style: { width: 10, height: 10, background: GOLD, transform: 'rotate(45deg)', display: 'inline-block' } }),
          'Location sketch'
        ),
        React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(244,241,236,0.55)', lineHeight: 1.85, maxWidth: 560 } },
          `${projectName} is positioned in ${data.label}. This sketch is intentionally minimal; use the Google Maps link for live directions and verification.`)
      ),
      React.createElement('a', { href: open, target: '_blank', rel: 'noopener noreferrer', style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(212,175,106,0.8)', color: GOLD, textDecoration: 'none', padding: '12px 18px', fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: '0.16em', textTransform: 'uppercase' } }, 'Open exact Google Maps →')
    )
  );
};

Object.assign(window, { ProjectMap });