import { useState, useMemo } from “react”;
import { useQuery } from “@tanstack/react-query”;
import { base44 } from “@/api/base44Client”;
import Header from “../components/Header”;
import USMap from “../components/USMap”;
import StateDetail from “../components/StateDetail”;
import CompareStates from “../components/CompareStates”;
import SectionToggle from “../components/SectionToggle”;
import { MapPin } from “lucide-react”;
export default function Home() {
const [selectedState, setSelectedState] = useState(null);
const [compareMode, setCompareMode] = useState(false);
const [compareStates, setCompareStates] = useState([]);
const [activeSection, setActiveSection] = useState(“overall”);
const { data: states = [] } = useQuery({
queryKey: [“states”],
queryFn: () => base44.entities.State.list(),
staleTime: 0,
gcTime: 0,
refetchOnMount: “always”,
});
const stateDataMap = useMemo(() => {
const map = {};
states.forEach((s) => {
map[s.name] = s;
});
return map;
}, [states]);
const categoryField = {
overall: “category”,
section1: “category_section1”,
section2: “category_section2”,
section3: “category_section3”,
section4: “category_section4”,
}[activeSection];
const stateCategories = useMemo(() => {
const cats = {};
states.forEach((s) => {
const val = s[categoryField];
if (val) cats[s.name] = val;
});
return cats;
}, [states, categoryField]);
const handleStateClick = (stateName) => {
if (compareMode) {
setCompareStates((prev) =>
prev.includes(stateName)
? prev.filter((s) => s !== stateName)
: prev.length < 3
? [...prev, stateName]
: prev
);
} else {
setSelectedState(stateName === selectedState ? null : stateName);
}
};
const handleToggleCompare = () => {
if (compareMode) {
setCompareMode(false);
setCompareStates([]);
} else {
setCompareMode(true);
setSelectedState(null);
}
};
const selectedForMap = compareMode
? compareStates
: selectedState
? [selectedState]
: [];
return (
{!compareMode && !selectedState && (
Select a State to Begin
Click any state on the map above to view its detailed policy analysis
across all four sections — or enable Compare Mode to evaluate multiple
states side-by-side.
)}
{!compareMode && selectedState && (
setSelectedState(null)}
activeSection={activeSection}
/>
)}
{compareMode && (
setCompareStates((prev) => prev.filter((x) => x !== s))
}
activeSection={activeSection}
/>
)}
);
}
