"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function ContactPage() {
  const navigationItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Portfolio", id: "portfolio" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Cartel",
      items: [
        { label: "Home", href: "/" },
        { label: "Services", href: "/services" },
        { label: "Portfolio", href: "/portfolio" },
        { label: "About", href: "/about" },
      ],
    },
    {
      title: "Operations",
      items: [
        { label: "Brand Strategy", href: "/services" },
        { label: "Web Design", href: "/services" },
        { label: "Content Creation", href: "/services" },
        { label: "Apply for Membership", href: "/contact" },
      ],
    },
    {
      title: "Connect",
      items: [
        { label: "Contact", href: "/contact" },
        { label: "Instagram", href: "#" },
        { label: "Twitter", href: "#" },
        { label: "LinkedIn", href: "#" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Code of Conduct", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="CATFISH CARTEL"
          navItems={navigationItems}
          button={{
            text: "Apply for Membership",
            href: "/contact",
          }}
        />
      </div>

      <div id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6 py-16 md:py-24">
        <div className="max-w-2xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl font-extrabold text-foreground mb-6">
            Apply for Membership
          </h1>
          <p className="text-lg text-gray-300 mb-12">
            Ready to join the cartel? Let us know your business and we'll evaluate your candidacy.
          </p>
        </div>
      </div>

      <div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-12 md:py-20">
        <div className="max-w-2xl mx-auto">
          <form className="space-y-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="firstName" className="block text-sm font-semibold text-foreground mb-2">
                  First Name
                </label>
                <input
                  type="text"
                  id="firstName"
                  name="firstName"
                  placeholder="Your first name"
                  className="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg text-foreground placeholder-gray-500 focus:outline-none focus:border-primary-cta"
                />
              </div>
              <div>
                <label htmlFor="lastName" className="block text-sm font-semibold text-foreground mb-2">
                  Last Name
                </label>
                <input
                  type="text"
                  id="lastName"
                  name="lastName"
                  placeholder="Your last name"
                  className="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg text-foreground placeholder-gray-500 focus:outline-none focus:border-primary-cta"
                />
              </div>
            </div>

            <div>
              <label htmlFor="email" className="block text-sm font-semibold text-foreground mb-2">
                Email Address
              </label>
              <input
                type="email"
                id="email"
                name="email"
                placeholder="your@email.com"
                className="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg text-foreground placeholder-gray-500 focus:outline-none focus:border-primary-cta"
              />
            </div>

            <div>
              <label htmlFor="company" className="block text-sm font-semibold text-foreground mb-2">
                Company Name
              </label>
              <input
                type="text"
                id="company"
                name="company"
                placeholder="Your business name"
                className="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg text-foreground placeholder-gray-500 focus:outline-none focus:border-primary-cta"
              />
            </div>

            <div>
              <label htmlFor="tier" className="block text-sm font-semibold text-foreground mb-2">
                Membership Tier Interest
              </label>
              <select
                id="tier"
                name="tier"
                className="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg text-foreground focus:outline-none focus:border-primary-cta"
              >
                <option value="">Select a tier</option>
                <option value="associate">Associate ($5,000)</option>
                <option value="made-member">Made Member ($12,000)</option>
                <option value="inner-circle">Inner Circle ($25,000/year)</option>
              </select>
            </div>

            <div>
              <label htmlFor="message" className="block text-sm font-semibold text-foreground mb-2">
                Tell Us About Your Business
              </label>
              <textarea
                id="message"
                name="message"
                rows={6}
                placeholder="Describe your business, goals, and why you want to join the cartel..."
                className="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg text-foreground placeholder-gray-500 focus:outline-none focus:border-primary-cta resize-none"
              ></textarea>
            </div>

            <div className="flex items-center space-x-3">
              <input
                type="checkbox"
                id="terms"
                name="terms"
                className="w-5 h-5 rounded border-gray-700 text-primary-cta focus:ring-primary-cta"
              />
              <label htmlFor="terms" className="text-sm text-gray-300">
                I agree to the confidentiality agreement and understand the terms of membership
              </label>
            </div>

            <button
              type="submit"
              className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text font-semibold rounded-lg hover:bg-opacity-90 transition-colors duration-200"
            >
              Submit Application
            </button>
          </form>

          <div className="mt-12 pt-12 border-t border-gray-700">
            <h3 className="text-lg font-semibold text-foreground mb-4">Questions?</h3>
            <p className="text-gray-300 mb-4">
              Reach out to us directly and we'll guide you through the membership process.
            </p>
            <div className="space-y-2">
              <p className="text-gray-400">
                <span className="text-primary-cta font-semibold">Email:</span> contact@catfishcartel.com
              </p>
              <p className="text-gray-400">
                <span className="text-primary-cta font-semibold">Hours:</span> Mon-Fri, 10am-6pm EST
              </p>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Catfish Cartel. All transformations confidential."
          bottomRightText="We make the magic. You take the credit."
        />
      </div>
    </ThemeProvider>
  );
}