import React from "react";
import {Router, Route, Routes } from "react-router-dom";
import { Helmet } from "react-helmet";
import "bootstrap/dist/css/bootstrap.min.css";
import Home from "./pages/Home.js";
import Flights from "./pages/Flights.js";
import Hotels from "./pages/Hotels.js";
import Packages from "./pages/Packages.js";
import Navbar from "./components/Navbar.js";
import Footer from "./components/Footer.js";
import FlightsResults from "./pages/FlightsResults.js"; //  results page
import AppRouter from "./components/router/index.js"



function App() {
  return (
    <>
      <Helmet>
        <title>hlafly - Best Travel Deals</title>
        <meta name="description" content="Find the best deals on flights, hotels, and travel packages with hlafly." />
        <meta name="keywords" content="flights, hotels, travel deals, vacation packages" />
        <meta property="og:title" content="hlafly - Best Travel Deals" />
        <meta property="og:description" content="Find the best deals on flights, hotels, and travel packages with hlafly." />
        <meta property="og:image" content="/images/og-image.jpg" />
        <meta property="og:url" content="https://www.hlafly.com" />
        <meta name="twitter:card" content="summary_large_image" />
      </Helmet>
      <Navbar />
      <div className="container mt-5">
        <AppRouter />
        {/* <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/flights" element={<Flights />} />
          <Route path="/hotels" element={<Hotels />} />
          <Route path="/packages" element={<Packages />} />
          <Route path="/flights/results" element={<FlightsResults />} />
        </Routes> */}
      </div>
      <Footer />
    </>
  );
}

export default App;