fbc034e6-ad7e-4171-aed0-91d4fded13fb/src/app/checkout/page.tsx

"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ShoppingCart, CreditCard } from 'lucide-react';
import { useState } from 'react';
import Input from '@/components/form/Input';

export default function CheckoutPage() {
  const [email, setEmail] = useState('');
  const [fullName, setFullName] = useState('');
  const [address, setAddress] = useState('');
  const [city, setCity] = useState('');
  const [postalCode, setPostalCode] = useState('');
  const [cardNumber, setCardNumber] = useState('');

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="OAC"
          navItems={[
            { name: "Shop", id: "shop" },
            { name: "Tournament", id: "tournament" },
            { name: "Gallery", id: "gallery" },
            { name: "Community", id: "community" },
            { name: "Power Stats", id: "power-stats" }
          ]}
          button={{ text: "Cart", href: "/cart" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Checkout"
          description="Complete your order and receive your premium OAC merchandise. Secure payment processing ensures safe transactions."
          tag="Secure Checkout"
          tagIcon={CreditCard}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Back to Cart", href: "/cart" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
          imageAlt="Secure checkout"
          showDimOverlay={false}
          showBlur={true}
          ariaLabel="Checkout Page Hero"
        />
      </div>

      <div id="checkout-form" data-section="checkout-form">
        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl">
          <form className="space-y-8">
            {/* Shipping Information */}
            <div>
              <h3 className="text-xl font-bold mb-4">Shipping Information</h3>
              <div className="space-y-4">
                <Input
                  value={email}
                  onChange={setEmail}
                  type="email"
                  placeholder="Email address"
                  required
                />
                <Input
                  value={fullName}
                  onChange={setFullName}
                  type="text"
                  placeholder="Full name"
                  required
                />
                <Input
                  value={address}
                  onChange={setAddress}
                  type="text"
                  placeholder="Street address"
                  required
                />
                <div className="grid grid-cols-2 gap-4">
                  <Input
                    value={city}
                    onChange={setCity}
                    type="text"
                    placeholder="City"
                    required
                  />
                  <Input
                    value={postalCode}
                    onChange={setPostalCode}
                    type="text"
                    placeholder="Postal code"
                    required
                  />
                </div>
              </div>
            </div>

            {/* Payment Information */}
            <div>
              <h3 className="text-xl font-bold mb-4">Payment Information</h3>
              <div className="space-y-4">
                <Input
                  value={cardNumber}
                  onChange={setCardNumber}
                  type="text"
                  placeholder="Card number"
                  required
                />
                <div className="grid grid-cols-2 gap-4">
                  <Input
                    value=""
                    onChange={() => {}}
                    type="text"
                    placeholder="MM/YY"
                    required
                  />
                  <Input
                    value=""
                    onChange={() => {}}
                    type="text"
                    placeholder="CVV"
                    required
                  />
                </div>
              </div>
            </div>

            {/* Order Summary */}
            <div className="bg-foreground/5 rounded-lg p-6">
              <h3 className="text-lg font-bold mb-4">Order Summary</h3>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span>Subtotal</span>
                  <span>$0.00</span>
                </div>
                <div className="flex justify-between">
                  <span>Shipping</span>
                  <span>$0.00</span>
                </div>
                <div className="flex justify-between">
                  <span>Tax</span>
                  <span>$0.00</span>
                </div>
                <div className="flex justify-between font-bold text-lg border-t border-foreground/10 pt-2 mt-2">
                  <span>Total</span>
                  <span className="text-primary-cta">$0.00</span>
                </div>
              </div>
            </div>

            {/* Buttons */}
            <div className="flex gap-4">
              <button
                type="submit"
                className="flex-1 bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90"
              >
                Complete Purchase
              </button>
              <button
                type="button"
                className="flex-1 border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-foreground/5"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="OAC Command Center"
          leftLink={{ text: "Shop", href: "/shop" }}
          rightLink={{ text: "Cart", href: "/cart" }}
          ariaLabel="Footer Navigation"
        />
      </div>
    </ThemeProvider>
  );
}