import { Outlet } from 'react-router-dom';
import NavbarCentered from '@/components/ui/NavbarCentered';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { StyleProvider } from '@/components/ui/StyleProvider';
import SiteBackgroundSlot from '@/components/ui/SiteBackgroundSlot';

/**
 * Shared site chrome — navbar + footer rendered ONCE around every page via <Outlet />.
 * Navbar renders exactly one source of truth; pages render only their own content.
 *
 * navItems is an EXPLICIT list — not derived from routes.ts — because it must support
 * BOTH types of links:
 *   - page links:   href: "/products", href: "/about"
 *   - anchor links: href: "#features", href: "#pricing", href: "#contact"
 * When the initial site has everything on one page, anchors are the right thing.
 * When pages are split, both coexist.
 *
 * Generator & page-create handler edit THIS array when user requests nav changes.
 *
 * StyleProvider props (buttonVariant / siteBackground / heroBackground) are the single
 * source of truth for Button look and decorative backgrounds across the whole site.
 * Backend writes them at generation time; Bob-AI's style handler edits them on demand.
 */
export default function Layout() {
  const navItems = [
    { name: 'Home', href: '/' },
  ];

  return (
    <StyleProvider buttonVariant="default" siteBackground="none" heroBackground="none">
      <SiteBackgroundSlot />
      <NavbarCentered
        logo="Brand"
        navItems={navItems}
        ctaButton={{ text: 'Get Started', href: '/' }}
      />
      <main className="flex-grow">
        <Outlet />
      </main>
      <FooterSimple
        brand="Brand"
        copyright="© 2024 Brand. All rights reserved."
        columns={[]}
        links={[]}
      />
    </StyleProvider>
  );
}