"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import ContactText from '@/components/sections/contact/ContactText';

export default function PaymentPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="medium"
        background="noiseDiagonalGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleCentered
            navItems={[
                { name: "Home", id: "/" },
                { name: "Contact", id: "/contact" },
            ]}
            brandName="Neelam Beauty Salon"
            />
        </div>

        <div className="min-h-screen py-24 flex items-center justify-center">
            <div className="w-full max-w-lg p-8 rounded-3xl bg-white/50 backdrop-blur-md shadow-lg border border-white/20">
                <h1 className="text-3xl font-bold mb-6">Secure Payment</h1>
                <p className="mb-8 text-gray-600">Complete your payment gateway setup to finalize your booking.</p>
                <div className="space-y-4">
                    <div className="p-4 rounded-xl bg-white border border-gray-100">Payment Gateway Integration Active</div>
                    <div className="p-4 rounded-xl bg-white border border-gray-100">Transaction Security Enabled</div>
                    <button className="w-full py-3 bg-black text-white rounded-full font-semibold hover:bg-gray-800 transition">
                        Process Payment
                    </button>
                </div>
            </div>
        </div>

        <div id="contact" data-section="contact">
            <ContactText
                text="Need help with payments? Contact us today."
                background={{ variant: "gradient-bars" }}
                useInvertedBackground={true}
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterSimple
                columns={[]}
                logoText="Neelam Beauty Salon"
                bottomLeftText="© 2026 Neelam Beauty Salon"
                bottomRightText="All Rights Reserved"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}