window.App = function App({ initialTweaks }) {
  const [tweaks] = React.useState(initialTweaks);

  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -60px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [tweaks.proofOrder, tweaks.showStatBand, tweaks.showCompare, tweaks.showFAQ]);

  const blocks = {
    band: tweaks.showStatBand ? <div className="reveal" key="band"><StatBand /></div> : null,
    cities: <div className="reveal" key="cities"><CitiesSection /></div>,
    how: <div className="reveal" key="how"><HowItWorks /></div>,
  };

  const orderMap = {
    "band-first": ["band", "cities", "how"],
    "cities-first": ["cities", "band", "how"],
    "how-first": ["how", "cities", "band"],
  };
  const order = orderMap[tweaks.proofOrder] || orderMap["band-first"];

  return (
    <>
      <CinematicHero />
      {order.map((key) => blocks[key])}
      {tweaks.showCompare && <div className="reveal"><Compare /></div>}
      {tweaks.showFAQ && <div className="reveal"><FAQ /></div>}
      <FinalCTA tweaks={tweaks} />
      <Footer />
    </>
  );
};