"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
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="portfolio-intro" data-section="portfolio-intro">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Nuestro Portafolio de Proyectos"
      description="Explora la calidad cinematográfica y el impacto de nuestro trabajo con Inteligencia Artificial. Cada proyecto es una muestra de innovación y creatividad."
      bulletPoints={[
        {
          title: "Diversidad Creativa",
          description: "Descubre una amplia gama de estilos y soluciones de contenido.",
        },
        {
          title: "Impacto Comprobado",
          description: "Proyectos que han ayudado a marcas a conectar y vender más.",
        },
        {
          title: "Innovación Constante",
          description: "La IA en acción, produciendo resultados que te sorprenderán.",
        },
      ]}
      mediaAnimation="opacity"
      imageSrc="http://img.b2bpic.net/free-photo/top-view-blue-powder-color-spread-plain-surface_23-2148054329.jpg"
      imageAlt="AI portfolio showcase, abstract cinematic art, dark gallery, vibrant blue red highlights"
    />
  </div>

  <div id="portfolio-grid" data-section="portfolio-grid">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "proyecto-1",
          name: "Campaña de Lanzamiento 'Aura'",
          price: "Video Ads",
          imageSrc: "http://img.b2bpic.net/free-photo/set-clean-cups_23-2147775841.jpg",
          imageAlt: "AI generated car ad",
        },
        {
          id: "proyecto-2",
          name: "Mascota 3D 'Sparky'",
          price: "Personajes 3D",
          imageSrc: "http://img.b2bpic.net/free-photo/8-bits-characters-gaming-assets_23-2151143742.jpg",
          imageAlt: "AI generated 3D character",
        },
        {
          id: "proyecto-3",
          name: "Fotografía de Producto 'Quantum'",
          price: "Fotos con IA",
          imageSrc: "http://img.b2bpic.net/free-photo/white-sports-equipment_23-2151920908.jpg",
          imageAlt: "AI enhanced product photography",
        },
        {
          id: "proyecto-4",
          name: "Cortometraje 'El Eco'",
          price: "Storytelling",
          imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377399.jpg",
          imageAlt: "AI generated short film",
        },
        {
          id: "proyecto-5",
          name: "Identidad Visual 'Pulse'",
          price: "Branding",
          imageSrc: "http://img.b2bpic.net/free-photo/organic-fruit-filled-bottle-with-multi-colored-decoration-generative-ai_188544-12672.jpg",
          imageAlt: "AI generated brand identity",
        },
        {
          id: "proyecto-6",
          name: "Automatización 'ConnectFlow'",
          price: "Marketing IA",
          imageSrc: "http://img.b2bpic.net/free-photo/digital-dashboard_23-2151957114.jpg",
          imageAlt: "AI marketing automation dashboard",
        },
      ]}
      title="Proyectos Destacados con IA"
      description="Una selección de nuestros trabajos más innovadores en vídeo, 3D y diseño, creados con la ayuda de la Inteligencia Artificial."
    />
  </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>
  );
}
