"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';

export default function AccountPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              {name: "Home", id: "/#hero"},
              {name: "About", id: "/#about"},
              {name: "Products", id: "/#products"},
              {name: "Features", id: "/#features"},
              {name: "Testimonials", id: "/#testimonials"},
              {name: "Contact", id: "/#contact"},
              {name: "Signup", id: "/signup"},
              {name: "Order History", id: "/order-history"},
              {name: "Account", id: "/account"}
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            brandName="Elegance Atelier"
            button={{
              text: "Login", href: "/login"}}
            animateOnLoad={true}
          />
        </div>

        <main className="min-h-screen pt-[var(--navbar-height)] flex flex-col items-center justify-center p-4">
          <div className="max-w-screen-lg mx-auto py-16 text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-4 animate-entrance-slide">
              My Account
            </h1>
            <p className="text-lg md:text-xl text-foreground/80 mb-8 animate-entrance-slide delay-100">
              Manage your personal information, preferences, and security settings.
            </p>
            <p className="text-foreground/60 animate-entrance-slide delay-200">
              Content for interactive account management features will be displayed here.
            </p>
          </div>
        </main>
      </ReactLenis>
    </ThemeProvider>
  );
}