"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Award, Sparkles, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmall"
        background="fluid"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Inicio",          id: "#inicio"},
        {
          name: "Sobre",          id: "#sobre"},
        {
          name: "Características",          id: "#caracteristicas"},
        {
          name: "Modelos",          id: "#modelos"},
        {
          name: "Precios",          id: "#precios"},
        {
          name: "Contactar",          id: "#contactar"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/flat-design-data-logo-template_23-2149192863.jpg"
      logoAlt="AutoDiagnostico Pro Logo"
      brandName="AutoDiagnostico Pro"
      bottomLeftText="Líder en Diagnóstico Automotriz"
      bottomRightText="soporte@autodiagnostico.com"
    />
  </div>

  <div id="inicio" data-section="inicio">
      <HeroBillboard
      background={{
        variant: "canvas-reveal"}}
      title="Diagnóstico Automotriz Avanzado al Alcance de tu Mano"
      description="Descubre la potencia de nuestro scanner de diagnóstico profesional. Identifica, analiza y soluciona problemas del vehículo con precisión inigualable."
      tag="El futuro del taller"
      tagIcon={Sparkles}
      tagAnimation="blur-reveal"
      buttons={[
        {
          text: "Comprar Ahora",          href: "#modelos"},
        {
          text: "Ver Características",          href: "#caracteristicas"},
      ]}
      buttonAnimation="blur-reveal"
      imageSrc="http://img.b2bpic.net/free-photo/top-view-circuit-board-close-up_23-2149174319.jpg"
      imageAlt="Scanner de Diagnóstico Automotriz Avanzado"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367540.jpg",          alt: "Portrait of male car mechanic in the car repair shop"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-mechanic-workshop_329181-11863.jpg",          alt: "Portrait of a mechanic in the workshop"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-confident-male-electrician-standing-against-wall_23-2148087578.jpg",          alt: "Portrait of confident male electrician standing against wall"},
        {
          src: "http://img.b2bpic.net/free-photo/mechanic-standing-repair-garage_1170-1536.jpg",          alt: "Mechanic standing at repair garage"},
        {
          src: "http://img.b2bpic.net/free-photo/customer-showroom-looking-new-vehicle-purchase-lease_482257-118520.jpg",          alt: "Customer in showroom looking for new vehicle to purchase or lease"},
      ]}
      avatarText="Más de 5000 profesionales ya confían en nosotros."
      marqueeItems={[
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/car-instrument-cluster-speedometer-night-vehicle-dashboard-displays-speed-fuel-levels_169016-72756.jpg",          alt: "Icono de interfaz de diagnóstico moderno"},
        {
          type: "text",          text: "Análisis en tiempo real"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/settings-icon-front-side-white-background_187299-40209.jpg",          alt: "Icono de flujo de datos digital"},
        {
          type: "text",          text: "Programación ECU"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/neon-icon-mechanic-tools-pedals_1262-14768.jpg",          alt: "Icono de esquema de motor de coche"},
        {
          type: "text",          text: "Sincronización de llaves"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/automotive-logo-template_23-2150529646.jpg",          alt: "Icono de engranaje y llave"},
        {
          type: "text",          text: "Actualizaciones constantes"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/check-marks-with-tick-cross-sign_107791-15676.jpg",          alt: "Icono de marca de verificación aprobada"},
      ]}
    />
  </div>

  <div id="sobre" data-section="sobre">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",          content: "Sobre Nuestro Scanner: Innovación y Precisión"},
        {
          type: "text",          content: "Somos líderes en soluciones de diagnóstico automotriz, dedicados a proporcionar herramientas de vanguardia que potencian la eficiencia y precisión en cada taller. Con años de experiencia y una constante innovación, AutoDiagnostico Pro es el socio tecnológico en el que confían los profesionales."},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/mechanic-examining-car-using-flashlight_1170-1331.jpg",          alt: "Mecánico operando un scanner de diagnóstico automotriz"}
      ]}
      buttons={[
        {
          text: "Conocer Más",          href: "#caracteristicas"},
      ]}
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="caracteristicas" data-section="caracteristicas">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          label: "ECU Programming",          title: "Programación Avanzada de ECUs",          items: [
            "Reprogramación y codificación de módulos de control",            "Actualizaciones de firmware para vehículos modernos",            "Adaptación de componentes tras reemplazo"],
        },
        {
          id: "f2",          label: "Key Matching",          title: "Sincronización de Llaves Inteligentes",          items: [
            "Programación de llaves y mandos a distancia",            "Generación de llaves para sistemas de inmovilizador",            "Lectura y escritura de datos de transpondedores"],
        },
        {
          id: "f3",          label: "Full Diagnostics",          title: "Diagnóstico Integral del Vehículo",          items: [
            "Lectura y borrado de códigos de error (DTC)",            "Visualización de datos en tiempo real (Live Data)",            "Pruebas de actuadores y funciones especiales"],
        },
        {
          id: "f4",          label: "Mileage Correction",          title: "Corrección y Ajuste de Kilometraje",          items: [
            "Ajuste profesional de odómetros digitales",            "Recuperación de datos de kilometraje",            "Compatibilidad con múltiples marcas y modelos"],
        },
      ]}
      title="Funcionalidades Clave"
      description="Herramientas esenciales para cada profesional automotriz, desde el diagnóstico hasta la programación compleja."
      tag="Potencia Ilimitada"
      tagIcon={Zap}
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="modelos" data-section="modelos">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          brand: "AutoDiagnostico Pro",          name: "Scanner Básico X1",          price: "$85.09",          rating: 4.5,
          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-her-workshop-creative-invention_23-2149067189.jpg",          imageAlt: "Scanner Básico X1"},
        {
          id: "p2",          brand: "AutoDiagnostico Pro",          name: "Scanner Avanzado X2",          price: "$129.99",          rating: 4.7,
          reviewCount: "95",          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-laptop_1170-1318.jpg",          imageAlt: "Scanner Avanzado X2"},
        {
          id: "p3",          brand: "AutoDiagnostico Pro",          name: "ECU Master X3",          price: "$249.00",          rating: 4.8,
          reviewCount: "70",          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-laptop_1170-1293.jpg",          imageAlt: "ECU Master X3"},
        {
          id: "p4",          brand: "AutoDiagnostico Pro",          name: "Key Programmer X4",          price: "$189.50",          rating: 4.6,
          reviewCount: "88",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-storage-devices-assortment_23-2149319330.jpg",          imageAlt: "Key Programmer X4"},
        {
          id: "p5",          brand: "AutoDiagnostico Pro",          name: "Full System X5",          price: "$399.00",          rating: 4.9,
          reviewCount: "110",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-examining-multimedia-system-luxury-car_7502-9819.jpg",          imageAlt: "Full System X5"},
        {
          id: "p6",          brand: "AutoDiagnostico Pro",          name: "Enterprise X6 Rugged",          price: "$599.00",          rating: 4.9,
          reviewCount: "55",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-redhead-worker-with-haircut-holding-electric-screwdriver-working-repair-shop_613910-19681.jpg",          imageAlt: "Enterprise X6 Rugged"},
      ]}
      title="Nuestros Modelos de Scanner"
      description="Encuentra el scanner perfecto para tus necesidades, desde el diagnóstico básico hasta la programación avanzada."
      tag="Elige tu Herramienta"
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="precios" data-section="precios">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "plan-basic",          tag: "Inicio",          price: "$85.09",          period: "pago único",          description: "Ideal para entusiastas y pequeños talleres que buscan diagnósticos fiables.",          button: {
            text: "Comprar Básico"},
          featuresTitle: "Incluye:",          features: [
            "Diagnóstico OBD-II completo",            "Lectura/Borrado de DTCs",            "Datos en tiempo real básicos"],
        },
        {
          id: "plan-pro",          tag: "Más Popular",          tagIcon={Star},
          price: "$249.00",          period: "pago único",          description: "Solución avanzada para talleres profesionales con necesidades de programación.",          button: {
            text: "Comprar Pro"},
          featuresTitle: "Incluye:",          features: [
            "Todas las funciones de Básico",            "Programación de ECU (limitada)",            "Sincronización de llaves",            "Actualizaciones de software por 1 año"],
        },
        {
          id: "plan-ultimate",          tag: "Empresarial",          price: "$599.00",          period: "pago único",          description: "La herramienta más completa para cubrir todas las necesidades de diagnóstico y programación.",          button: {
            text: "Comprar Ultimate"},
          featuresTitle: "Incluye:",          features: [
            "Todas las funciones de Pro",            "Programación ECU completa",            "Corrección de kilometraje",            "Soporte técnico prioritario",            "Actualizaciones de software de por vida"],
        },
      ]}
      title="Elige tu Plan de Diagnóstico"
      description="Ofrecemos diferentes planes para adaptarnos a las necesidades de cada cliente, desde el aficionado hasta el profesional."
      tag="Valor para todos"
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="metricas" data-section="metricas">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Rendimiento que Impulsa tu Negocio"
      tag="Nuestros Números Hablan"
      tagAnimation="blur-reveal"
      metrics={[
        {
          id: "m1",          value: "99%",          description: "Precisión en Diagnósticos"},
        {
          id: "m2",          value: "5 min",          description: "Tiempo Promedio de Diagnóstico"},
        {
          id: "m3",          value: "1000+",          description: "Vehículos Compatibles"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonios" data-section="testimonios">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      carouselMode="auto"
      testimonials={[
        {
          id: "t1",          name: "Juan Pérez",          role: "Mecánico Jefe, Taller JP",          testimonial: "El scanner AutoDiagnostico Pro ha revolucionado la forma en que trabajamos. La precisión y la velocidad son incomparables. ¡Una inversión que vale cada céntimo!",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-close-up-hard-light_1321-497.jpg",          imageAlt: "Foto de Juan Pérez"},
        {
          id: "t2",          name: "María Gómez",          role: "Propietaria, AutoServicio MG",          testimonial: "Como dueña de un taller, la eficiencia es clave. Este scanner no solo diagnostica rápidamente, sino que su capacidad de programación es un 'game changer'.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-choosimng-car-car-showroom_1303-26290.jpg",          imageAlt: "Foto de María Gómez"},
        {
          id: "t3",          name: "Carlos Ruiz",          role: "Mecánico Independiente",          testimonial: "He probado muchos scanners, pero este es el más completo. La interfaz es intuitiva y el soporte técnico, excelente. Mis clientes notan la diferencia.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-worker-uniform-pointing-red-background-uniform-color-tool-mechanic-worker-instrument-job-house-photo_140725-155570.jpg",          imageAlt: "Foto de Carlos Ruiz"},
        {
          id: "t4",          name: "Ana Torres",          role: "Entusiasta Automotriz",          testimonial: "Aunque no soy profesional, con AutoDiagnostico Pro he podido entender y solucionar problemas de mi propio coche. Me siento empoderada y ahorré mucho.",          imageSrc: "http://img.b2bpic.net/free-photo/stunning-young-woman-waring-dress-posing-front-her-car-outdoors-ownership-driver_158595-6799.jpg",          imageAlt: "Foto de Ana Torres"},
        {
          id: "t5",          name: "Roberto Soto",          role: "Especialista en Detallado",          testimonial: "A veces un cliente quiere un diagnóstico rápido. Este scanner lo hace fácil y rápido, complementando mis servicios a la perfección. Gran herramienta.",          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22305.jpg",          imageAlt: "Foto de Roberto Soto"},
      ]}
      title="Lo que Dicen Nuestros Clientes"
      description="La satisfacción de nuestros usuarios es la mejor prueba de la calidad y eficacia de nuestros productos."
      tag="Casos de Éxito"
      tagIcon={Award}
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="preguntas" data-section="preguntas">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",          title: "¿Es compatible con mi vehículo?",          content: "Nuestro scanner es compatible con la mayoría de vehículos OBD-II a partir de 1996 (Europa) y 2000 (Asia). Para modelos específicos, consulte la lista de compatibilidad en nuestro sitio."},
        {
          id: "faq2",          title: "¿Qué tipo de actualizaciones de software ofrece?",          content: "Ofrecemos actualizaciones de software periódicas para garantizar la compatibilidad con nuevos modelos y la mejora de funcionalidades. La frecuencia depende del plan de suscripción adquirido."},
        {
          id: "faq3",          title: "¿Necesito conocimientos técnicos avanzados para usarlo?",          content: "El scanner está diseñado para ser intuitivo, tanto para profesionales como para usuarios avanzados. Incluimos manuales detallados y acceso a soporte técnico."},
        {
          id: "faq4",          title: "¿Puedo programar llaves para cualquier marca de coche?",          content: "La programación de llaves es compatible con una amplia gama de marcas, pero puede haber limitaciones con algunos sistemas de seguridad avanzados. Consulte nuestra guía detallada o contacte a soporte."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/expert-shows-client-car-defects-with-ar_482257-96371.jpg"
      imageAlt="Técnico automotriz explicando el uso del scanner"
      mediaAnimation="slide-up"
      mediaPosition="right"
      title="Preguntas Frecuentes"
      description="Encuentra respuestas a las dudas más comunes sobre nuestro scanner de diagnóstico automotriz."
      tag="Soporte Rápido"
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contactar" data-section="contactar">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-animated"}}
      text="Listo para llevar tu taller al siguiente nivel? Contáctanos hoy para más información y soporte personalizado."
      buttons={[
        {
          text: "Enviar Mensaje",          href: "mailto:soporte@autodiagnostico.com"},
        {
          text: "Llamar Ahora",          href: "tel:+1234567890"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoSrc="http://img.b2bpic.net/free-vector/flat-design-data-logo-template_23-2149192863.jpg"
      logoAlt="AutoDiagnostico Pro Logo"
      logoText="AutoDiagnostico Pro"
      columns={[
        {
          title: "Producto",          items: [
            {
              label: "Modelos",              href: "#modelos"},
            {
              label: "Características",              href: "#caracteristicas"},
            {
              label: "Actualizaciones",              href: "#"},
          ],
        },
        {
          title: "Soporte",          items: [
            {
              label: "Preguntas Frecuentes",              href: "#preguntas"},
            {
              label: "Contacto",              href: "#contactar"},
            {
              label: "Manuales",              href: "#"},
          ],
        },
        {
          title: "Compañía",          items: [
            {
              label: "Sobre Nosotros",              href: "#sobre"},
            {
              label: "Nuestra Misión",              href: "#"},
            {
              label: "Carreras",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Política de Privacidad",              href: "#"},
            {
              label: "Términos de Servicio",              href: "#"},
            {
              label: "Aviso Legal",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 AutoDiagnostico Pro. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
