"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 SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles, Zap, CheckCircle, Award, Shield, TrendingUp, HelpCircle, Mail } from "lucide-react";

export default function SignupPage() {
  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="Conecta Tu Talento Hospitalario en Segundos"
          description="Gextras es la plataforma inteligente que une empresas de eventos, restaurantes y hoteles con personal calificado de forma inmediata, organizada y confiable."
          tag="Revolución Hospitalaria"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Para Empresas",
              href: "/signup?type=business",
            },
            {
              text: "Para Trabajadores",
              href: "/signup?type=worker",
            },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/general-business-invoice-template_23-2148959395.jpg?_wi=2"
          imageAlt="Dashboard de gestión de personal 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?_wi=2",
            },
            {
              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?_wi=2",
            },
            {
              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?_wi=2",
            },
            {
              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?_wi=2",
            },
          ]}
          testimonialRotationInterval={5000}
          useInvertedBackground={false}
          background={{
            variant: "radial-gradient",
          }}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardSeven
          title="Cómo Funciona Gextras"
          description="Un flujo de trabajo simple, transparente y diseñado para ahorrar tiempo a empresas y crear oportunidades para trabajadores."
          tag="Proceso Inteligente"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Explora Más",
              href: "#benefits",
            },
          ]}
          buttonAnimation="slide-up"
          textboxLayout="split"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Empresas Publican Ofertas",
              description: "Restaurantes, hoteles y empresas de eventos crean ofertas de trabajo con detalles específicos, horarios y requerimientos en minutos.",
              imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg?_wi=2",
              imageAlt: "Empresas publicando ofertas de trabajo",
            },
            {
              id: 2,
              title: "Trabajadores Se Postulan",
              description: "Personal calificado accede a ofertas disponibles, revisa perfiles verificados y se postula para posiciones que se adapten a su disponibilidad.",
              imageSrc: "http://img.b2bpic.net/free-photo/hr-employers-analyzing-candidate-cv-after-job-interview_482257-101456.jpg?_wi=2",
              imageAlt: "Trabajadores explorando oportunidades",
            },
            {
              id: 3,
              title: "Contratación Instantánea",
              description: "Las empresas confirman al personal seleccionado y reciben detalles completos del trabajador. Todo se sincroniza automáticamente en tiempo real.",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-woman-using-mobile-phone-text-messaging-night-home_637285-4411.jpg?_wi=2",
              imageAlt: "Confirmación instantánea de contratación",
            },
          ]}
        />
      </div>

      <div id="businesses" data-section="businesses">
        <FeatureCardSeven
          title="Beneficios Para Empresas"
          description="Acceso inmediato a talento verificado, control total del proceso y herramientas que automatizan tu gestión de personal."
          tag="Control Absoluto"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Comienza Ahora",
              href: "/signup?type=business",
            },
          ]}
          buttonAnimation="slide-up"
          textboxLayout="split"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Acceso Instantáneo a Talento",
              description: "Encuentra y contrata personal en cuestión de horas, no días. Gextras te conecta con profesionales verificados y disponibles.",
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-working-together-office_23-2149307826.jpg?_wi=2",
              imageAlt: "Acceso rápido a talento verificado",
            },
            {
              id: 2,
              title: "Gestión Organizada",
              description: "Gestiona ofertas, aplicantes, contratos y nóminas desde un único dashboard intuitivo. Sin papeleos, solo eficiencia.",
              imageSrc: "http://img.b2bpic.net/free-photo/chef-working-together-professional-kitchen_23-2149727979.jpg?_wi=2",
              imageAlt: "Panel de control de gestión de personal",
            },
          ]}
        />
      </div>

      <div id="workers" data-section="workers">
        <FeatureCardSeven
          title="Oportunidades Para Trabajadores"
          description="Trabaja cuando quieras, donde quieras. Gextras te conecta con empresas de prestigio que valoran tu experiencia."
          tag="Libertad Profesional"
          tagIcon={Award}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Únete a Gextras",
              href: "/signup?type=worker",
            },
          ]}
          buttonAnimation="slide-up"
          textboxLayout="split"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Flexibilidad Total",
              description: "Elige los trabajos que se adapten a tu horario. Sin contratos fijos. Tú tienes el control de tu disponibilidad.",
              imageSrc: "http://img.b2bpic.net/free-photo/store-mockup-device-used-as-advertising_482257-76227.jpg?_wi=2",
              imageAlt: "Trabajador eligiendo sus propias oportunidades",
            },
            {
              id: 2,
              title: "Ingresos Confiables",
              description: "Gana dinero consistente a través de trabajos verificados y pagos garantizados. Tu experiencia vale.",
              imageSrc: "http://img.b2bpic.net/free-photo/mobile-payment_1098-16079.jpg?_wi=2",
              imageAlt: "Sistema de pagos seguro y rápido",
            },
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          names={[
            "Restaurantes Premium",
            "Cadenas Hoteleras",
            "Organizadores de Eventos",
            "Catering Profesional",
            "Espacios de Eventos",
            "Agencias de Viajes",
            "Plataformas Digitales",
          ]}
          logos={[
            "http://img.b2bpic.net/free-vector/elegant-golden-furniture-logo-template_23-2148457950.jpg",
            "http://img.b2bpic.net/free-vector/hotel-logo-black-business-corporate-identity-set_53876-114181.jpg",
            "http://img.b2bpic.net/free-vector/flat-elegant-business-card-template_23-2148234505.jpg",
            "http://img.b2bpic.net/free-vector/set-linear-flat-catering-logos_23-2149008813.jpg",
            "http://img.b2bpic.net/free-psd/international-yoga-day-invitation-template_23-2150393756.jpg",
            "http://img.b2bpic.net/free-vector/travel-sticker-collection-70s-style_23-2148393493.jpg",
            "http://img.b2bpic.net/free-psd/flat-design-fashion-template_23-2150295080.jpg",
          ]}
          title="Confían en Gextras"
          description="Miles de empresas líderes en hospitalidad ya optimizan su gestión de personal con nuestra plataforma inteligente."
          tag="Confianza Comprobada"
          tagIcon={Shield}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Impacto Real"
          description="Números que hablan de nuestra efectividad en conectar talento con oportunidades."
          tag="Resultados Comprobados"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          metrics={[
            {
              id: "coverage",
              title: "Ofertas Cubiertas",
              subtitle: "en menos de 2 horas",
              category: "Velocidad",
              value: "95%",
            },
            {
              id: "workers",
              title: "Trabajadores Activos",
              subtitle: "verificados y confiables",
              category: "Comunidad",
              value: "50K+",
            },
            {
              id: "satisfaction",
              title: "Satisfacción Empresas",
              subtitle: "según nuestras encuestas",
              category: "Calidad",
              value: "4.9/5",
            },
            {
              id: "saved",
              title: "Horas Ahorradas",
              subtitle: "en gestión mensual",
              category: "Eficiencia",
              value: "200K",
            },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Preguntas Frecuentes"
          description="Encuentra respuestas rápidas sobre cómo funciona Gextras, seguridad y cómo comenzar."
          tag="Soporte Disponible"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "¿Más Dudas?",
              href: "/login",
            },
          ]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          animationType="smooth"
          faqsAnimation="blur-reveal"
          useInvertedBackground={false}
          faqs={[
            {
              id: "faq-1",
              title: "¿Cómo verifican a los trabajadores?",
              content: "Todos nuestros trabajadores pasan por un proceso de verificación de identidad, antecedentes y referencias profesionales. Nos aseguramos de que cada perfil sea confiable antes de conectarlo con empresas.",
            },
            {
              id: "faq-2",
              title: "¿Cuál es el costo para las empresas?",
              content: "Ofrecemos un modelo flexible con comisiones transparentes por cada contratación exitosa. No hay cuotas mensuales ocultas. Contacta a nuestro equipo para planes personalizados.",
            },
            {
              id: "faq-3",
              title: "¿Cómo reciben pago los trabajadores?",
              content: "Los trabajadores reciben pagos automáticos después de cada jornada completada. Transferencias directas a su cuenta bancaria sin demoras.",
            },
            {
              id: "faq-4",
              title: "¿Puedo cancelar una contratación?",
              content: "Las políticas de cancelación dependen del momento. Contáctanos para detalles específicos, pero siempre protegemos ambos lados del acuerdo.",
            },
            {
              id: "faq-5",
              title: "¿Es segura mi información en Gextras?",
              content: "Usamos encriptación de nivel empresarial y cumplimos con todas las regulaciones de protección de datos. Tu privacidad es nuestra prioridad máxima.",
            },
            {
              id: "faq-6",
              title: "¿En qué ciudades operamos?",
              content: "Comenzamos en ciudades principales españolas con planes de expansión. Verifica la disponibilidad en tu zona al registrarte en nuestra plataforma.",
            },
          ]}
        />
      </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>
  );
}