"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { BookOpen, Feather, Lightbulb, Mail, MessageCircle, Mic, Search, Tag, Target, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Inicio",
          id: "#hero",
        },
        {
          name: "Nosotros",
          id: "#about",
        },
        {
          name: "Servicios",
          id: "#services",
        },
        {
          name: "Resultados",
          id: "#results",
        },
        {
          name: "Clientes",
          id: "#clients",
        },
        {
          name: "Contacto",
          id: "#contact",
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ErxHhUvpnOyOBzMUTphfYSPJot/uploaded-1781119552658-dw9ypbt8.png"
      logoAlt="Logo de Gallica"
      brandName="Gallica"
      button={{
        text: "Conecta con Nosotros",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "plain",
      }}
      logoText="Gallica"
      description="Transformamos su visión en resultados tangibles con estrategias de marketing y publicidad innovadoras y efectivas. Su crecimiento es nuestra prioridad."
      buttons={[
        {
          text: "Nuestros Servicios",
          href: "#services",
        },
        {
          text: "Contáctenos",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/group-graphic-designers-interacting-computer_1170-987.jpg?_wi=1"
      imageAlt="Equipo de marketing colaborando en una estrategia"
      mediaAnimation="reveal-blur"
      frameStyle="card"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Nuestra Filosofía: Estrategia, Creatividad, Resultados"
      metrics={[
        {
          icon: Lightbulb,
          label: "Estrategia de Impacto",
          value: "Planificación y ejecución que definen el éxito.",
        },
        {
          icon: TrendingUp,
          label: "Crecimiento Medible",
          value: "Campañas que generan un retorno de inversión real.",
        },
        {
          icon: Feather,
          label: "Creatividad sin Límites",
          value: "Ideas frescas y originales que conectan con su audiencia.",
        },
      ]}
      metricsAnimation="reveal-blur"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Optimización SEO Estratégica",
          description: "Mejoramos su visibilidad en línea y atraemos tráfico cualificado a su sitio web.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-reviewing-digital-tablet-with-greenscreen-template-coworking-space-working-budget-development-employee-analyzing-isolated-blank-mockup-template-gadget-display_482257-73710.jpg",
            imageAlt: "Gráfico de SEO y analíticas web",
          },
          items: [
            {
              icon: Search,
              text: "Auditorías exhaustivas y análisis de palabras clave.",
            },
            {
              icon: Target,
              text: "Estrategias de contenido y link building.",
            },
            {
              icon: ArrowBigUp,
              text: "Monitoreo y optimización continua.",
            },
          ],
          reverse: false,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ErxHhUvpnOyOBzMUTphfYSPJot/uploaded-1781119552658-dw9ypbt8.png?_wi=1",
          imageAlt: "grafico seo digital",
        },
        {
          title: "Gestión de Redes Sociales",
          description: "Creamos y gestionamos contenido atractivo para construir su comunidad y fortalecer su marca en plataformas sociales.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/social-media-marketing-concept-marketing-with-applications_23-2150063161.jpg",
            imageAlt: "Personas interactuando con redes sociales en un móvil",
          },
          items: [
            {
              icon: Users,
              text: "Desarrollo de estrategia de contenido social.",
            },
            {
              icon: MessageCircle,
              text: "Gestión activa de comunidades y engagement.",
            },
            {
              icon: AreaChart,
              text: "Análisis de rendimiento y reportes detallados.",
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-interacting-computer_1170-987.jpg?_wi=2",
          imageAlt: "grafico seo digital",
        },
        {
          title: "Marketing de Contenidos",
          description: "Desarrollamos contenido valioso y relevante que educa, informa y convierte a su audiencia en clientes leales.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164830.jpg",
            imageAlt: "Escritor trabajando en marketing de contenidos",
          },
          items: [
            {
              icon: BookOpen,
              text: "Creación de blogs, artículos y eBooks.",
            },
            {
              icon: Mic,
              text: "Desarrollo de guiones para videos y podcasts.",
            },
            {
              icon: Tag,
              text: "Optimización para motores de búsqueda y distribución.",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/innovation-development-rocket-graphic-concept_53876-120019.jpg",
          imageAlt: "grafico seo digital",
        },
      ]}
      title="Soluciones de Marketing y Publicidad que Impulsan su Marca"
      description="En Gallica, combinamos la creatividad con el análisis de datos para ofrecer estrategias personalizadas que realmente funcionan."
    />
  </div>

  <div id="results" data-section="results">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Resultados que Hablan por Sí Mismos"
      tag="Nuestro Impacto"
      tagAnimation="blur-reveal"
      metrics={[
        {
          id: "m1",
          value: "+500%",
          description: "Aumento en visibilidad orgánica para nuestros clientes promedio.",
        },
        {
          id: "m2",
          value: "+35%",
          description: "Incremento en las tasas de conversión después de nuestras campañas.",
        },
        {
          id: "m3",
          value: "95%",
          description: "Retención de clientes satisfechos anualmente.",
        },
      ]}
      metricsAnimation="reveal-blur"
    />
  </div>

  <div id="clients" data-section="clients">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Tech Innova",
        "Eco Solutions",
        "Global Retail",
        "Finan Corp",
        "Health Life",
        "Edu Future",
        "Travel Dream",
      ]}
      title="Colaboramos con Marcas que Confían en Nosotros"
      description="Nuestros clientes son la prueba de nuestro compromiso con la excelencia y el éxito."
      speed={50}
      showCard={true}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Laura Méndez",
          role: "CEO",
          company: "Soluciones Integrales",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",
          imageAlt: "Laura Méndez, CEO de Soluciones Integrales",
        },
        {
          id: "t2",
          name: "Carlos Rivera",
          role: "Director de Marketing",
          company: "Estrategia Digital X",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-dressed-business-suit-white-shirt_613910-8307.jpg",
          imageAlt: "Carlos Rivera, Director de Marketing de Estrategia Digital X",
        },
        {
          id: "t3",
          name: "Sofía Castro",
          role: "Fundadora",
          company: "Moda Consciente",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/marketing-young-cute-business-lady-striped-shirt-office-talking-team-players_140725-165630.jpg",
          imageAlt: "Sofía Castro, Fundadora de Moda Consciente",
        },
        {
          id: "t4",
          name: "Diego Vargas",
          role: "Gerente de Producto",
          company: "Innovación Tech",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-superhero-female-holding-points-bubble-idea-isolated-green_141793-94606.jpg",
          imageAlt: "Diego Vargas, Gerente de Producto de Innovación Tech",
        },
        {
          id: "t5",
          name: "Elena Rojas",
          role: "Directora Comercial",
          company: "Global Connect",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg",
          imageAlt: "Elena Rojas, Directora Comercial de Global Connect",
        },
      ]}
      title="Lo que Dicen Nuestros Clientes"
      description="La confianza de quienes trabajan con nosotros es nuestro mayor respaldo."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      groups={[
        {
          id: "g1",
          groupTitle: "Nuestro Equipo de Expertos",
          members: [
            {
              id: "m1",
              title: "Daniela Aup",
              subtitle: "Directora General y Estrategia",
              detail: "Lidera con una visión clara y un enfoque en resultados medibles, asegurando que cada campaña de Gallica supere las expectativas.",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg",
              imageAlt: "Daniela Aup, Directora General",
            },
            {
              id: "m2",
              title: "Roberto Pérez",
              subtitle: "Director Creativo",
              detail: "Responsable de las ideas más innovadoras, transformando conceptos en campañas visualmente impactantes y memorables.",
              imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-smiling-broadly-with-arms-crossed-his-chest_141793-55097.jpg",
              imageAlt: "Roberto Pérez, Director Creativo",
            },
            {
              id: "m3",
              title: "Mariana Soto",
              subtitle: "Jefa de Marketing Digital",
              detail: "Especialista en SEO, SEM y redes sociales, optimiza la presencia online para maximizar el alcance y la conversión de los clientes.",
              imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-with-laptop-listening-music_1208-194.jpg",
              imageAlt: "Mariana Soto, Jefa de Marketing Digital",
            },
          ],
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ErxHhUvpnOyOBzMUTphfYSPJot/uploaded-1781119552658-dw9ypbt8.png?_wi=2",
          imageAlt: "retrato mujer profesional marketing",
        },
      ]}
      title="Conoce al Equipo Detrás de Cada Éxito"
      description="Somos un grupo apasionado de profesionales dedicados a hacer crecer su marca."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "¿Qué servicios ofrece Gallica?",
          content: "Ofrecemos una gama completa de servicios de marketing y publicidad, incluyendo SEO, gestión de redes sociales, marketing de contenidos, diseño web, branding, y campañas publicitarias integrales.",
        },
        {
          id: "f2",
          title: "¿Cómo miden el éxito de una campaña?",
          content: "Utilizamos herramientas de análisis avanzadas para monitorear métricas clave como el ROI, tráfico web, tasas de conversión, engagement en redes sociales y posicionamiento SEO. Todos los resultados son transparentes y se presentan en informes regulares.",
        },
        {
          id: "f3",
          title: "¿Cuál es su enfoque para el branding?",
          content: "Nuestro enfoque en branding se centra en comprender la esencia de su marca para desarrollar una identidad visual y verbal coherente y poderosa. Creamos logotipos, guías de estilo, y mensajes que resuenan con su público objetivo.",
        },
        {
          id: "f4",
          title: "¿Pueden trabajar con empresas de cualquier tamaño?",
          content: "Sí, en Gallica trabajamos con empresas de todos los tamaños, desde startups y pymes hasta grandes corporaciones. Adaptamos nuestras estrategias y servicios para satisfacer las necesidades y presupuestos específicos de cada cliente.",
        },
      ]}
      sideTitle="Preguntas Frecuentes"
      sideDescription="Encuentre respuestas a las dudas más comunes sobre nuestros servicios y cómo trabajamos."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Contáctenos"
      tagIcon={Mail}
      tagAnimation="blur-reveal"
      title="Haga Crecer su Marca con Gallica"
      description="Estamos listos para escuchar su visión y transformar sus desafíos en oportunidades de éxito. Nuestro equipo experto espera por usted."
      buttons={[
        {
          text: "Envíanos un Correo",
          href: "mailto:danielaaup@gallicaagency.com",
        },
        {
          text: "Llámanos",
          href: "tel:+50670974320",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Navegación",
          items: [
            {
              label: "Inicio",
              href: "#hero",
            },
            {
              label: "Nosotros",
              href: "#about",
            },
            {
              label: "Servicios",
              href: "#services",
            },
            {
              label: "Clientes",
              href: "#clients",
            },
            {
              label: "Contacto",
              href: "#contact",
            },
          ],
        },
        {
          title: "Servicios",
          items: [
            {
              label: "SEO",
              href: "#services",
            },
            {
              label: "Redes Sociales",
              href: "#services",
            },
            {
              label: "Contenido",
              href: "#services",
            },
            {
              label: "Branding",
              href: "#",
            },
            {
              label: "Publicidad",
              href: "#",
            },
          ],
        },
        {
          title: "Contacto",
          items: [
            {
              label: "Teléfono: +506 70974320",
              href: "tel:+50670974320",
            },
            {
              label: "Email: danielaaup@gallicaagency.com",
              href: "mailto:danielaaup@gallicaagency.com",
            },
          ],
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ErxHhUvpnOyOBzMUTphfYSPJot/uploaded-1781119552658-dw9ypbt8.png"
      logoAlt="Logo de Gallica"
      logoText="Gallica"
      copyrightText="© 2024 Gallica. Todos los derechos reservados."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
