import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AboutUs from './components/AboutUs';
import Contact from './components/Contact';
import Error from './components/Error';
import Loader from './components/Helper/Loader';
import ScrollToTop from './components/Helper/ScrollToTop';
// import HomeEight from './components/HomeEight';
// import HomeFive from './components/HomeFive';
// import HomeFour from './components/HomeFour';
import HomeOne from './components/HomeOne';
// import HomeSeven from './components/HomeSeven';
// import HomeSix from './components/HomeSix';
// import HomeThree from './components/HomeThree';
// import Hometwo from './components/HomeTwo';
import News from './components/News';
import Blog from "./components/Blog";
import BlogDetail from "./components/Blog/BlogDetail";

import SingleNews from './components/News/SingleNews';
import Service from './components/Service';
import UseCases from './components/UseCases';

import Privacy from './components/Service/Privacy';
import Terms from './components/Service/Terms';
import FAQ from './components/FAQ/Index';

function Routes() {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        window.scrollTo(0, 0);
    });
    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    });
    return (
        <>
            {loading && (
                <div className={`appie-loader ${loading ? 'active' : ''}`}>
                    <Loader />
                </div>
            )}
            <div className={`appie-visible ${loading === false ? 'active' : ''}`}>
                <Router>
                    <ScrollToTop>
                        <Switch>
                            <Route exact path="/" component={HomeOne} />
                            <Route exact path="/eoffer" component={HomeOne} />
                            {/*<Route exact path="/news" component={News} />*/}
                            <Route exact path="/blog" component={Blog} />
                            <Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
                            <Route exact path="/use-cases" component={UseCases} />
                            {/*<Route exact path="/news/single-news" component={SingleNews} />*/}
                            <Route exact path="/service" component={Service} />
                            <Route exact path="/terms" component={Terms} />
                            <Route exact path="/privacy" component={Privacy} />
                            <Route exact path="/about-us" component={AboutUs} />
                            <Route exact path="/contact" component={Contact} />
                            <Route exact path="/faq" component={FAQ} />
                            <Route exact path="/error" component={Error} />
                            <Route component={Error} />
                        </Switch>
                    </ScrollToTop>
                </Router>
            </div>
        </>
    );
}

export default Routes;