"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Camera, Cog, FileText, Palette, Rocket, Sparkles, Video } from "lucide-react";

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="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "plain"}}
      title="Transformamos tus ideas en contenido que vende con Inteligencia Artificial"
      description="Vídeos cinematográficos, personajes 3D y campañas profesionales. Calidad de nivel agencia. Precios accesibles para marcas que quieren crecer."
      buttons={[
        {
          text: "Quiero mi primera escena GRATIS",          href: "https://wa.me/59162650814?text=Hola%20Nexo%20AI%20Studio,%20quiero%20mi%20primera%20escena%20gratis%20de%207%20segundos"},
        {
          text: "Ver cómo trabajamos",          href: "/como-trabajamos"},
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-still-life-optical-fiber_23-2149301542.jpg",          imageAlt: "Cinematic AI interface"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-concept-human_23-2150688395.jpg",          imageAlt: "Holographic 3D characters"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/long-shot-woman-leaning-wall_23-2148513506.jpg",          imageAlt: "Abstract AI content creation"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-components-with-blue-light_23-2149413368.jpg",          imageAlt: "High-tech camera lens"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-colorful-techno-lights-creating-cool-shapes-background_181624-21392.jpg",          imageAlt: "AI neural networks"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062948.jpg",          imageAlt: "AI generated video sequence"},
      ]}
      mediaAnimation="opacity"
    />
  </div>

  <div id="problema" data-section="problema">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Tu marca merece contenido a la altura de tu ambición"
      description="La mayoría de negocios tienen un excelente producto o servicio, pero su contenido en Instagram, TikTok y YouTube Shorts no refleja esa calidad. Falta de tiempo, falta de ideas o falta de resultados. Mientras tanto, tu competencia avanza. En Nexo AI Studio cambiamos esa realidad."
      bulletPoints={[
        {
          title: "Contenido de impacto",          description: "Transforma tu presencia digital con vídeos y gráficos generados por IA."},
        {
          title: "Ahorra tiempo",          description: "Deja la creación de contenido en manos de la IA y enfócate en tu negocio."},
        {
          title: "Resultados garantizados",          description: "Campañas optimizadas para conectar emocionalmente y generar ventas."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/brunet-man-sitting-desk-surrounded-with-gadgets-papers_273609-41518.jpg"
      imageAlt="Person frustrated with social media content"
      mediaAnimation="opacity"
    />
  </div>

  <div id="soluciones" data-section="soluciones">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Vídeos & Anuncios con IA",          description: "Anuncios 3D, Reels, Shorts y spots cinematográficos que captan atención y generan ventas.",          bentoComponent: "reveal-icon",          icon: Video
        },
        {
          title: "Personajes & Mascotas 3D",          description: "Creamos personajes y mascotas únicas que representan la esencia de tu marca.",          bentoComponent: "reveal-icon",          icon: Cog
        },
        {
          title: "Fotos con IA",          description: "Fotos de estudio premium, restauración y transformación de imágenes profesionales.",          bentoComponent: "reveal-icon",          icon: Camera
        },
        {
          title: "Guion & Storytelling",          description: "Guiones estratégicos que conectan emocionalmente y convierten.",          bentoComponent: "reveal-icon",          icon: FileText
        },
        {
          title: "Branding & Diseño con IA",          description: "Logo, identidad visual completa y material gráfico de alto impacto.",          bentoComponent: "reveal-icon",          icon: Palette
        },
        {
          title: "Marketing & Automatización",          description: "Gestión de contenido + automatizaciones inteligentes con IA.",          bentoComponent: "reveal-icon",          icon: Rocket
        }
      ]}
      title="Todo lo que necesitas para destacar y vender más"
      description="En Nexo AI Studio, combinamos la creatividad humana con la eficiencia de la IA para ofrecerte soluciones de contenido que realmente funcionan."
      buttons={[
        {
          text: "Ver todos los servicios",          href: "/servicios"},
      ]}
    />
  </div>

  <div id="oferta" data-section="oferta">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Prueba la calidad antes de pagar nada"
      description="Recibe tu primera escena de 7 segundos completamente gratis. Si te gusta el resultado (y estamos seguros de que te va a encantar), continuamos con el paquete completo. Sin riesgo y sin compromiso."
      buttons={[
        {
          text: "Quiero mi primera escena GRATIS",          href: "https://wa.me/59162650814?text=Hola%20Nexo%20AI%20Studio,%20quiero%20mi%20primera%20escena%20gratis%20de%207%20segundos"},
      ]}
      bulletPoints={[
        {
          title: "Escena gratis",          description: "Tu primera escena de 7 segundos sin coste alguno."},
        {
          title: "Calidad garantizada",          description: "Experimenta el nivel profesional de nuestro trabajo con IA."},
        {
          title: "Sin compromiso",          description: "Decide continuar solo si el resultado supera tus expectativas."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-taking-picture-tree-forest_250224-45.jpg"
      imageAlt="Captivating AI-generated scene"
      mediaAnimation="opacity"
    />
  </div>

  <div id="proceso" data-section="proceso">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "paso-1",          value: "1.",          title: "Nos cuentas tu idea",          items: [
            "Comprendemos tus objetivos y visión."],
        },
        {
          id: "paso-2",          value: "2.",          title: "Creamos la estrategia",          items: [
            "Diseñamos el plan de contenido con IA."],
        },
        {
          id: "paso-3",          value: "3.",          title: "Diseñamos las escenas",          items: [
            "Conceptualizamos cada elemento visual."],
        },
        {
          id: "paso-4",          value: "4.",          title: "Animamos y editamos",          items: [
            "Damos vida a tu contenido con IA."],
        },
        {
          id: "paso-5",          value: "5.",          title: "Revisamos juntos",          items: [
            "Aseguramos tu satisfacción con cada detalle."],
        },
        {
          id: "paso-6",          value: "6.",          title: "Entregamos listo para publicar",          items: [
            "Recibe tu contenido optimizado para tus plataformas."],
        },
      ]}
      title="Un proceso claro, profesional y orientado a resultados"
      description="Nuestra metodología garantiza que cada proyecto se entregue con la máxima calidad y eficiencia, desde la idea inicial hasta la publicación."
      buttons={[
        {
          text: "Quiero ver el proceso completo",          href: "/como-trabajamos"},
      ]}
    />
  </div>

  <div id="precios-destacados" data-section="precios-destacados">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "starter",          tag: "Básico",          price: "35€",          period: "14 segundos",          description: "Ideal para empezar a probar el poder de la IA en tu contenido.",          button: {
            text: "Elegir este paquete",            href: "https://wa.me/59162650814?text=Hola%20Nexo%20AI%20Studio,%20estoy%20interesado%20en%20el%20Paquete%20Starter"},
          featuresTitle: "Incluye:",          features: [
            "2 Escenas personalizadas",            "Edición Cinematográfica",            "Guion y Storytelling",            "Música Profesional"],
        },
        {
          id: "growth",          tag: "Popular",          price: "45€",          period: "21 segundos",          description: "El balance perfecto entre duración y alcance para tus campañas.",          button: {
            text: "Elegir este paquete",            href: "https://wa.me/59162650814?text=Hola%20Nexo%20AI%20Studio,%20estoy%20interesado%20en%20el%20Paquete%20Growth"},
          featuresTitle: "Incluye:",          features: [
            "3 Escenas personalizadas",            "Edición Cinematográfica",            "Guion y Storytelling",            "Música Profesional",            "Revisión de Contenido"],
        },
        {
          id: "pro",          tag: "Más elegido",          tagIcon: Sparkles,
          price: "79€",          period: "28 segundos",          description: "Para marcas que buscan maximizar el impacto y la conversión con contenido IA.",          button: {
            text: "Elegir este paquete",            href: "https://wa.me/59162650814?text=Hola%20Nexo%20AI%20Studio,%20estoy%20interesado%20en%20el%20Paquete%20Pro"},
          featuresTitle: "Incluye:",          features: [
            "4 Escenas personalizadas",            "Edición Cinematográfica",            "Guion y Storytelling",            "Música Profesional",            "Revisión de Contenido",            "Asesoramiento Estratégico"],
        },
        {
          id: "premium",          tag: "Avanzado",          price: "99€",          period: "35 segundos",          description: "La solución completa para un contenido cinematográfico sin límites.",          button: {
            text: "Elegir este paquete",            href: "https://wa.me/59162650814?text=Hola%20Nexo%20AI%20Studio,%20estoy%20interesado%20en%20el%20Paquete%20Premium"},
          featuresTitle: "Incluye:",          features: [
            "5 Escenas personalizadas",            "Edición Cinematográfica",            "Guion y Storytelling",            "Música Profesional",            "Revisión de Contenido",            "Asesoramiento Estratégico",            "Soporte Prioritario"],
        },
      ]}
      title="Precios transparentes. Resultados profesionales."
      description="Todos los paquetes incluyen guion, música profesional, edición cinematográfica y entrega lista para publicar."
      buttons={[
        {
          text: "Ver todos los precios y opciones",          href: "/precios"},
      ]}
    />
  </div>

  <div id="testimonios" data-section="testimonios">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          imageSrc: "http://img.b2bpic.net/free-photo/confident-business-woman-standing-blue-suit-with-hands-clasped_8353-6013.jpg"},
        {
          id: "2",          name: "Michael Chen",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg"},
        {
          id: "3",          name: "Emily Rodriguez",          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-vening-street_1303-3837.jpg"},
        {
          id: "4",          name: "David Kim",          imageSrc: "http://img.b2bpic.net/free-photo/laughing-woman-holding-tablet-office_23-2147787579.jpg"},
        {
          id: "5",          name: "Olivia White",          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-office-center_1303-19604.jpg"},
        {
          id: "6",          name: "Alex Turner",          imageSrc: "http://img.b2bpic.net/free-photo/young-think-copy-girl-happy_1303-1336.jpg"},
      ]}
      cardTitle="Lo que dicen las marcas que ya trabajan con nosotros"
      cardTag="Opiniones Reales"
      cardAnimation="slide-up"
    />
  </div>

  <div id="cta-final" data-section="cta-final">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="¿Listo para llevar tu contenido al siguiente nivel?"
      description="Da el primer paso hoy. Tu primera escena es gratis y estamos listos para escucharte."
      buttons={[
        {
          text: "Hablar por WhatsApp",          href: "https://wa.me/59162650814"},
      ]}
      bulletPoints={[
        {
          title: "Consulta Gratuita",          description: "Aclara tus dudas y explora tus opciones con nuestro equipo experto."},
        {
          title: "Experiencia Premium",          description: "Disfruta de un servicio de agencia con precios accesibles."},
        {
          title: "Resultados Comprobados",          description: "Únete a las marcas que ya están vendiendo más con nuestro contenido IA."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/conceptual-3d-illustration-karateka-woman-motion-design_183364-124097.jpg"
      imageAlt="Hand activating glowing digital interface"
      mediaAnimation="opacity"
    />
  </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>
  );
}
