import FooterBrand from '@/components/sections/footer/FooterBrand';
import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import { Outlet } from 'react-router-dom';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function Layout() {
  const navItems = [
    { name: "Work", href: "#hero" },
    { name: "About", href: "#about" },
    { name: "Services", href: "#features" },
    { name: "Pricing", href: "#pricing" },
    { name: "Contact", href: "#contact" },
    { name: "Product", href: "#product" },
    { name: "Metrics", href: "#metrics" }
  ];

  return (
    <ThemeProvider 
      defaultButtonVariant="gradient" 
      defaultTextAnimation="entrance-slide" 
      borderRadius="rounded" 
      contentWidth="medium" 
      sizing="medium" 
      background="circleGradient" 
      cardStyle="glass-elevated" 
      primaryButtonStyle="gradient" 
      secondaryButtonStyle="glass"
    >
      <div id="nav" data-section="nav">
        <NavbarFloatingLogo
          logo="StudioVFX"
          logoImageSrc="http://img.b2bpic.net/free-photo/blank-stationery-set-corporate-identity-template_93675-130786.jpg"
          ctaButton={{ text: "Get Started", href: "#contact" }}
          navItems={navItems}
        />
      </div>
      <main className="flex-grow">
        <Outlet />
      </main>
      <SectionErrorBoundary name="footer">
        <FooterBrand
          brand="StudioVFX"
          columns={[
            {
              items: [
                { label: "Portfolio", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Services", href: "#features" },
              ],
            },
            {
              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "Careers", href: "#" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
        />
      </SectionErrorBoundary>
    </ThemeProvider>
  );
}