"use client";

import { Box } from "@mantine/core";
import { PremiumBackground } from "@/components/motion/PremiumBackground";
import { SiteHeader } from "@/components/navigation/SiteHeader";
import { SiteFooter } from "@/components/navigation/SiteFooter";
import { useThemeColors } from "@/hooks/useThemeColors";

interface MarketingLayoutProps {
  children: React.ReactNode;
}

export function MarketingLayout({ children }: MarketingLayoutProps) {
  const theme = useThemeColors();

  return (
    <>
      <SiteHeader />
      <Box
        style={{
          minHeight: "100vh",
          background: theme.pageGradient,
          color: theme.body,
          position: "relative",
          overflowX: "hidden",
        }}
      >
        <PremiumBackground variant="marketing" showParticles={false} />
        <Box component="main" pt={88} pos="relative" style={{ zIndex: 1 }}>
          {children}
        </Box>
        <SiteFooter />
      </Box>
    </>
  );
}