"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Mail } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Cómo Funciona", id: "how-it-works" },
    { name: "Para Empresas", id: "for-businesses" },
    { name: "Para Trabajadores", id: "for-workers" },
    { name: "FAQ", id: "faq" },
  ];

  const handleContactSubmit = (email: string) => {
    console.log("Contact form submitted with email:", email);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Gextras"
          navItems={navItems}
          button={{
            text: "Inicia Sesión",
            href: "/login",
          }}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Conectemos"
          title="¿Listo Para Transformar Tu Gestión de Personal?"
          description="Únete a miles de empresas y trabajadores que ya están aprovechando la velocidad y eficiencia de Gextras. Comienza hoy."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{
            variant: "radial-gradient",
          }}
          useInvertedBackground={false}
          inputPlaceholder="Tu correo profesional"
          buttonText="Comienza Ahora"
          termsText="Al registrarte, aceptas nuestros Términos de Servicio y Política de Privacidad. Nos comprometemos a tu confianza."
          onSubmit={handleContactSubmit}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Gextras"
          leftLink={{
            text: "Política de Privacidad",
            href: "#",
          }}
          rightLink={{
            text: "Términos de Servicio",
            href: "#",
          }}
        />
      </div>
    </ThemeProvider>
  );
}