"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function ServicesPage() {
  const updatedNavItems = [
    { name: "Home", id: "#hero" },
    { name: "About", id: "#about" },
    { name: "Menu", id: "#menu" },
    { name: "Reviews", id: "#reviews" },
    { name: "Services", id: "/services" },
    { name: "Contact", id: "#contact" },
  ];

  const updatedFooterColumns = [
    {
      items: [
        { label: "Home", href: "#hero" },
        { label: "About Us", href: "#about" },
        { label: "Menu", href: "#menu" },
      ],
    },
    {
      items: [
        { label: "Reviews", href: "#reviews" },
        { label: "Contact", href: "#contact" },
        { label: "Reservations", href: "/services" },
      ],
    },
    {
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="medium"
        background="blurBottom"
        cardStyle="gradient-radial"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={updatedNavItems}
            brandName="VANISCA"
          />
        </div>

        <div id="services-reservation" data-section="services-reservation">
          <ContactSplit
            tag="Book Your Table"
            title="Make a Reservation"
            description="Please provide your email for reservation inquiries. Our team will contact you to gather details like your full name, desired date/time, number of guests, and any special requests."
            background={{ variant: "radial-gradient" }}
            mediaPosition="right"
            imageSrc="http://img.b2bpic.net/free-photo/fine-dining-plate-restaurant-setting_140725-10372.jpg"
            imageAlt="Elegant dining table"
            inputPlaceholder="Enter your email"
            buttonText="Submit Reservation Request"
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={updatedFooterColumns}
            logoText="VANISCA"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
