/* eslint-disable react/prop-types */
/**
 * Impact · Sección 8 del Home · NUESTRO IMPACTO + Mapa interactivo.
 * Brief 1 §3.1 Sección 8.
 *
 * - Fondo blanco
 * - Header narrativo + 4 categorías en 2 columnas
 * - Mapa: siluetas SVG reales de México + USA + Centroamérica + Caribe +
 *   Sudamérica norte, proyectadas Mercator desde Natural Earth (vía
 *   world-atlas npm, dominio público). Marcadores cobre pulsantes en las
 *   28 ciudades donde Prosperia ha trabajado, con tooltip al hacer click.
 * - El JSON con los paths se carga de `/home/assets/map-data.json`.
 */

const { useState: uS_I, useRef: uR_I, useEffect: uE_I } = React;

const CATEGORIES = [
  {
    icon: 'people',
    title: 'Educación y Salud.',
    body:  'Distritos universitarios, escuelas, centros médicos de alta complejidad y hospitales.',
  },
  {
    icon: 'spark',
    title: 'Innovación y Trabajo.',
    body:  'Polos tecnológicos, parques industriales y oficinas de nueva generación.',
  },
  {
    icon: 'compass',
    title: 'Comercio y Entretenimiento.',
    body:  'Espacios que activan la vida urbana — y no mueren a las 7 PM.',
  },
  {
    icon: 'building',
    title: 'Vivienda y Ciudad.',
    body:  'Comunidades planeadas, distritos residenciales, vivienda asequible y re-densificación de centros urbanos.',
  },
];

/* Ruta al JSON con paths de países + ciudades proyectadas a Mercator.
   Como esta es la Home, el path es relativo. Otras páginas que importen
   este componente lo cargarán vía `../home/assets/map-data.json` por
   el resolver de fetch desde su propia ruta. */
function resolveMapDataUrl() {
  // Best-effort: la Home la carga de "assets/map-data.json".
  // Si el componente se reusara desde otra página, basta cambiar este string.
  const path = window.location.pathname;
  if (path.includes('/home/')) return 'assets/map-data.json';
  return '../home/assets/map-data.json';
}

function Impact() {
  const [activeCity, setActiveCity] = uS_I(null);
  const [mapData, setMapData] = uS_I(null);

  uE_I(() => {
    fetch(resolveMapDataUrl())
      .then(r => r.json())
      .then(setMapData)
      .catch(err => console.warn('[Impact] no se pudo cargar map-data.json:', err));
  }, []);

  const CITIES = mapData?.cities || [];
  const COUNTRY_PATHS = mapData?.countries || {};

  return (
    <section data-screen-label="08 Impact" style={impStyles.section}>
      <div className="container">
        <div style={impStyles.header}>
          <h2 style={impStyles.title}>NUESTRO IMPACTO</h2>
          <p style={impStyles.desc}>
            18 años, +1,900 proyectos, +40 distritos, +20 millones de m² desarrollados, +3 billones de dólares de valor inmobiliario originado, en 57 ciudades de 3 regiones. La mayor experiencia acumulada en Originación Inmobiliaria, en proyectos que cubren:
          </p>
        </div>

        <div style={impStyles.catGrid}>
          {CATEGORIES.map((c, i) => (
            <div key={i} style={impStyles.catRow}>
              <div style={impStyles.catIcon}>
                <window.Icon name={c.icon} size={28} stroke={1.5} />
              </div>
              <div style={impStyles.catTitle}>{c.title}</div>
              <div style={impStyles.catBody}>{c.body}</div>
            </div>
          ))}
        </div>

        {/* Mapa */}
        <div style={impStyles.mapWrap}>
          <div style={impStyles.mapNote}>
            <span className="label-small" style={{ color: 'var(--color-copper-fallback)' }}>MAPA INTERACTIVO</span>
            <span style={{ fontSize: 13, color: 'var(--color-navy-medium)' }}>
              {/* En producción, ArcGIS embed. Aquí: representación schematica con marcadores cobre pulsantes. */}
              57 ciudades · 3 regiones · México · USA · Centro y Sudamérica
            </span>
          </div>

          <div style={impStyles.mapInner}>
            <svg viewBox="0 0 1000 700" style={{ width: '100%', height: '100%' }} role="img" aria-label="Mapa de ciudades donde Prosperia ha trabajado">
              {/* Background grid sutil */}
              <defs>
                <pattern id="impact-grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M40 0H0v40" fill="none" stroke="rgba(33,52,64,0.06)" strokeWidth="1"/>
                </pattern>
                <radialGradient id="city-pulse-grad">
                  <stop offset="0%" stopColor="#A86B2D" stopOpacity="0.6"/>
                  <stop offset="100%" stopColor="#A86B2D" stopOpacity="0"/>
                </radialGradient>
              </defs>
              <rect width="1000" height="700" fill="url(#impact-grid)"/>

              {/* Siluetas reales de países — Natural Earth (dominio público).
                  México resaltado en cobre, resto en navy translúcido. */}
              {Object.entries(COUNTRY_PATHS).map(([name, d]) => {
                const isMexico = name === 'Mexico';
                return (
                  <path
                    key={name}
                    d={d}
                    fill={isMexico ? 'rgba(168,107,45,0.12)' : 'rgba(33,52,64,0.05)'}
                    stroke={isMexico ? 'rgba(168,107,45,0.55)' : 'rgba(33,52,64,0.22)'}
                    strokeWidth={isMexico ? '1.1' : '0.7'}
                    strokeLinejoin="round"
                  />
                );
              })}

              {/* Markers */}
              {CITIES.map((c, i) => (
                <g key={c.name}
                   onClick={() => setActiveCity(c.name)}
                   style={{ cursor: 'pointer' }}>
                  <circle
                    cx={c.x} cy={c.y}
                    r="22"
                    fill="url(#city-pulse-grad)"
                    style={{
                      transformOrigin: `${c.x}px ${c.y}px`,
                      animation: `cityPulse 1.8s ease-out ${(i % 12) * 0.15}s infinite`,
                    }}
                  />
                  <circle
                    cx={c.x} cy={c.y}
                    r={c.featured ? 9 : 6}
                    fill={activeCity === c.name ? '#7FE3FF' : 'url(#cobre-base)'}
                    stroke="rgba(255,255,255,0.7)"
                    strokeWidth="1"
                  />
                </g>
              ))}

              {/* Tooltip ciudad activa */}
              {activeCity && (() => {
                const c = CITIES.find(x => x.name === activeCity);
                if (!c) return null;
                return (
                  <g>
                    <rect x={c.x + 12} y={c.y - 36} width={Math.max(120, c.name.length * 8 + 24)} height="44" rx="2" fill="#213440"/>
                    <text x={c.x + 24} y={c.y - 18} fill="#FAF9F4" fontSize="13" fontWeight="700">{c.name}</text>
                    <text x={c.x + 24} y={c.y - 2} fill="rgba(250,249,244,0.65)" fontSize="11" letterSpacing="0.1em" fontWeight="500">{c.n} PROYECTOS</text>
                  </g>
                );
              })()}
            </svg>

            <div style={impStyles.mapLegend}>
              <div style={impStyles.legendItem}>
                <span style={{ ...impStyles.legendDot, width: 9, height: 9 }}></span>
                <span>Ciudad con +50 proyectos</span>
              </div>
              <div style={impStyles.legendItem}>
                <span style={{ ...impStyles.legendDot, width: 6, height: 6 }}></span>
                <span>Ciudad con proyectos activos</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const impStyles = {
  section: {
    background: '#fff',
    paddingBlock: 'var(--space-3xl)',
  },
  header: {
    maxWidth: 880,
    marginBottom: 64,
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(32px, 4.5vw, 56px)',
    lineHeight: 1.1,
    color: 'var(--color-navy-deep)',
    letterSpacing: '0.02em',
  },
  desc: {
    margin: '24px 0 0',
    maxWidth: 760,
    fontSize: 'clamp(16px, 1.5vw, 19px)',
    lineHeight: 1.65,
    color: 'var(--color-navy-deep)',
  },
  catGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 0,
    marginBottom: 64,
    borderTop: '1px solid rgba(33,52,64,0.10)',
  },
  catRow: {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    gap: '0 16px',
    padding: '28px 0',
    borderBottom: '1px solid rgba(33,52,64,0.10)',
    alignItems: 'start',
  },
  catIcon: {
    gridRow: '1 / 3',
    color: 'var(--color-copper-fallback)',
    paddingTop: 2,
  },
  catTitle: {
    fontWeight: 700,
    fontSize: 18,
    color: 'var(--color-copper-fallback)',
  },
  catBody: {
    color: 'var(--color-navy-medium)',
    fontSize: 16,
    lineHeight: 1.6,
    marginTop: 6,
  },
  mapWrap: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  mapNote: {
    display: 'flex',
    alignItems: 'baseline',
    gap: 16,
    flexWrap: 'wrap',
  },
  mapInner: {
    position: 'relative',
    background: 'var(--color-cream-soft)',
    borderRadius: 4,
    height: 480,
    overflow: 'hidden',
    boxShadow: '0 8px 24px rgba(33, 52, 64, 0.06)',
  },
  mapLegend: {
    position: 'absolute', bottom: 16, left: 16,
    background: 'rgba(255,255,255,0.92)',
    padding: '12px 16px',
    borderRadius: 2,
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    fontSize: 12,
    color: 'var(--color-navy-deep)',
  },
  legendItem: { display: 'flex', alignItems: 'center', gap: 10 },
  legendDot: {
    display: 'inline-block', borderRadius: 999,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
  },
};

const impMQ = document.createElement('style');
impMQ.textContent = `
  @keyframes cityPulse {
    0%   { transform: scale(0.3); opacity: 0.9; }
    100% { transform: scale(1.3); opacity: 0; }
  }
  @media (min-width: 900px) {
    section[data-screen-label="08 Impact"] .container > div:nth-of-type(2) {
      grid-template-columns: repeat(2, 1fr) !important;
      column-gap: 64px !important;
    }
    section[data-screen-label="08 Impact"] .container > div:nth-of-type(2) > div {
      grid-template-columns: auto minmax(180px, 240px) 1fr !important;
      gap: 0 24px !important;
    }
  }
  @media (min-width: 1024px) {
    section[data-screen-label="08 Impact"] > div > div:last-child > div:last-child { height: 600px !important; }
  }
`;
document.head.appendChild(impMQ);

window.Impact = Impact;