/*
  Upgrade paths for later:
  1. Property listings page with searchable listings and featured campaigns.
  2. Blog or local market updates to build search visibility and trust.
  3. Calendly booking integration for appraisal and buyer-consult calls.
  4. Sold gallery with past results, suburb filters, and campaign notes.
  5. Email capture for suburb market updates and appraisal prompts.
*/

function App() {
  React.useEffect(() => {
    const accent = '#9F5A36';
    document.documentElement.style.setProperty('--accent', accent);
    document.documentElement.style.setProperty('--accent-soft', mixWithBg(accent, 0.85));
  }, []);

  useReveal();
  const ids = ['top', 'about', 'services', 'why', 'testimonials', 'contact'];
  const active = useActiveSection(ids);

  return (
    <div className="relative">
      <Navbar active={active} />
      <main>
        <Hero />
        <About />
        <Services />
        <WhyMe />
        <Testimonials />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}

function mixWithBg(hex, weight) {
  const bg = [0xF7, 0xF1, 0xE8];
  const c = hex.replace('#', '');
  const r = parseInt(c.substring(0, 2), 16);
  const g = parseInt(c.substring(2, 4), 16);
  const b = parseInt(c.substring(4, 6), 16);
  const mix = (a, c2) => Math.round(a * weight + c2 * (1 - weight));
  return `rgb(${mix(bg[0], r)}, ${mix(bg[1], g)}, ${mix(bg[2], b)})`;
}

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