"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { HelpCircle, Linkedin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="medium"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Alquilar mi auto",
          id: "#propietarios",
        },
        {
          name: "Quiero alquilar un auto",
          id: "#conductores",
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ucuved"
      logoAlt="Transpofleet Logo"
      brandName="Transpofleet"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{
        variant: "glowing-orb",
      }}
      title="Convierte tu auto en una fuente de ingresos pasivos"
      description="Nos encargamos de encontrar conductores, gestionar pagos, monitorear el vehículo y brindar soporte para que ganes dinero sin complicaciones."
      leftCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139326.jpg",
          imageAlt: "Car dashboard with Transpofleet app",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-driver_23-2149908144.jpg",
          imageAlt: "Hand interacting with holographic car display",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/scene-with-photorealistic-logistics-operations-proceedings_23-2151468900.jpg",
          imageAlt: "Aerial view of a managed car fleet",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-16323.jpg",
          imageAlt: "Close-up of car wheel and suspension",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/circular-ramp-parking-garage_1359-255.jpg",
          imageAlt: "Diverse fleet of modern cars at depot",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139317.jpg",
          imageAlt: "Futuristic electric car at night",
        },
      ]}
      rightCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-background_23-2150498607.jpg",
          imageAlt: "Premium modern vehicle",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/gradient-technology-background_23-2151895859.jpg",
          imageAlt: "Car dashboard with Transpofleet app",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/driver-checking-stock-market-his-phone-while-car_53876-98095.jpg",
          imageAlt: "Hand interacting with holographic car display",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-shanghai-overpass-night_1359-875.jpg",
          imageAlt: "Aerial view of a managed car fleet",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/worker-follows-car-checklist-fixing-tires_482257-75661.jpg",
          imageAlt: "Close-up of car wheel and suspension",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/transport-concept-with-parked-vehicles_23-2148959730.jpg",
          imageAlt: "Diverse fleet of modern cars at depot",
        },
      ]}
      tag="🚗 Genera ingresos con tu vehículo"
      tagAnimation="blur-reveal"
      buttons={[
        {
          text: "ALQUILAR MI AUTO",
          href: "https://wa.me/15556004102?text=¡Hola!%20Quiero%20hacer%20de%20mi%20auto%20una%20fuente%20de%20ingresos%20pasivos",
        },
        {
          text: "QUIERO ALQUILAR UN AUTO",
          href: "https://wa.me/15556004102?text=¡Hola!%20Me%20gustaría%20información%20sobre%20el%20alquiler%20de%20autos",
        },
      ]}
      buttonAnimation="blur-reveal"
      carouselPosition="right"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-attractive-afroamerican-man_23-2148508906.jpg",
          alt: "Usuario satisfecho 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiley-man-city-night-with-headphones_23-2149024727.jpg",
          alt: "Usuario satisfecho 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-with-dark-hair-strolls-against-urban-setting-with-sport-facilities-leads-active-lifestyle-focused-forward-into-distance-thinks-about-plans-day_273609-55617.jpg",
          alt: "Usuario satisfecho 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/muslim-person-travelling-through-city_23-2149305581.jpg",
          alt: "Usuario satisfecho 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/upbeat-young-woman-celebrating-winning-triumphing-sitting-street-bench-laughing-holding_1258-206035.jpg",
          alt: "Usuario satisfecho 5",
        },
      ]}
      avatarText="+2000 Propietarios y Conductores felices"
      marqueeItems={[
        {
          type: "text",
          text: "Gestión Simplificada",
        },
        {
          type: "text",
          text: "Ingresos Garantizados",
        },
        {
          type: "text",
          text: "Soporte 24/7",
        },
        {
          type: "text",
          text: "Flota Diversa",
        },
        {
          type: "text",
          text: "Tecnología Avanzada",
        },
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "1",
          value: "Monitoreo continuo",
          description: "Protegemos tu vehículo 24/7.",
        },
        {
          id: "2",
          value: "Pagos puntuales",
          description: "Siempre a tiempo, sin demoras.",
        },
        {
          id: "3",
          value: "Soporte permanente",
          description: "Equipo listo para ayudarte.",
        },
        {
          id: "4",
          value: "Operación simplificada",
          description: "Ganar dinero nunca fue tan fácil.",
        },
      ]}
      title="Tu tranquilidad es nuestra prioridad"
      description="Garantizamos una gestión transparente y segura para tu vehículo y tus ingresos."
    />
  </div>

  <div id="propietarios" data-section="propietarios">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="¿Tienes un auto?"
      description="Nosotros lo convertimos en ingresos. Con Transpofleet, tu vehículo es un activo que trabaja para ti."
      buttons={[
        {
          text: "ALQUILAR MI AUTO",
          href: "https://wa.me/15556004102?text=¡Hola!%20Quiero%20hacer%20de%20mi%20auto%20una%20fuente%20de%20ingresos%20pasivos",
        },
      ]}
      bulletPoints={[
        {
          title: "Recibe pagos periódicos",
          description: "Gana dinero de forma consistente sin preocuparte por la gestión.",
        },
        {
          title: "Vehículo monitoreado",
          description: "Seguimiento constante para tu tranquilidad y seguridad.",
        },
        {
          title: "Soporte y mantenimiento coordinado",
          description: "Nos encargamos de todo para que tu auto siempre esté listo.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/brunette-businesswoman-outdoors_23-2148142640.jpg"
      imageAlt="Owner smiling next to a modern car"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="conductores" data-section="conductores">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      imagePosition="left"
      title="¿Necesitas un vehículo para trabajar?"
      description="Accede a un auto listo para generar ingresos. Te conectamos con la oportunidad de trabajar en plataformas de movilidad."
      buttons={[
        {
          text: "QUIERO ALQUILAR UN AUTO",
          href: "https://wa.me/15556004102?text=¡Hola!%20Me%20gustaría%20información%20sobre%20el%20alquiler%20de%20autos",
        },
      ]}
      bulletPoints={[
        {
          title: "Vehículos disponibles",
          description: "Amplia flota para elegir el auto que mejor se adapte a ti.",
        },
        {
          title: "Proceso rápido",
          description: "Consigue tu auto y empieza a trabajar en poco tiempo.",
        },
        {
          title: "Soporte continuo",
          description: "Asistencia constante para que te enfoques en tus ganancias.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/businesswoman-using-digital-tablet-phone_107420-64868.jpg"
      imageAlt="Driver with smartphone next to a modern car"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="how-it-works" data-section="how-it-works">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "step-1",
          title: "1. Contáctanos",
          subtitle: "Háblanos sobre tu auto o tu necesidad de uno.",
          category: "Inicio",
          value: "",
        },
        {
          id: "step-2",
          title: "2. Validamos tu perfil",
          subtitle: "Un proceso rápido y seguro para ambos lados.",
          category: "Verificación",
          value: "",
        },
        {
          id: "step-3",
          title: "3. Asignamos vehículo",
          subtitle: "Conectamos la oferta con la demanda de forma eficiente.",
          category: "Conexión",
          value: "",
        },
        {
          id: "step-4",
          title: "4. Empiezas a generar ingresos",
          subtitle: "Todo listo para que tu auto trabaje o tú trabajes con un auto.",
          category: "Ganancia",
          value: "",
        },
      ]}
      title="Así funciona Transpofleet"
      description="Un proceso simple y transparente para que empieces a generar o recibir ingresos con facilidad."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t-1",
          name: "Sofía R.",
          role: "Propietaria",
          company: "Lima",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-using-digital-tablet-home-office_329181-4278.jpg",
          imageAlt: "Sofía R. testimonial",
        },
        {
          id: "t-2",
          name: "Carlos M.",
          role: "Conductor",
          company: "La Paz",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113975.jpg",
          imageAlt: "Carlos M. testimonial",
        },
        {
          id: "t-3",
          name: "Valentina G.",
          role: "Propietaria",
          company: "Arequipa",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-cheerful-africanamerican-female-model-showing-okay-sign-winking-looking-satisfied-rec_1258-129397.jpg",
          imageAlt: "Valentina G. testimonial",
        },
        {
          id: "t-4",
          name: "Diego P.",
          role: "Conductor",
          company: "Santa Cruz",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-152692.jpg",
          imageAlt: "Diego P. testimonial",
        },
        {
          id: "t-5",
          name: "Ana S.",
          role: "Propietaria",
          company: "Cusco",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",
          imageAlt: "Ana S. testimonial",
        },
        {
          id: "t-6",
          name: "Ricardo L.",
          role: "Conductor",
          company: "Cochabamba",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-guy-with-blue-eyes-brown-hair_23-2148311257.jpg",
          imageAlt: "Ricardo L. testimonial",
        },
      ]}
      title="Nuestros usuarios opinan"
      description="La satisfacción de quienes confían en Transpofleet es nuestra mejor carta de presentación."
    />
  </div>

  <div id="why-transpofleet" data-section="why-transpofleet">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "comparison-1",
          title: "Gestión: Otros métodos ❌ vs. Transpofleet ✅",
          content: "Con otros métodos, debes buscar y gestionar conductores por tu cuenta. Con Transpofleet, te ofrecemos gestión centralizada y eficiente para tu tranquilidad.",
        },
        {
          id: "comparison-2",
          title: "Pagos: Otros métodos ❌ vs. Transpofleet ✅",
          content: "Gestionar pagos manualmente puede ser tedioso e irregular. Transpofleet garantiza pagos puntuales y automáticos, sin demoras ni complicaciones.",
        },
        {
          id: "comparison-3",
          title: "Soporte: Otros métodos ❌ vs. Transpofleet ✅",
          content: "Resolver problemas solo puede ser estresante y consumir tiempo. Con Transpofleet, siempre tendrás soporte continuo y asistencia para cualquier eventualidad.",
        },
      ]}
      sideTitle="Por qué elegir Transpofleet"
      sideDescription="La solución inteligente para propietarios y conductores. Te ofrecemos lo que otros métodos no."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="final-cta" data-section="final-cta">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "glowing-orb",
      }}
      tag="¡No esperes más!"
      title="Empieza hoy mismo"
      description="Ya sea que tengas un vehículo para generar ingresos o necesites uno para trabajar, podemos ayudarte a alcanzar tus metas."
      buttons={[
        {
          text: "ALQUILAR MI AUTO",
          href: "https://wa.me/15556004102?text=¡Hola!%20Quiero%20hacer%20de%20mi%20auto%20una%20fuente%20de%20ingresos%20pasivos",
        },
        {
          text: "QUIERO ALQUILAR UN AUTO",
          href: "https://wa.me/15556004102?text=¡Hola!%20Me%20gustaría%20información%20sobre%20el%20alquiler%20de%20autos",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ucuved"
      logoAlt="Transpofleet Logo"
      logoText="Transpofleet"
      copyrightText="© 2024 Transpofleet. Todos los derechos reservados. Perú 🇵🇪 | Bolivia 🇧🇴"
      socialLinks={[
        {
          icon: HelpCircle,
          href: "https://wa.me/15556004102",
          ariaLabel: "WhatsApp de Transpofleet",
        },
        {
          icon: Linkedin,
          href: "https://linkedin.com/company/transpofleet",
          ariaLabel: "LinkedIn de Transpofleet",
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
