import dynamic from "next/dynamic";
import { Suspense, type ReactNode } from "react";
import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
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";

// Site footer is part of the public marketing chrome only — not rendered for
// signed-in product surfaces, admin dashboards, or dev previews. See
// `.cursor/rules/routes.mdc` for the full chrome composition map.
const Footer = dynamic(() => import("../components/navigation/Footer"), {
  loading: () => (
    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
  ),
  ssr: true,
});

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>
        <Footer />
      </AuthModalProvider>
    </MessagesProvider>
  );
}