/* App root — wires sections together */

const { useState: useAState, useEffect: useAEffect } = React;

function App() {
  const [tw] = useAState(() => window.__TWEAKS__ || {});

  useAEffect(() => {
    const b = document.body;
    if (tw.palette) b.dataset.palette = tw.palette;
    if (tw.accent) b.dataset.accent = tw.accent;
    if (tw.headlineFont) b.dataset.headline = tw.headlineFont;
    if (tw.headlineStyle) b.dataset.headlineStyle = tw.headlineStyle;
    if (tw.photoTreatment) b.dataset.photo = tw.photoTreatment;
    if (tw.density) b.dataset.density = tw.density;
  }, [tw]);

  return (
    <div className="wrap">
      <Hero />
      {tw.ornaments && <div className="measure"><Ornament /></div>}
      <WhoWeAre />
      {tw.ornaments && <div className="measure"><Ornament /></div>}
      <Journey />
      {tw.showDogs && (
        <>
          {tw.ornaments && <div className="measure"><Ornament /></div>}
          <Dogs />
        </>
      )}
      {tw.ornaments && <div className="measure"><Ornament /></div>}
      <WhyThisHouse />
      {tw.showRenovation && (
        <>
          {tw.ornaments && <div className="measure"><Ornament /></div>}
          <Renovation />
        </>
      )}
      {tw.showPractical && (
        <>
          {tw.ornaments && <div className="measure"><Ornament /></div>}
          <Practical />
        </>
      )}
      {tw.ornaments && <div className="measure"><Ornament /></div>}
      <Closing />

      <div style={{height: 80}} />
    </div>
  );
}

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