import { Suspense, type ReactNode } from "react";
import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
import FooterWithOrigin from "../components/navigation/FooterWithOrigin";
import SkipToContent from "../components/navigation/SkipToContent";
import { MessagesProvider } from "../contexts/MessagesContext";
import { AuthModalProvider } from "../contexts/AuthModalContext";
import { MAIN_CONTENT_ID } from "../../lib/mainContent";
import marketingMessages from "../../messages/en/marketing";

export default function MarketingLayout({ children }: { children: ReactNode }) {
  return (
    <MessagesProvider messages={marketingMessages}>
      <AuthModalProvider>
        {/*
         * Same session-aware shell as `(app)` / `(admin)`: `ConditionalNavigation`
         * reads the cookie behind Suspense so the static page shell can prerender
         * while the header streams signed-in vs signed-out correctly.
         */}
        <SkipToContent />
        <Suspense fallback={null}>
          <ConditionalNavigation />
        </Suspense>
        <main
          id={MAIN_CONTENT_ID}
          tabIndex={-1}
          className="flex-1 outline-none"
        >
          {children}
        </main>
        <Suspense
          fallback={
            <footer className="min-h-[200px] w-full bg-[var(--color-surface-default-primary)]" />
          }
        >
          <FooterWithOrigin />
        </Suspense>
      </AuthModalProvider>
    </MessagesProvider>
  );
}