ceaf7ba2-f51c-4d3e-b157-64ec50be8ff3/src/app/signup/page.tsx

"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import Input from "@/components/form/Input";
import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function SignupPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handleSignup = (e: React.FormEvent) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      alert("Passwords do not match!");
      return;
    }
    console.log("Signup attempt with:", { email, password });
    // Implement actual signup logic here
  };

  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="flex min-h-[calc(100vh-200px)] items-center justify-center p-4">
          <div className="w-full max-w-md p-8 space-y-6 rounded-lg shadow-xl bg-card text-foreground">
            <h2 className="text-3xl font-bold text-center">Create an Account</h2>
            <form onSubmit={handleSignup} className="space-y-4">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
                <Input
                  id="email"
                  type="email"
                  value={email}
                  onChange={setEmail}
                  placeholder="you@example.com"
                  required
                  className="mt-1 block w-full"
                />
              </div>
              <div>
                <label htmlFor="password" className="block text-sm font-medium text-foreground">Password</label>
                <Input
                  id="password"
                  type="password"
                  value={password}
                  onChange={setPassword}
                  placeholder="••••••••"
                  required
                  className="mt-1 block w-full"
                />
              </div>
              <div>
                <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">Confirm Password</label>
                <Input
                  id="confirmPassword"
                  type="password"
                  value={confirmPassword}
                  onChange={setConfirmPassword}
                  placeholder="••••••••"
                  required
                  className="mt-1 block w-full"
                />
              </div>
              <ButtonTextStagger
                text="Sign Up"
                type="submit"
                className="w-full justify-center"
              />
            </form>
            <p className="text-center text-sm text-foreground">
              Already have an account?{" "}
              <Link href="/login" className="text-primary-cta hover:underline">
                Login
              </Link>
            </p>
          </div>
        </main>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            columns={[
              {
                items: [
                  { label: "Home", href: "#hero" },
                  { label: "About Us", href: "#about" },
                  { label: "Collections", href: "#products" },
                  { label: "Membership", href: "#pricing" },
                ],
              },
              {
                items: [
                  { label: "Contact", href: "#contact" },
                  { label: "FAQ", href: "#faq" },
                  { label: "Login", href: "/login" },
                  { label: "Signup", href: "/signup" },
                  { label: "Order History", href: "/order-history" },
                  { label: "Account", href: "/account" },
                ],
              },
              {
                items: [
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" },
                  { label: "Shipping & Returns", href: "#" },
                ],
              },
            ]}
            logoText="Elegance Atelier"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}