"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';

export default function CheckoutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
                { name: "Home", id: "/" },
                { name: "Shop", id: "/checkout" },
                { name: "Contact", id: "/contact" }
            ]}
            brandName="Frituur Op Den Hoek"
          />
        </div>
        <div className="py-24 px-6 text-center">
           <h1 className="text-4xl font-bold mb-8">Checkout</h1>
           <p className="mb-12">Betaal uw bestelling veilig via onze integratie.</p>
           <ContactSplitForm 
             title="Betalingsgegevens"
             description="Vul uw gegevens in om de bestelling af te ronden."
             inputs={[
                { name: "naam", type: "text", placeholder: "Naam" },
                { name: "email", type: "email", placeholder: "Email" }
             ]}
           />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}