"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Dashboard",          id: "dashboard"},
        {
          name: "Pipeline",          id: "pipeline"},
        {
          name: "Pagos",          id: "pagos"},
        {
          name: "Contacto",          id: "contact"},
      ]}
      brandName="WebCRM"
      button={{
        text: "Acceder",        href: "#hero"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{
        variant: "gradient-bars"}}
      title="Gestioná tu Agencia de Web con Precisión"
      description="Tu CRM profesional para organizar leads, cerrar ventas y trackear pagos en un solo lugar. Diseñado para partners que escalan."
      leftCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-tablet-papers-with-data-charts-desk-used-by-workmates-business-development-corporate-colleagues-working-project-presentation-management-marketing-strategy_482257-32053.jpg",          imageAlt: "Dashboard Vista"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-95241.jpg",          imageAlt: "Businesswoman using tablet"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg",          imageAlt: "Trading manager working with stock market diagrams"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116602.jpg",          imageAlt: "Person looking over finance graphs"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461348.jpg",          imageAlt: "Business person looking at finance graphs"},
      ]}
      rightCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",          imageAlt: "Dashboard Móvil"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-hand-with-financial-charts-mobile-phone-laptop-table_1232-4885.jpg",          imageAlt: "Business woman hand with Financial charts"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/person-reading-data-tablet_23-2149370610.jpg",          imageAlt: "Person reading data on a tablet"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/customer-marketing-sales-dashboard-graphics-concept_53876-133831.jpg",          imageAlt: "Customer Marketing Sales Dashboard"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-hand-with-financial-charts-mobile-phone-laptop-table_1232-4899.jpg",          imageAlt: "Business woman hand with Financial charts"},
      ]}
      buttons={[
        {
          text: "Ver Dashboard",          href: "#dashboard"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/male-female-coworkers-same-room_23-2148985537.jpg",          alt: "Partner 1"},
        {
          src: "http://img.b2bpic.net/free-photo/colleagues-working-together-project_23-2149286149.jpg",          alt: "Partner 2"},
        {
          src: "http://img.b2bpic.net/free-photo/colleagues-working-together-call-center-office_23-2149256108.jpg",          alt: "Partner 3"},
        {
          src: "http://img.b2bpic.net/free-photo/multiethnic-group-colleagues-working-charts-analysis-with-digital-tablet-using-online-research-information-create-infographics-report-people-analyzing-diagrams-boardroom_482257-46896.jpg",          alt: "Partner 4"},
        {
          src: "http://img.b2bpic.net/free-photo/hands-businesspeople-discussing-marketing-reports-presentation-tablet_1262-12336.jpg",          alt: "Partner 5"},
      ]}
      avatarText="Más de 500 agencias confían en nosotros"
      marqueeItems={[
        {
          type: "text",          text: "WebCRM"},
        {
          type: "text",          text: "Pipeline Pro"},
        {
          type: "text",          text: "Analytics"},
        {
          type: "text",          text: "Cloud"},
        {
          type: "text",          text: "Performance"},
      ]}
    />
  </div>

  <div id="dashboard" data-section="dashboard">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "12",          title: "Leads este mes",          description: "Nuevos clientes potenciales",          imageSrc: "http://img.b2bpic.net/free-photo/business-strategy-corporation-enterprise-startup-concept_53876-122791.jpg"},
        {
          id: "m2",          value: "25%",          title: "Conversión",          description: "Tasa de cierre exitosa",          imageSrc: "http://img.b2bpic.net/free-photo/business-people-looking-chart-office_23-2148017088.jpg"},
        {
          id: "m3",          value: "$1.2M",          title: "Ingresos",          description: "Facturación total de ambos partners",          imageSrc: "http://img.b2bpic.net/free-photo/graph-growth-success-strategy-marketing-computer-concept_53876-47081.jpg"},
      ]}
      title="Métricas de Negocio"
      description="Tu visión general del mes actual."
    />
  </div>

  <div id="pipeline" data-section="pipeline">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split-description"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Pipeline Progresivo",          description: "Desde el primer contacto hasta la entrega final del proyecto.",          imageSrc: "http://img.b2bpic.net/free-photo/notebook-with-people-icons_1134-402.jpg"},
        {
          title: "Transparencia Total",          description: "Registro de cambios, notas y responsables en cada estado.",          imageSrc: "http://img.b2bpic.net/free-photo/curvy-line-jumping-colourful-cubes_23-2148445418.jpg"},
        {
          title: "Gestión de Bocetos",          description: "Linkea tus prototipos de diseño directamente en la ficha del lead.",          imageSrc: "http://img.b2bpic.net/free-photo/business-statistics_53876-167065.jpg"},
      ]}
      title="Pipeline de Ventas"
      description="Gestioná el estado de cada cliente de forma transparente."
    />
  </div>

  <div id="leads" data-section="leads">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split-description"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        {
          title: "Captura Rápida",          description: "Agregá leads desde Google Maps en segundos.",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-paper-sheet-with-graph_23-2148210412.jpg"},
        {
          title: "Datos Completos",          description: "Instagram, web actual, rubro y dirección en una ficha.",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-image-desk-planner-calendar-laptop_1163-2588.jpg"},
        {
          title: "Historial de Contacto",          description: "No pierdas más seguimiento con nuestras notas integradas.",          imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-male-ceo-watching-olympic-games-stream_482257-123108.jpg"},
      ]}
      title="Gestión de Leads"
      description="Organización profesional con todos los datos necesarios."
    />
  </div>

  <div id="pagos" data-section="pagos">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split-description"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Control de Pagos",          description: "Señas, saldo pendiente y fechas estimadas.",          imageSrc: "http://img.b2bpic.net/free-photo/grandparent-learning-use-technology_23-2149402633.jpg"},
        {
          title: "Roles Definidos",          description: "Solo el que cierra la venta puede editar los montos.",          imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-41005.jpg"},
        {
          title: "Alertas",          description: "Notificaciones si hay saldo pendiente próximo a vencer.",          imageSrc: "http://img.b2bpic.net/free-photo/coworkers-discussing-statistics_1098-21770.jpg"},
      ]}
      title="Gestión Financiera"
      description="Claridad total sobre cuánto cobró cada uno."
    />
  </div>

  <div id="actividad" data-section="actividad">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split-description"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        {
          title: "Timeline",          description: "Cada cambio de estado queda registrado con fecha y autor.",          imageSrc: "http://img.b2bpic.net/free-photo/stock-exchange-trading-forex-finance-graphic-concept_53876-121530.jpg"},
        {
          title: "Notas Rápidas",          description: "Contexto inmediato sobre cada negociación.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg"},
        {
          title: "Filtro Personal",          description: "Filtra por 'mis leads' o 'todos los leads' fácilmente.",          imageSrc: "http://img.b2bpic.net/free-photo/female-hands-holding-touchpad-with-presentation_1262-3210.jpg"},
      ]}
      title="Registro de Actividad"
      description="Transparencia absoluta entre compañeros."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "¿Cómo agrego un lead?",          content: "Solo tenés que copiar la URL de Google Maps y el sistema extrae los datos básicos."},
        {
          id: "f2",          title: "¿Quién puede ver los pagos?",          content: "Ambos pueden verlo para tener transparencia, pero solo el responsable del cierre puede editar."},
        {
          id: "f3",          title: "¿Cómo gestiono la entrega?",          content: "Al marcar como 'entregado' se actualiza la fecha final y se archiva el proyecto."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/complaint-form-computer-office_53876-125117.jpg"
      title="Preguntas Frecuentes"
      description="Dudas rápidas sobre el uso del sistema."
      faqsAnimation="slide-up"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Soporte de Equipo"
      description="¿Necesitas ajustar una función de la app? Envíanos un reporte."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Tu nombre",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Tu email",          required: true,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Detalla tu sugerencia o error...",        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/cheerful-man-talking-phone_53876-101892.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Dashboard",              href: "#dashboard"},
            {
              label: "Pipeline",              href: "#pipeline"},
          ],
        },
        {
          items: [
            {
              label: "Pagos",              href: "#pagos"},
            {
              label: "Soporte",              href: "#contact"},
          ],
        },
      ]}
      logoText="WebCRM"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
