"use client";

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

export default function AddFundsPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Home", id: "/" },
              { name: "Services", id: "/services" },
              { name: "Pricing", id: "/pricing" },
              { name: "My Orders", id: "/my-orders" },
              { name: "Add Funds", id: "/add-funds" },
              { name: "Profile", id: "/profile" },
              { name: "FAQ", id: "/faq" },
              { name: "Contact", id: "/contact" }
            ]}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            brandName="SocBoost"
            button={{
              text: "Register",              href: "/register"
            }}
          />
        </div>

        <div className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-background flex items-center justify-center">
          <div className="max-w-md w-full bg-card p-8 rounded-lg shadow-md border border-border">
            <h1 className="text-3xl font-bold text-foreground text-center mb-4">Add Funds</h1>
            <p className="text-md text-muted-foreground text-center mb-8">Top up your account balance securely.</p>

            <form className="space-y-6">
              <div>
                <label htmlFor="amount" className="block text-sm font-medium text-foreground">Amount</label>
                <div className="mt-1">
                  <input
                    type="number"
                    id="amount"
                    name="amount"
                    placeholder="Minimum $10.00"
                    className="block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
                    required
                    min="10"
                  />
                </div>
              </div>

              <div>
                <label htmlFor="paymentMethod" className="block text-sm font-medium text-foreground">Payment Method</label>
                <div className="mt-1">
                  <select
                    id="paymentMethod"
                    name="paymentMethod"
                    className="block w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
                    required
                  >
                    <option value="">Select a method</option>
                    <option value="creditCard">Credit Card</option>
                    <option value="paypal">PayPal</option>
                    <option value="crypto">Crypto</option>
                  </select>
                </div>
              </div>

              <div>
                <button
                  type="submit"
                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
                >
                  Add Funds
                </button>
              </div>
            </form>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              {
                title: "Services",                items: [
                  { label: "Instagram", href: "/services#instagram" },
                  { label: "YouTube", href: "/services#youtube" },
                  { label: "TikTok", href: "/services#tiktok" },
                  { label: "Twitter", href: "/services#twitter" },
                  { label: "Facebook", href: "/services#facebook" },
                  { label: "Telegram", href: "/services#telegram" },
                ],
              },
              {
                title: "Company",                items: [
                  { label: "About Us", href: "/#features" },
                  { label: "Pricing", href: "/pricing" },
                  { label: "FAQ", href: "/faq" },
                  { label: "Contact", href: "/contact" },
                ],
              },
              {
                title: "Legal",                items: [
                  { label: "Terms of Service", href: "/terms" },
                  { label: "Privacy Policy", href: "/privacy" },
                ],
              },
              {
                title: "Resources",                items: [
                  { label: "Blog", href: "#" },
                  { label: "API Docs", href: "#" },
                ],
              },
            ]}
            logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
            logoAlt="SocBoost Logo"
            logoText="SocBoost"
            copyrightText="© 2024 SocBoost. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
