"use client";

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

export default function RegistrationPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLarge"
        background="noise"
        cardStyle="gradient-mesh"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleFullscreen
              navItems={[
                { name: "Home", id: "/" },
                { name: "Register", id: "/register" }
              ]}
              brandName="TRONA AI"
            />
        </div>

        <div className="min-h-screen pt-32 pb-20 flex items-center justify-center">
            <ContactForm 
              title="Create Your Account"
              description="Join Trona AI to start mastering market probability with professional tools."
              tag="Register"
              inputPlaceholder="Enter your email"
              buttonText="Register Now"
              onSubmit={(email) => console.log("User registered with email:", email)}
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterCard
              logoText="TRONA AI"
              copyrightText="© 2024 Trona AI. All rights reserved."
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}