"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { ShieldCheck, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="small"
        sizing="mediumSizeLargeTitles"
        background="none"
        cardStyle="outline"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Solución",          id: "about"},
        {
          name: "Ventajas",          id: "features"},
        {
          name: "Confianza",          id: "social-proof"},
        {
          name: "FAQ",          id: "faq"},
      ]}
      brandName="Xplouse"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "gradient-bars"}}
      title="Tu equipo decide. La IA ejecuta."
      description="Orquesta agentes, datos y decisiones críticas en un solo ecosistema gobernado. Con auditoría, trazabilidad y control end-to-end. Sin reemplazar lo que ya tienes."
      kpis={[
        {
          value: "100%",          label: "Trazabilidad"},
        {
          value: "48h",          label: "Diagnóstico"},
        {
          value: "ISO",          label: "Compliance"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Agendar diagnóstico técnico de 30 min",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/male-tourist-flying-with-airplane-using-laptop-browse-internet-website-sunset-flight-man-travelling-economy-class-arrive-holiday-destination-aerial-transport_482257-46702.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system-using-voice-controlled-sma_482257-2844.jpg",          alt: "Equipo tech"},
        {
          src: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg",          alt: "Especialista"},
        {
          src: "http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system_482257-8729.jpg",          alt: "Desarrollador"},
        {
          src: "http://img.b2bpic.net/free-photo/smart-application-tablet-placed-kitchen-desk-empty-house-automation-system-turning-l_482257-2747.jpg",          alt: "Analista"},
        {
          src: "http://img.b2bpic.net/free-photo/green-screen-mockup-laptop-accountant-working-office_482257-126537.jpg",          alt: "Consultor"},
      ]}
      avatarText="Más de 500+ expertos confían en Xplouse"
      marqueeItems={[
        {
          type: "text",          text: "Auditoría en tiempo real"},
        {
          type: "text-icon",          text: "Cumplimiento normativo",          icon: ShieldCheck,
        },
        {
          type: "text",          text: "Integración nativa"},
        {
          type: "text-icon",          text: "Orquestación escalable",          icon: Star,
        },
        {
          type: "text",          text: "Control de datos"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="IA Gobernada, Operación Asegurada"
      description="Xplouse transforma flujos de trabajo aislados en una orquestación centralizada. Proporcionamos la capa de control necesaria para ejecutar procesos financieros, legales y operativos sin fricción."
      bulletPoints={[
        {
          title: "Orquestación Centralizada",          description: "Conecta todos tus agentes y sistemas en una capa de control coherente."},
        {
          title: "Auditoría Real",          description: "Historial completo de cada decisión tomada por la IA con control total."},
        {
          title: "Continuidad Operativa",          description: "Implementa inteligencia sin desmantelar tu infraestructura técnica actual."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/conceptual-cloud-server-business-with-wooden-blocks-with-icons-dark-color-table-flat-lay_176474-10483.jpg"
      mediaAnimation="opacity"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",          title: "Orquestación de Agentes",          subtitle: "Coordina múltiples agentes IA para ejecución compleja.",          category: "Ejecución",          value: "Sincronizado"},
        {
          id: "f2",          title: "Capa de Gobernanza",          subtitle: "Control y cumplimiento integrados en cada nodo.",          category: "Gobernanza",          value: "Auditable"},
        {
          id: "f3",          title: "Compatibilidad Técnica",          subtitle: "Se integra con tu stack financiero y legal existente.",          category: "Integración",          value: "Native"},
      ]}
      title="El Ecosistema Xplouse"
      description="Potencia operativa diseñada para empresas que requieren precisión técnica y escala."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "99.9%",          title: "Disponibilidad",          items: [
            "SLA-backed",            "Entornos seguros"],
        },
        {
          id: "m2",          value: "48h",          title: "Diagnóstico",          items: [
            "Deep dive",            "Stack fit"],
        },
        {
          id: "m3",          value: "5x",          title: "Escalabilidad",          items: [
            "Menos fricción",            "Automatización"],
        },
      ]}
      title="Impacto Operativo"
      description="Resultados cuantificables en la eficiencia de procesos críticos."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "FinTech Alpha",        "LegalTech Solutions",        "RetailOps LATAM",        "Private Health",        "BankSecure",        "Global Logistics",        "Operations Hub"]}
      title="Empresas en Confianza"
      description="Líderes en LATAM que operan su gobernanza IA con Xplouse."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Carla Mendez",          handle: "COO, FinTech",          testimonial: "Xplouse nos dio la visibilidad que necesitábamos para escalar procesos críticos sin errores.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-her-office-businesswoman-sitting-with-her-notebook-writing-making_1258-194709.jpg"},
        {
          id: "2",          name: "Jorge Arana",          handle: "CTO, Retail",          testimonial: "Integrar Xplouse en nuestro stack actual fue impecable. La gobernanza es inigualable.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-priest-using-laptop_23-2149284668.jpg"},
        {
          id: "3",          name: "Elena Torres",          handle: "CEO, LegalTech",          testimonial: "La trazabilidad total de cada decisión IA nos permite operar con total confianza.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg"},
        {
          id: "4",          name: "Luis Rivera",          handle: "Legal Ops",          testimonial: "Cumplimiento normativo y velocidad operativa en un solo lugar. Esencial.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/confident-business-leader-sitting-table_1262-4870.jpg"},
        {
          id: "5",          name: "Maria Silva",          handle: "Finance Dir",          testimonial: "Reducción de cuellos de botella mediante una orquestación precisa.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg"},
      ]}
      showRating={true}
      title="Visión de Liderazgo"
      description="Lo que los directivos opinan sobre nuestra gobernanza operativa."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "¿Tengo que reemplazar mis sistemas actuales?",          content: "No. Xplouse es una capa de gobernanza que se integra con tu stack existente."},
        {
          id: "q2",          title: "¿Cómo garantizan la trazabilidad?",          content: "Cada acción y decisión de los agentes es auditada mediante logs inalterables."},
        {
          id: "q3",          title: "¿Qué tipos de procesos podemos automatizar?",          content: "Principalmente procesos de alto valor técnico y legal donde el control es crítico."},
      ]}
      sideTitle="Preguntas Frecuentes"
      sideDescription="Dudas sobre nuestra metodología de gobernanza técnica."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Contacto"
      title="Agenda tu diagnóstico técnico"
      description="Recibe un reporte de ajuste técnico para tu ecosistema de agentes IA en 48 horas."
      inputPlaceholder="tu-email@empresa.com"
      buttonText="Comenzar Auditoría Gratuita"
      imageSrc="http://img.b2bpic.net/free-photo/cybersecurity-concept-secure-data-transfer_23-2152001135.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Xplouse"
      copyrightText="© 2025 Xplouse. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}