// Brazil map with the 10 states where Biolife operates highlighted.
// All coordinates given as (lat, lon) — projected onto a 600×700 viewBox
// so dimensions stay consistent and points are easy to verify.

const BRAZIL_BBOX = { latN: 6.5, latS: -34.5, lonW: -75, lonE: -33.5 };
const VIEW = { w: 600, h: 700 };

function project(lat, lon) {
  const { latN, latS, lonW, lonE } = BRAZIL_BBOX;
  const x = ((lon - lonW) / (lonE - lonW)) * VIEW.w;
  const y = ((latN - lat) / (latN - latS)) * VIEW.h;
  return [x, y];
}

function poly(points) {
  return points.map(p => project(p[0], p[1]).join(",")).join(" ");
}

// Each state listed by user, with rough (lat, lon) polygon outline.
// The polygons are intentionally simplified — they're a friendly schematic,
// not a cartographic-grade rendering, but they place each state in the
// right region of Brazil so the coverage story reads at a glance.
const COVERED_STATES = [
  {
    uf: "RR", name: "Roraima",
    label: { lat: 2.5, lon: -61.5 },
    poly: [[5.2,-64.0],[5.2,-60.0],[4.5,-59.0],[3.0,-59.4],[1.4,-60.0],[0.9,-62.0],[0.7,-64.2],[2.5,-64.4],[5.2,-64.0]],
  },
  {
    uf: "AP", name: "Amapá",
    label: { lat: 1.5, lon: -52.0 },
    poly: [[4.3,-54.0],[4.0,-51.7],[2.0,-50.0],[0.0,-50.3],[-1.0,-51.5],[-1.0,-53.5],[1.0,-54.5],[4.3,-54.0]],
  },
  {
    uf: "AM", name: "Amazonas",
    label: { lat: -4.5, lon: -65 },
    poly: [
      [2.2,-67.5],[2.0,-64.0],[0.0,-62.0],[-1.5,-60.5],[-2.5,-58.5],[-5.0,-58.0],
      [-7.0,-58.5],[-9.5,-60.5],[-9.5,-65.5],[-7.0,-68.0],[-5.0,-72.0],[-2.0,-73.0],
      [0.5,-70.0],[2.2,-67.5],
    ],
  },
  {
    uf: "PA", name: "Pará",
    label: { lat: -4.0, lon: -52.5 },
    poly: [
      [1.5,-55.5],[1.7,-52.5],[0.0,-50.0],[-1.5,-47.5],[-3.0,-46.0],[-6.0,-47.0],
      [-9.0,-50.0],[-9.0,-54.0],[-7.0,-56.5],[-3.5,-57.5],[-1.0,-55.5],[1.5,-55.5],
    ],
  },
  {
    uf: "AC", name: "Acre",
    label: { lat: -9.0, lon: -71.0 },
    poly: [[-7.5,-73.5],[-7.0,-70.0],[-8.5,-68.5],[-10.5,-68.5],[-11.0,-72.5],[-9.5,-74.0],[-7.5,-73.5]],
  },
  {
    uf: "RO", name: "Rondônia",
    label: { lat: -11.0, lon: -63.0 },
    poly: [[-8.0,-66.0],[-7.5,-62.0],[-9.0,-60.0],[-13.0,-60.0],[-13.5,-62.5],[-12.0,-64.5],[-9.5,-66.5],[-8.0,-66.0]],
  },
  {
    uf: "PI", name: "Piauí",
    label: { lat: -7.0, lon: -43.0 },
    poly: [
      [-2.5,-41.5],[-3.0,-40.5],[-5.0,-41.0],[-7.5,-41.5],[-9.5,-43.0],[-10.5,-44.5],
      [-9.0,-46.0],[-7.0,-45.5],[-5.0,-44.5],[-3.0,-42.5],[-2.5,-41.5],
    ],
  },
  {
    uf: "PE", name: "Pernambuco",
    label: { lat: -8.5, lon: -38.0 },
    poly: [
      [-7.3,-41.0],[-7.4,-34.8],[-8.4,-35.0],[-9.0,-36.0],[-9.3,-37.5],[-9.5,-40.5],[-8.8,-41.0],[-7.3,-41.0],
    ],
  },
  {
    uf: "AL", name: "Alagoas",
    label: { lat: -9.6, lon: -36.5 },
    poly: [[-8.8,-38.4],[-9.0,-35.2],[-10.0,-35.5],[-10.5,-37.5],[-10.0,-38.5],[-8.8,-38.4]],
  },
  {
    uf: "SE", name: "Sergipe",
    label: { lat: -10.7, lon: -37.4 },
    poly: [[-9.6,-38.3],[-10.0,-36.4],[-11.5,-37.4],[-11.5,-38.2],[-9.6,-38.3]],
  },
];

// Rough Brazil silhouette outline used as a backdrop so the 10 highlighted
// states sit in a recognisable national context. Hand-traced clockwise.
const BRAZIL_OUTLINE = [
  [5.2,-60.5],[4.4,-51.5],[2.5,-50.0],[0.0,-50.3],[-1.5,-47.5],[-2.8,-41.5],[-4.8,-37.5],
  [-7.5,-34.8],[-9.5,-35.0],[-13.5,-38.7],[-17.0,-39.0],[-22.0,-41.0],[-23.5,-43.0],
  [-25.0,-48.0],[-29.0,-49.5],[-32.0,-51.5],[-33.7,-53.4],[-32.0,-54.5],[-30.0,-57.0],
  [-28.0,-56.0],[-23.0,-54.5],[-22.0,-58.0],[-23.0,-64.0],[-19.0,-58.0],[-13.5,-60.0],
  [-10.5,-65.5],[-9.5,-72.5],[-11.0,-72.5],[-11.0,-69.5],[-9.5,-67.5],[-7.5,-73.5],
  [-2.5,-73.0],[0.5,-69.5],[3.5,-69.0],[5.2,-60.5],
];

function BrazilMap({ activeUf, onHover }) {
  return (
    <svg
      viewBox={`0 0 ${VIEW.w} ${VIEW.h}`}
      style={{ width: "100%", height: "auto", display: "block" }}
      aria-label="Estados do Brasil atendidos pela Biolife"
    >
      <defs>
        <filter id="state-shadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" floodColor="#1c3d52" floodOpacity="0.18"/>
        </filter>
      </defs>

      {/* Backdrop — full Brazil silhouette in pale tone */}
      <polygon
        points={poly(BRAZIL_OUTLINE)}
        fill="#eef2f5"
        stroke="#dfe5ea"
        strokeWidth="1.2"
        strokeLinejoin="round"
      />

      {/* Highlighted states */}
      <g filter="url(#state-shadow)">
        {COVERED_STATES.map(s => (
          <polygon
            key={s.uf}
            points={poly(s.poly)}
            className={"br-state is-active" + (activeUf === s.uf ? " is-hover" : "")}
            onMouseEnter={() => onHover && onHover(s.uf)}
            onMouseLeave={() => onHover && onHover(null)}
            style={{ cursor: "pointer", fill: activeUf === s.uf ? "var(--c-blue-deep)" : "var(--c-blue)" }}
          />
        ))}
      </g>

      {/* UF labels */}
      {COVERED_STATES.map(s => {
        const [x, y] = project(s.label.lat, s.label.lon);
        return (
          <g key={s.uf + "-label"} style={{ pointerEvents: "none" }}>
            <text
              x={x} y={y + 5}
              textAnchor="middle"
              fontFamily="var(--font-sans)"
              fontWeight="700"
              fontSize="14"
              fill="#fff"
              style={{ paintOrder: "stroke", stroke: "rgba(28,61,82,0.25)", strokeWidth: 0.5, letterSpacing: "0.05em" }}
            >{s.uf}</text>
          </g>
        );
      })}
    </svg>
  );
}

Object.assign(window, { BrazilMap, COVERED_STATES });