"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import ContactCenter from '@/components/sections/contact/ContactCenter'; // Reusing ContactCenter for checkout form

export default function CheckoutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="subtle-shadow"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "/" },
              { name: "Services", id: "#services" },
              { name: "Barbers", id: "#barbers" },
              { name: "Pricing", id: "#pricing" },
              { name: "Testimonials", id: "#testimonials" },
              { name: "FAQ", id: "#faq" },
              { name: "Cart", id: "/cart" },
              { name: "Checkout", id: "/checkout" }
            ]}
            button={{ text: "Book Now", href: "#contact" }}
            brandName="The Modern Cut"
          />
        </div>

        <div id="checkout" data-section="checkout">
          <ContactCenter
            tag="Secure Payment"
            title="Complete Your Order"
            description="Enter your shipping and payment details to finalize your grooming appointment."
            inputPlaceholder="Your Email Address" // Repurpose for general contact info
            buttonText="Place Order"
            onSubmit={(email) => { console.log("Order placed for:", email); window.location.href = "/order-confirmation"; }}
            useInvertedBackground={true}
            background={{ variant: "plain" }}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="The Modern Cut"
            columns={[
              {
                title: "Services",                items: [
                  { label: "Haircuts", href: "#services" },
                  { label: "Shaves", href: "#services" },
                  { label: "Beard Trims", href: "#services" },
                  { label: "Styling", href: "#services" }
                ]
              },
              {
                title: "Company",                items: [
                  { label: "About Us", href: "#about" },
                  { label: "Our Team", href: "#barbers" },
                  { label: "Pricing", href: "#pricing" },
                  { label: "Contact", href: "#contact" }
                ]
              },
              {
                title: "Support",                items: [
                  { label: "FAQ", href: "#faq" },
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" }
                ]
              }
            ]}
            copyrightText="© 2024 The Modern Cut. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}