import { Outlet } from 'react-router-dom';

import { StyleProvider } from '@/components/ui/StyleProvider';
import SiteBackgroundSlot from '@/components/ui/SiteBackgroundSlot';
import NavbarFullscreen from "@/components/ui/NavbarFullscreen";
import FooterBrand from "@/components/sections/footer/FooterBrand";

export default function Layout() {
  return (
    <StyleProvider buttonVariant="default" siteBackground="none" heroBackground="none">
      <SiteBackgroundSlot />
      <NavbarFullscreen
                  logo="Aurion"
                  navItems={[
                    { name: "Rooms", href: "#rooms" },
                    { name: "Experience", href: "#experience" },
                    { name: "Dining", href: "#dining" },
                    { name: "Contact", href: "#contact" },
                  ]}
                  ctaButton={{ text: "Book Now", href: "#contact" }}
                />
      <main className="flex-grow">
        <Outlet />
      </main>
      <FooterBrand
                brand="Aurion"
                columns={[
                  { items: [{ label: "Rooms & Suites", href: "#rooms" }, { label: "Dining", href: "#dining" }, { label: "Amenities", href: "#experience" }] },
                  { items: [{ label: "Journeys", href: "#journeys" }, { label: "Spa & Wellness", href: "#spa" }, { label: "Events", href: "#events" }] },
                  { items: [{ label: "Book Now", href: "#contact" }, { label: "Location", href: "#location" }, { label: "Contact Us", href: "#contact" }] },
                ]}
              />
    </StyleProvider>
  );
}