// App shell — applies tweaks as CSS variable overrides, renders sections in order.

const ACCENTS = {
  blue:     { link: '#0071e3', linkHover: '#0077ed' },
  teal:     { link: '#047c7a', linkHover: '#05908e' },
  graphite: { link: '#1d1d1f', linkHover: '#000000' },
  red:      { link: '#bf1522', linkHover: '#d2172a' },
};

function App() {
  const [tweaks, setTweaks] = useTweaks();

  useEffect(() => {
    const a = ACCENTS[tweaks.accent] || ACCENTS.blue;
    document.documentElement.style.setProperty('--link', a.link);
    document.documentElement.style.setProperty('--link-hover', a.linkHover);

    if (tweaks.heroBg === 'dark') {
      document.documentElement.style.setProperty('--bg', '#0b0b0d');
      document.documentElement.style.setProperty('--bg-soft', '#131316');
      document.documentElement.style.setProperty('--bg-chip', '#1a1a1e');
      document.documentElement.style.setProperty('--ink', '#f5f5f7');
      document.documentElement.style.setProperty('--ink-2', '#c9c9cf');
      document.documentElement.style.setProperty('--muted', '#86868b');
      document.documentElement.style.setProperty('--line', '#2e2e33');
      document.documentElement.style.setProperty('--line-soft', '#24242a');
    } else if (tweaks.heroBg === 'soft') {
      document.documentElement.style.setProperty('--bg', '#f5f5f7');
      document.documentElement.style.setProperty('--bg-soft', '#ffffff');
      document.documentElement.style.setProperty('--bg-chip', '#fbfbfd');
      document.documentElement.style.setProperty('--ink', '#1d1d1f');
      document.documentElement.style.setProperty('--ink-2', '#424245');
      document.documentElement.style.setProperty('--muted', '#6e6e73');
      document.documentElement.style.setProperty('--line', '#d2d2d7');
      document.documentElement.style.setProperty('--line-soft', '#e5e5e7');
    } else {
      document.documentElement.style.setProperty('--bg', '#ffffff');
      document.documentElement.style.setProperty('--bg-soft', '#f5f5f7');
      document.documentElement.style.setProperty('--bg-chip', '#fbfbfd');
      document.documentElement.style.setProperty('--ink', '#1d1d1f');
      document.documentElement.style.setProperty('--ink-2', '#424245');
      document.documentElement.style.setProperty('--muted', '#6e6e73');
      document.documentElement.style.setProperty('--line', '#d2d2d7');
      document.documentElement.style.setProperty('--line-soft', '#e5e5e7');
    }
  }, [tweaks.accent, tweaks.heroBg]);

  return (
    <>
      <AlertBar show={tweaks.showEmergencyBanner !== false} />
      <Nav showAlert={tweaks.showEmergencyBanner !== false} />
      <Hero />
      <Services />
      <Pricing />
      <WaterDamage />
      <Properties />
      <Process />
      <FAQ />
      <QuoteForm />
      <Footer />
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);