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

export default function Layout() {
  const navItems = [
    { name: "About", href: "#about" },
    { name: "Experience", href: "#features" },
    { name: "Films", href: "#product" },
    { name: "Pricing", href: "#pricing" }
  ];

  return (
    <>
      <NavbarCentered
        logo="SEAT"
        navItems={navItems}
        ctaButton={{
          text: "Book Now",          href: "#contact"}}
      />
      <main className="flex-grow">
        <Outlet />
      </main>
      <FooterSimpleReveal
        brand="SEAT"
        columns={[
          {
            title: "Theater",            items: [
              { label: "About Us", href: "#about" },
              { label: "Careers", href: "#" },
            ],
          },
          {
            title: "Support",            items: [
              { label: "Contact", href: "#contact" },
              { label: "FAQ", href: "#faq" },
            ],
          },
        ]}
        copyright="© 2024 Seat Cinema. All rights reserved."
        links={[
          { label: "Privacy", href: "#" },
          { label: "Terms", href: "#" },
        ]}
      />
    </>
  );
}