"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function ConfigurePage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="large"
        background="none"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleApple
              navItems={[
                { name: "Home", id: "/" },
                { name: "Configure", id: "/configure" },
                { name: "Engineering", id: "/engineering" },
              ]}
              brandName="Aethelgard"
            />
        </div>

        <div id="configure-form" data-section="configure-form">
            <ContactSplitForm
                title="Configure Your AE-1"
                description="Select your interior trims, exterior colors, and performance wheels to build your dream machine."
                useInvertedBackground={false}
                inputs={[
                    { name: "exterior", type: "text", placeholder: "Exterior Color (e.g. Midnight Black)", required: true },
                    { name: "interior", type: "text", placeholder: "Interior Trim (e.g. Alcantara)", required: true }
                ]}
                multiSelect={{ name: "rims", label: "Select Wheels", options: ["Carbon Fiber - 20\"", "Forged Alloy - 20\"", "Lightweight Track - 19\""] }}
                textarea={{ name: "custom", placeholder: "Any additional performance requests?", rows: 4 }}
                buttonText="Submit Configuration"
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterBaseReveal
              logoText="AETHELGARD"
              columns={[
                {
                  title: "Vehicles",                  items: [
                    { label: "AE-1", href: "/configure" },
                    { label: "Performance", href: "/engineering" },
                  ],
                },
                {
                  title: "Company",                  items: [
                    { label: "Heritage", href: "#" },
                    { label: "Careers", href: "#" },
                  ],
                },
              ]}
              copyrightText="© 2024 Aethelgard Motorworks."
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}