import FooterBasic from '@/components/sections/footer/FooterBasic';
import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import { Outlet } from 'react-router-dom';
import { StyleProvider } from "@/components/ui/StyleProvider";

export default function Layout() {
  const navItems = [
    { name: "Home", href: "/" },
    { name: "About", href: "#about" },
    { name: "The Blueprint", href: "/blueprint" },
    { name: "Clinic", href: "/clinic" }
  ];

  return (
    <StyleProvider buttonVariant="default" siteBackground="floatingGradient" heroBackground="cornerGlow">
      <SiteBackgroundSlot />
      <SectionErrorBoundary name="navbar">
        <NavbarFloatingLogo
          logo="Dr. Cam Daniels"
          logoImageSrc="https://storage.googleapis.com/webild/default/no-image.jpg?id=ze9tj8"
          ctaButton={{ text: "Take the Quiz", href: "#" }}
          navItems={navItems} 
        />
      </SectionErrorBoundary>
      <main className="flex-grow">
        <Outlet />
      </main>
      <SectionErrorBoundary name="footer">
        <FooterBasic
          columns={[
            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Blueprint", href: "/blueprint" }, { label: "Clinic", href: "/clinic" }] },
            { title: "Connect", items: [{ label: "YouTube", href: "#" }, { label: "Instagram", href: "#" }] },
            { title: "Legal", items: [{ label: "Disclaimer", href: "#" }] }
          ]}
          leftText="© 2024 Dr. Cam Daniels. All rights reserved."
          rightText="This is for patient education only and does not constitute advice. If you are experiencing severe or unusual symptoms, contact your medical provider or seek emergency care."
        />
      </SectionErrorBoundary>
    </StyleProvider>
  );
}