import React, { useState } from ‘react’;
import { MapPin } from ‘lucide-react’;
const comunas = [
{ nombre: ‘Temuco’, electores: 249546, color: ‘bg-green-500’, rango: ‘verde’ },
{ nombre: ‘Villarrica’, electores: 64065, color: ‘bg-green-500’, rango: ‘verde’ },
{ nombre: ‘Padre Las Casas’, electores: 64453, color: ‘bg-green-500’, rango: ‘verde’ },
{ nombre: ‘Angol’, electores: 47468, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Victoria’, electores: 32190, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Lautaro’, electores: 36754, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Pucón’, electores: 34159, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Nueva Imperial’, electores: 31795, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Pitrufquén’, electores: 24794, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Loncoche’, electores: 24363, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Carahue’, electores: 24023, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Freire’, electores: 23680, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Collipulli’, electores: 22259, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Cunco’, electores: 20682, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Curacautín’, electores: 20945, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Vilcún’, electores: 26619, color: ‘bg-yellow-400’, rango: ‘amarillo’ },
{ nombre: ‘Traiguén’, electores: 17859, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Gorbea’, electores: 15467, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Teodoro Schmidt’, electores: 14568, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Saavedra’, electores: 13126, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Lonquimay’, electores: 12033, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Cholchol’, electores: 12257, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Galvarino’, electores: 12098, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Purén’, electores: 11870, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Tolten’, electores: 10415, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Currarrehue’, electores: 9000, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Renaico’, electores: 9962, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Melipeuco’, electores: 8038, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Lumaco’, electores: 8743, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Ercilla’, electores: 7922, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Perquenco’, electores: 7066, color: ‘bg-gray-400’, rango: ‘gris’ },
{ nombre: ‘Los Sauces’, electores: 7183, color: ‘bg-gray-400’, rango: ‘gris’ },
];
const ComunaCard = ({ comuna }) => {
const getRangoText = () => {
if (comuna.rango === ‘verde’) return ‘Mas de 50.000 electores’;
if (comuna.rango === ‘amarillo’) return ‘20.000 – 50.000 electores’;
return ‘Menos de 20.000 electores’;
};
const getColorLabel = () => {
if (comuna.rango === ‘verde’) return ‘VERDE’;
if (comuna.rango === ‘amarillo’) return ‘AMARILLO’;
return ‘GRIS’;
};
return (
{comuna.nombre}
{getColorLabel()}
Total de Electores
{comuna.electores.toLocaleString(‘es-CL’)}
{getRangoText()}
);
};
export default function AraucaniaElectoralMaps() {
const [filtro, setFiltro] = useState(‘todos’);
const comunasFiltradas = filtro === ‘todos’
? comunas
: comunas.filter(c => c.rango === filtro);
const comunasOrdenadas = […comunasFiltradas].sort((a, b) =>
a.nombre.localeCompare(b.nombre)
);
const contadorVerde = comunas.filter(c => c.rango === ‘verde’).length;
const contadorAmarillo = comunas.filter(c => c.rango === ‘amarillo’).length;
const contadorGris = comunas.filter(c => c.rango === ‘gris’).length;
return (
{/* Header */}
Mapa Electoral La Araucania
Clasificacion de comunas segun cantidad de electores
{/* Leyenda */}
{/* Filtros */}
setFiltro(‘todos’)}
className={`px-6 py-2 rounded-lg font-semibold transition-all ${
filtro === ‘todos’
? ‘bg-blue-500 text-white’
: ‘bg-slate-700 text-slate-300 hover:bg-slate-600’
}`}
>
Todas ({comunas.length})
setFiltro(‘verde’)}
className={`px-6 py-2 rounded-lg font-semibold transition-all ${
filtro === ‘verde’
? ‘bg-green-500 text-white’
: ‘bg-slate-700 text-slate-300 hover:bg-slate-600’
}`}
>
Verde ({contadorVerde})
setFiltro(‘amarillo’)}
className={`px-6 py-2 rounded-lg font-semibold transition-all ${
filtro === ‘amarillo’
? ‘bg-yellow-400 text-slate-900’
: ‘bg-slate-700 text-slate-300 hover:bg-slate-600’
}`}
>
Amarillo ({contadorAmarillo})
setFiltro(‘gris’)}
className={`px-6 py-2 rounded-lg font-semibold transition-all ${
filtro === ‘gris’
? ‘bg-gray-500 text-white’
: ‘bg-slate-700 text-slate-300 hover:bg-slate-600’
}`}
>
Gris ({contadorGris})
{/* Grid de Comunas */}
{comunasOrdenadas.map((comuna, idx) => (
{/* Estadisticas */}
Estadisticas
Total Comunas
{comunas.length}
Verde (más de 50k)
{contadorVerde}
Amarillo (20k-50k)
{contadorAmarillo}
Gris (menos de 20k)
{contadorGris}
);
}
