"use client";

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

export const metadata = {
  title: 'Contact Jay Rao',
  description: 'Reach out to Jay Rao for game development collaborations, job inquiries, or general discussions.',
};

export default function ContactPage() {
  const navItems = [
    {
      name: "Home",      id: "/"
    },
    {
      name: "About",      id: "/#about"
    },
    {
      name: "Skills",      id: "/#skills"
    },
    {
      name: "Projects",      id: "/#featured-projects"
    },
    {
      name: "Blog",      id: "/#blog"
    },
    {
      name: "Contact",      id: "/contact"
    }
  ];

  const footerColumns = [
    {
      title: "Quick Links",      items: [
        {
          label: "Home",          href: "/"
        },
        {
          label: "About",          href: "/#about"
        },
        {
          label: "Skills",          href: "/#skills"
        }
      ]
    },
    {
      title: "Projects",      items: [
        {
          label: "Featured Projects",          href: "/#featured-projects"
        },
        {
          label: "Full Portfolio",          href: "/#project-gallery"
        },
        {
          label: "Devlog",          href: "/#blog"
        }
      ]
    },
    {
      title: "Connect",      items: [
        {
          label: "Contact Me",          href: "/contact"
        },
        {
          label: "LinkedIn",          href: "https://linkedin.com/in/jayrao"
        },
        {
          label: "GitHub",          href: "https://github.com/jayrao"
        }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={navItems}
            logoSrc="http://img.b2bpic.net/free-vector/futuristic-samurai-skull-esports-gaming-logo_779267-3639.jpg"
            logoAlt="Jay Rao Logo"
            brandName="Jay Rao"
            bottomLeftText="Aspiring Game Dev"
            bottomRightText="connect@jayrao.dev"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Let's Connect & Collaborate"
            description="Whether you have a project idea, a job inquiry, or just want to chat about game development, I'm always open to new connections. Reach out using the form or connect via my social channels."
            inputs={[
              {
                name: "name",                type: "text",                placeholder: "Your Name",                required: true
              },
              {
                name: "email",                type: "email",                placeholder: "Your Email",                required: true
              },
              {
                name: "subject",                type: "text",                placeholder: "Subject",                required: true
              }
            ]}
            textarea={{
              name: "message",              placeholder: "Your Message",              rows: 5,
              required: true
            }}
            imageSrc="http://img.b2bpic.net/free-photo/view-messy-office-workspace-with-personal-computer_23-2150282047.jpg"
            imageAlt="Game development workstation"
            mediaAnimation="opacity"
            mediaPosition="left"
            buttonText="Send Message"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={footerColumns}
            logoText="Jay Rao"
            copyrightText="© 2024 Jay Rao. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
