import React, { useState, useEffect } from 'react';
import FooterBrand from '@/components/sections/footer/FooterBrand';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import { Outlet } from 'react-router-dom';
import { StyleProvider } from "@/components/ui/StyleProvider";
import Button from "@/components/ui/Button";

export default function Layout() {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navItems = [
  {
    "name": "Home",    "href": "/"
  },
  {
    "name": "About",    "href": "#about"
  },
  {
    "name": "Rooms",    "href": "#accommodation"
  },
  {
    "name": "Experiences",    "href": "#experiences"
  },
  {
    "name": "Offers",    "href": "#offers"
  },
  {
    "name": "Testimonials",    "href": "#testimonials"
  },
  {
    "name": "FAQs",    "href": "#faq"
  },
  {
    "name": "Contact",    "href": "#contact"
  },
  { name: "Booking", href: "/booking" },

];

  return (
    <StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="gradientBars">
      <SiteBackgroundSlot />
      <SectionErrorBoundary name="navbar">
        <nav className={`fixed top-0 z-50 w-full transition-colors duration-300 ${isScrolled ? 'bg-background/95 backdrop-blur-sm border-b border-foreground/10' : 'bg-transparent'} py-4`}>
          <div className="mx-auto flex w-content-width items-center justify-between">
            <a href="/" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
              The Grand Hotel
            </a>
            <div className="hidden lg:flex items-center gap-6">
              {navItems.map((item) => (
                <a key={item.name} href={item.href} className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors">
                  {item.name}
                </a>
              ))}
            </div>
            <Button text="Book Now" href="/booking" variant="primary" />
          </div>
        </nav>
      </SectionErrorBoundary>
      <main className="flex-grow">
        <Outlet />
      </main>
      <SectionErrorBoundary name="footer">
        <FooterBrand
      brand="The Grand Hotel"
      columns={[
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Press",              href: "#"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          items: [
            {
              label: "Rooms & Suites",              href: "#accommodation"},
            {
              label: "Dining",              href: "#experiences"},
            {
              label: "Spa & Wellness",              href: "#experiences"},
            {
              label: "Events",              href: "#experiences"},
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
            {
              label: "Sitemap",              href: "#"},
          ],
        },
      ]}
    />
      </SectionErrorBoundary>
    </StyleProvider>
  );
}