/* App root — Jordan's flat single-story layout: hero, the property-tax vote,
   all 66 local bills by community, three pattern cards, the full record, close. */
function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    (async () => { setData(await window.GislerData.loadAll()); })();
  }, []);

  if (!data) {
    return (
      <>
        <Hero />
        <div className="loading">Loading the record...</div>
      </>
    );
  }

  const CARD_IDS = ["HB 463", "HB 1396", "HB 328"];
  const cardBills = CARD_IDS.map((id) => data.bills.find((b) => b.id === id)).filter(Boolean);

  return (
    <>
      <Hero />
      <TaxSection />
      <LocalBillsSection localBills={data.localBills} />
      <PatternSection bills={cardBills} />
      <RecordSection bills={data.bills} />
      <CloseSection />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);