"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function CheckoutPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="text-stagger" 
      defaultTextAnimation="entrance-slide" 
      borderRadius="rounded" 
      contentWidth="medium" 
      sizing="medium" 
      background="circleGradient" 
      cardStyle="glass-elevated" 
      primaryButtonStyle="gradient" 
      secondaryButtonStyle="glass" 
      headingFontWeight="normal"
    >
      <NavbarStyleFullscreen
        brandName="GreenScape"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Services", id: "/#services" },
          { name: "Cart", id: "/cart" },
        ]}
      />
      <main className="container mx-auto px-6 py-20 min-h-[60vh]">
        <h1 className="text-4xl font-bold mb-10">Checkout</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div>
                <h2 className="text-2xl font-semibold mb-6">Billing Details</h2>
                <p>Form placeholder for user info and payment integration.</p>
            </div>
            <div className="bg-card p-8 rounded-xl">
                <h2 className="text-2xl font-semibold mb-6">Order Summary</h2>
                <p>Order details placeholder.</p>
            </div>
        </div>
      </main>
      <FooterSimple
        columns={[]}
        bottomLeftText="© 2026 GreenScape"
        bottomRightText="All rights reserved."
      />
    </ThemeProvider>
  );
}