import { Outlet } from 'react-router-dom';
import NavbarCentered from '@/components/ui/NavbarCentered';

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

export default function Layout() {
  return (
    <StyleProvider buttonVariant="default" siteBackground="none" heroBackground="none">
      <SiteBackgroundSlot />
      <NavbarCentered
                logo="Lumière Med Spa"
                navItems={[
                  { name: "Services", href: "#services" },
                  { name: "Results", href: "#results" },
                  { name: "Team", href: "#team" },
                  { name: "Contact", href: "#contact" },
                ]}
                ctaButton={{ text: "Book Now", href: "#contact" }}
              />
      <main className="flex-grow">
        <Outlet />
      </main>
      <FooterSimpleCard
                brand="Lumière Med Spa"
                columns={[
                  {
                    title: "Treatments",
                    items: [
                      { label: "Botox & Fillers", href: "#services" },
                      { label: "Laser Resurfacing", href: "#services" },
                      { label: "Chemical Peels", href: "#services" },
                      { label: "Microneedling", href: "#services" },
                      { label: "Body Contouring", href: "#services" },
                    ],
                  },
                  {
                    title: "Company",
                    items: [
                      { label: "About Us", href: "#" },
                      { label: "Testimonials", href: "#testimonials" },
                      { label: "FAQ", href: "#faq" },
                      { label: "Careers", href: "#" },
                    ],
                  },
                  {
                    title: "Contact",
                    items: [
                      { label: "(555) 320-8800", href: "tel:5553208800" },
                      { label: "hello@lumieremedspa.com", href: "mailto:hello@lumieremedspa.com" },
                      { label: "Beverly Hills, CA" },
                    ],
                  },
                ]}
                copyright="© 2026 Lumière Med Spa"
                links={[
                  { label: "Privacy", href: "#" },
                  { label: "Terms", href: "#" },
                ]}
              />
    </StyleProvider>
  );
}