// ─────────── App ───────────

const App = () => {
  useReveal();
  return (
    <>
      <TopBar />
      <Hero />
      <ServicesSection />
      <ProcessSection />
      <DoctorsSection />
      <DoctorInAction />
      <TreatmentsSection />
      <BeforeAfterSection />
      <ReviewsSection />
      <InvisalignGallery />
      <BranchesSection />
      <CTAStrip />
      <BookingSection />
      <FAQSection />
      <Footer />
    </>
  );
};

// Simple shade function for hex → lightened/darkened hex
function shade(hex, pct) {
  const h = hex.replace('#','');
  const n = parseInt(h.length === 3 ? h.split('').map(c => c+c).join('') : h, 16);
  let r = (n >> 16) & 0xff, g = (n >> 8) & 0xff, b = n & 0xff;
  r = Math.round(r + (255 - r) * pct);
  g = Math.round(g + (255 - g) * pct);
  b = Math.round(b + (255 - b) * pct);
  return '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join('');
}

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