"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function CheckoutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              { name: "Home", id: "/" },
              { name: "About", id: "/#about" },
              { name: "Products", id: "/#products" },
              { name: "Education", id: "/#education" },
              { name: "Testimonials", id: "/#testimonials" },
              { name: "Contact", id: "/#contact" },
              { name: "Checkout", id: "/checkout" }
            ]}
            brandName="The Vegan Marie"
          />
        </div>

        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-200px)] py-16 px-4 md:px-8">
          <h1 className="text-4xl md:text-5xl font-extrabold text-foreground mb-6 text-center">
            Secure Checkout
          </h1>
          <p className="text-lg text-foreground-secondary text-center max-w-2xl mb-12">
            Complete your purchase with our secure payment system. Thank you for choosing The Vegan Marie!
          </p>
          <div className="w-full max-w-xl p-8 bg-card rounded-xl shadow-lg border border-accent/20">
            {/* Placeholder for payment integration */}
            <div className="text-center text-foreground-secondary text-xl min-h-32 flex items-center justify-center border-2 border-dashed border-accent/40 rounded-lg p-4">
              Payment Integration Coming Soon...
            </div>
            <button className="mt-8 w-full py-3 px-6 bg-primary-cta text-white font-semibold rounded-lg hover:opacity-90 transition-opacity duration-300">
              Continue to Payment
            </button>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="The Vegan Marie"
            columns={[
              {
                title: "Shop",                items: [
                  { label: "Herbal Teas", href: "/#products" },
                  { label: "Herbal Powders", href: "/#products" },
                  { label: "Sea Moss Blends", href: "/#products" },
                  { label: "Remedies & Roots", href: "/#products" }
                ]
              },
              {
                title: "Learn",                items: [
                  { label: "Our Story", href: "/#about" },
                  { label: "Herbal Benefits", href: "/#features" },
                  { label: "Wellness Education", href: "/#education" },
                  { label: "FAQ", href: "/#faq" }
                ]
              },
              {
                title: "Connect",                items: [
                  { label: "Contact Us", href: "/#contact" },
                  { label: "Shipping & Returns", href: "#" },
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" }
                ]
              }
            ]}
            copyrightText="© 2024 The Vegan Marie. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}