"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Star } from "lucide-react";

export default function ReservationsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="large"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            brandName="Grandioz Restaurant"
            navItems={[
              { name: "Our Offerings", id: "#offerings" },
              { name: "Our Story", id: "#about" },
              { name: "Our Team", id: "#team" },
              { name: "Reviews", id: "#testimonials" },
              { name: "Reservations", id: "/reservations" }
            ]}
            button={{ text: "Book a Table", href: "/reservations" }}
          />
        </div>

        <div id="reservation-form" data-section="reservation-form">
          <ContactSplitForm
            title="Book Your Unforgettable Dining Experience"
            description="Reserve your table at Grandioz Restaurant. We look forward to welcoming you."
            useInvertedBackground={true}
            mediaAnimation="none"
            buttonText="Confirm Reservation"
            contentClassName="!grid-cols-1 max-w-[600px] mx-auto"
            mediaWrapperClassName="hidden"
            inputs={[
              { name: "name", type: "text", placeholder: "Full Name", required: true },
              { name: "email", type: "email", placeholder: "Email Address", required: true },
              { name: "phone", type: "tel", placeholder: "Phone Number" },
              { name: "date", type: "date", placeholder: "Date", required: true },
              { name: "time", type: "time", placeholder: "Time", required: true }
            ]}
            multiSelect={{
              name: "guests",              label: "Number of Guests",              options: ["1", "2", "3", "4", "5", "6", "7-10", "10+ (Private Event)"],
            }}
            textarea={{ name: "message", placeholder: "Special Requests (Dietary, Occasion, etc.)", rows: 4, required: false }}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterSimple
            columns={[
              {
                title: "Our Offerings",                items: [
                  { label: "Fine Dining", href: "/reservations#offerings" },
                  { label: "Private Events", href: "/reservations#offerings" },
                  { label: "Sommelier Selection", href: "/reservations#offerings" },
                  { label: "Rooftop Terrace", href: "/reservations#offerings" },
                ],
              },
              {
                title: "Grandioz",                items: [
                  { label: "Our Story", href: "/#about" },
                  { label: "Our Team", href: "/#team" },
                  { label: "Reviews", href: "/#testimonials" },
                  { label: "FAQ", href: "/#faq" },
                ],
              },
              {
                title: "Reservations",                items: [
                  { label: "Book a Table", href: "/reservations" },
                  { label: "+40 712 345 678", href: "tel:+40712345678" },
                  { label: "reservations@grandioz.com", href: "mailto:reservations@grandioz.com" },
                  { label: "Bucharest, Romania" },
                ],
              },
            ]}
            bottomLeftText="© 2026 Grandioz Restaurant"
            bottomRightText="All rights reserved"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}