"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SplitAbout from '@/components/sections/about/SplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="outline"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Inicio",
          id: "/",
        },
        {
          name: "Servicios",
          id: "/servicios",
        },
        {
          name: "Precios",
          id: "/precios",
        },
        {
          name: "Cómo Trabajamos",
          id: "/como-trabajamos",
        },
        {
          name: "Portfolio",
          id: "/portfolio",
        },
      ]}
      button={{
        text: "Hablar por WhatsApp",
        href: "https://wa.me/59162650814",
      }}
      logoSrc="http://img.b2bpic.net/free-photo/colorful-abstract-geometric-wallpaper_23-2151898349.jpg"
      logoAlt="Nexo AI Studio Logo"
      brandName="NEXO AI STUDIO"
    />
  </div>

  <div id="proceso-intro" data-section="proceso-intro">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Nuestro Proceso de Trabajo"
      description="Transparencia y eficiencia en cada paso. Así convertimos tus ideas más ambiciosas en contenido IA impactante y de alta calidad."
      bulletPoints={[
        {
          title: "Claridad total",
          description: "Desde el inicio, sabes qué esperar y cómo avanzará tu proyecto.",
        },
        {
          title: "Colaboración activa",
          description: "Tu visión es clave en cada etapa del desarrollo del contenido.",
        },
        {
          title: "Entrega impecable",
          description: "Recibe contenido listo para usar, optimizado para tus plataformas.",
        },
      ]}
      mediaAnimation="opacity"
      imageSrc="http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301567.jpg"
      imageAlt="AI workflow illustration, interconnected nodes, efficient process, cinematic dark, blue red accents"
    />
  </div>

  <div id="proceso-detalles" data-section="proceso-detalles">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "paso-det-1",
          value: "Paso 1",
          title: "Ideación y Consulta",
          items: [
            "Entendemos tus objetivos de marca.",
            "Definimos la audiencia y el mensaje.",
          ],
        },
        {
          id: "paso-det-2",
          value: "Paso 2",
          title: "Estrategia de Contenido",
          items: [
            "Desarrollamos una estrategia personalizada de IA.",
            "Seleccionamos el formato y estilo más efectivos.",
          ],
        },
        {
          id: "paso-det-3",
          value: "Paso 3",
          title: "Diseño y Conceptualización",
          items: [
            "Creamos storyboards y diseños de escenas.",
            "Aprobación de dirección visual y tono.",
          ],
        },
        {
          id: "paso-det-4",
          value: "Paso 4",
          title: "Generación y Edición IA",
          items: [
            "La IA genera los elementos audiovisuales.",
            "Edición cinematográfica y post-producción humana.",
          ],
        },
        {
          id: "paso-det-5",
          value: "Paso 5",
          title: "Revisión y Feedback",
          items: [
            "Te presentamos los borradores del contenido.",
            "Iteramos basándonos en tu feedback para la perfección.",
          ],
        },
        {
          id: "paso-det-6",
          value: "Paso 6",
          title: "Entrega Final y Publicación",
          items: [
            "Recibes el contenido en alta calidad, listo para tus plataformas.",
            "Soporte post-entrega para cualquier ajuste.",
          ],
        },
      ]}
      title="Paso a Paso hacia el Éxito de tu Marca"
      description="Detalle de cada etapa de nuestro proceso, diseñado para la máxima eficiencia y resultados sobresalientes."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Navegación",
          items: [
            {
              label: "Inicio",
              href: "/",
            },
            {
              label: "Servicios",
              href: "/servicios",
            },
            {
              label: "Precios",
              href: "/precios",
            },
            {
              label: "Cómo Trabajamos",
              href: "/como-trabajamos",
            },
            {
              label: "Portfolio",
              href: "/portfolio",
            },
          ],
        },
        {
          title: "Compañía",
          items: [
            {
              label: "Nosotros",
              href: "/nosotros",
            },
            {
              label: "Contacto",
              href: "/contacto",
            },
            {
              label: "Privacidad",
              href: "#",
            },
            {
              label: "Términos",
              href: "#",
            },
          ],
        },
        {
          title: "Recursos",
          items: [
            {
              label: "Blog",
              href: "#",
            },
            {
              label: "Ayuda",
              href: "#",
            },
            {
              label: "FAQs",
              href: "/precios#faqs",
            },
          ],
        },
      ]}
      bottomLeftText="2024 © Nexo AI Studio. Todos los derechos reservados."
      bottomRightText="Diseñado con ❤️ por Webuild"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
