import React from 'react';
import { HashRouter as Router, Routes, Route, useLocation } from 'react-router-dom';

// Since we are using Babel Standalone without a bundler, we access components from window
const getComponent = (name: string) => (window as any)[name] || (() => <div className="p-4">Loading {name}...</div>);

const ScrollToTop = () => {
  const { pathname } = useLocation();
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return null;
};

const App: React.FC = () => {
  const Navbar = getComponent('Navbar');
  const Footer = getComponent('Footer');
  const AIChatBot = getComponent('AIChatBot');
  const Home = getComponent('Home');
  const Services = getComponent('Services');
  const About = getComponent('About');
  const Contact = getComponent('Contact');

  return (
    <Router>
      <ScrollToTop />
      <div className="flex flex-col min-h-screen font-sans text-gray-800">
        <Navbar />
        <main className="flex-grow">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/services" element={<Services />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </main>
        <AIChatBot />
        <Footer />
      </div>
    </Router>
  );
};

(window as any).App = App;