"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles, Zap, TrendingUp, Mail } from "lucide-react";

export default function LoginPage() {
  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="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Bienvenido a Gextras"
          description="Accede a tu cuenta para gestionar oportunidades, ver ofertas disponibles y conectar con el talento o las empresas que buscas."
          tag="Portal de Acceso"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Crear Cuenta",
              href: "/signup",
            },
            {
              text: "Recuperar Contraseña",
              href: "/login",
            },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/general-business-invoice-template_23-2148959395.jpg"
          imageAlt="Sistema seguro de acceso Gextras"
          mediaAnimation="blur-reveal"
          testimonials={[
            {
              name: "Carlos Méndez",
              handle: "@cmendez_eventos",
              testimonial: "Con Gextras cubrimos nuestro evento de 200 personas en menos de 2 horas. Increíble.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-nerdy-waitress-work_329181-2082.jpg",
            },
            {
              name: "María López",
              handle: "@mlopez_hostelera",
              testimonial: "Ganamos más flexibilidad y confianza. El sistema es tan rápido que no lo creemos.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-overalls-beret-against-wooden-wall_627829-6901.jpg",
            },
            {
              name: "Roberto García",
              handle: "@rgarcia_hotel",
              testimonial: "Hemos reducido tiempos de contratación al 80%. Gextras es imprescindible.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/3-young-workers-office_1301-5371.jpg",
            },
            {
              name: "Sofía Ruiz",
              handle: "@sruiz_staff",
              testimonial: "Finalmente trabajo cuando quiero. Gextras me dio libertad y oportunidades.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-doing-pottery_23-2148944912.jpg",
            },
          ]}
          testimonialRotationInterval={5000}
          useInvertedBackground={false}
          background={{
            variant: "radial-gradient",
          }}
        />
      </div>

      <div id="why-gextras" data-section="why-gextras">
        <FeatureCardSeven
          title="Por Qué Elegir Gextras"
          description="La plataforma más rápida y confiable para conectar talento hospitalario con oportunidades de crecimiento."
          tag="Ventajas Exclusivas"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Conoce Más",
              href: "/signup",
            },
          ]}
          buttonAnimation="slide-up"
          textboxLayout="split"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Seguridad y Confianza",
              description: "Todos los perfiles verificados con encriptación de nivel empresarial. Protegemos tus datos personales y profesionales.",
              imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg",
              imageAlt: "Sistema de seguridad verificado",
            },
            {
              id: 2,
              title: "Soporte Profesional",
              description: "Nuestro equipo está disponible para resolver tus dudas y ayudarte a maximizar tus oportunidades en la plataforma.",
              imageSrc: "http://img.b2bpic.net/free-photo/hr-employers-analyzing-candidate-cv-after-job-interview_482257-101456.jpg",
              imageAlt: "Equipo de soporte dedicado",
            },
            {
              id: 3,
              title: "Tecnología Innovadora",
              description: "Algoritmos inteligentes que conectan el talento correcto con las oportunidades adecuadas en tiempo real.",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-woman-using-mobile-phone-text-messaging-night-home_637285-4411.jpg",
              imageAlt: "Tecnología de matching inteligente",
            },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Nuestro Crecimiento"
          description="Datos que demuestran el impacto y la confiabilidad de Gextras en la industria hospitalaria."
          tag="Éxito Comprobado"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="centered"
          animationType="slide-up"
          useInvertedBackground={false}
          metrics={[
            {
              id: "users",
              title: "Usuarios Activos",
              subtitle: "empresas y trabajadores",
              category: "Comunidad",
              value: "75K+",
            },
            {
              id: "placements",
              title: "Colocaciones Exitosas",
              subtitle: "cada mes",
              category: "Logros",
              value: "12K+",
            },
            {
              id: "rating",
              title: "Calificación Promedio",
              subtitle: "de nuestros usuarios",
              category: "Satisfacción",
              value: "4.8/5",
            },
            {
              id: "countries",
              title: "Disponibilidad",
              subtitle: "en principales ciudades",
              category: "Cobertura",
              value: "España",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Inicia Tu Viaje"
          title="¿Necesitas Ayuda Para Acceder?"
          description="Si tienes problemas con tu cuenta o necesitas asistencia, estamos aquí para ayudarte. Contáctanos y te responderemos rápidamente."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{
            variant: "radial-gradient",
          }}
          useInvertedBackground={false}
          inputPlaceholder="Tu correo de cuenta"
          buttonText="Solicitar Ayuda"
          termsText="Nos pondremos en contacto contigo lo antes posible. Respetamos tu privacidad y nunca compartiremos tu información."
          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>
  );
}