import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import ProgressBar from "@/components/ProgressBar/ProgressBar";
import Header from "@/components/Header/Header";
import Footer from "@/components/Footer/Footer";
import { Suspense } from "react";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Heystic — Simple, affordable solutions to start online.",
  description: "Launch, grow, and scale your online vision with Heystic",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Suspense fallback={null}>
          <ProgressBar />
        </Suspense>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}
