"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";

export default function WebAgency2Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="metallic"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="Webild"
          navItems={[
            { name: "Inicio", id: "/" },
            { name: "Portafolio", id: "/portafolio" },
            { name: "Servicios", id: "services" },
            { name: "Nosotros", id: "about" },
            { name: "Contacto", id: "/contacto" },
            { name: "Política de Privacidad", id: "/privacy-policy" }
          ]}
          button={{ text: "Comenzar", href: "/contacto" }}
        />
        <HeroSplitDoubleCarousel
          title="Creamos Experiencias Digitales"
          description="Transforma tu marca con diseño web y desarrollo de vanguardia. Creamos sitios web impresionantes que convierten visitantes en clientes."
          tag="Agencia Galardonada"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "canvas-reveal" }}
          buttons={[
            { text: "Iniciar Proyecto", href: "/contacto" },
            { text: "Ver Portafolio", href: "/portafolio" },
          ]}
          buttonAnimation="slide-up"
          carouselPosition="right"
          leftCarouselItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Diseño UI UX - Aplicación Daily Life" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Diseño UI UX - Plataforma SaaS" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Diseño UI UX - Cuidado de la piel Luminé" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "Diseño UI UX - Cursos en línea" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "Diseño UI UX - Coach de negocios" },
          ]}
          rightCarouselItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Diseño UI UX - Viajes Luxuria" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "Diseño UI UX - Clínica dental" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "Diseño UI UX - Constructor de productos con IA" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "Diseño UI UX - Automatización con IA" },
          ]}
          carouselItemClassName="!aspect-[4/5]"
        />
        <FeatureBento
          title="Nuestros Servicios"
          description="Ofrecemos un paquete completo de servicios digitales para ayudar a tu marca a destacar en línea."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          buttons={[{ text: "Todos los Servicios", href: "#services" }]
          }
          buttonAnimation="slide-up"
          features={[
            {
              title: "SEO",              description: "Optimizamos tu sitio web para que ocupe un lugar más alto en los motores de búsqueda y genere tráfico orgánico.",              bentoComponent: "marquee",              centerIcon: Search,
              variant: "text",              texts: ["Palabras Clave", "Backlinks", "Meta Etiquetas", "Tráfico Orgánico", "Clasificaciones", "Análisis", "SERP", "Indexación"],
            },
            {
              title: "Desarrollo Web",              description: "Sitios web personalizados, rápidos, responsivos y diseñados para convertir.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Proyecto web - Plataforma AgentFlow AI" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Proyecto web - Estudio de arquitectura" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Proyecto web - Summit Roofing" },
              ],
            },
            {
              title: "Marca",              description: "Construye una identidad de marca memorable que resuene con tu audiencia.",              bentoComponent: "media-stack",              items: [
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Proyecto de marca 1" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Proyecto de marca 2" },
                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Proyecto de marca 3" },
              ],
            },
          ]}
        />
        <FeatureCardTwentySix
          title="Nuestro Portafolio"
          description="Una selección de proyectos que hemos creado para clientes en diversas industrias."
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Ver Todo el Portafolio", href: "/portafolio" }]
          }
          buttonAnimation="slide-up"
          cardClassName="!h-auto aspect-video"
          features={[
            {
              title: "Umbra Skincare",              description: "Comercio electrónico de fragancias de lujo",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",              imageAlt: "Sitio web de Umbra Skincare",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Luxuria Travel",              description: "Experiencias de viaje de lujo a medida",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",              imageAlt: "Sitio web de Luxuria Travel",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Cuidado Dental",              description: "Clínica dental de primera categoría",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",              imageAlt: "Sitio web de Luxury Dental Care",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Summit Roofing",              description: "Servicios profesionales de techado",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp",              imageAlt: "Sitio web de Summit Roofing",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
            {
              title: "Bienes Raíces en Dubái",              description: "Listados de propiedades de lujo",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp",              imageAlt: "Sitio web de Bienes Raíces en Dubái",              buttonIcon: ArrowUpRight,
              buttonHref: "#"},
          ]}
        />
        <FeatureBento
          title="Nuestra Promesa"
          description="Ofrecemos resultados que hablan por sí mismos."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "Optimización para Todos los Dispositivos",              description: "Sitios web pixel-perfectos que se ven impresionantes en cada tamaño de pantalla y dispositivo.",              bentoComponent: "phone",              statusIcon: Lock,
              alertIcon: Monitor,
              alertTitle: "Verificación Responsiva",              alertMessage: "Todos los puntos de interrupción pasaron",              apps: [
                { name: "Teléfono", icon: Phone },
                { name: "SMS", icon: MessageCircle },
                { name: "Libros", icon: BookOpen },
                { name: "TV", icon: Tv },
                { name: "Cámara", icon: Camera },
                { name: "Música", icon: Music },
                { name: "Ajustes", icon: Settings },
                { name: "Chat", icon: MessageCircle },
              ],
            },
            {
              title: "Alojamiento Seguro",              description: "Seguridad de nivel empresarial y 99.9% de tiempo de actividad para tu sitio web.",              bentoComponent: "reveal-icon",              icon: Shield,
            },
            {
              title: "Entrega Rápida",              description: "Del concepto al lanzamiento en tiempo récord sin sacrificar calidad.",              bentoComponent: "timeline",              heading: "Lanzamiento del Proyecto",              subheading: "Semana 1",              items: [
                { label: "Descubrimiento y wireframes", detail: "Día 1-3" },
                { label: "Diseño y desarrollo", detail: "Día 4-10" },
                { label: "Pruebas y despliegue", detail: "Día 11-14" },
              ],
              completedLabel: "En Vivo"},
            {
              title: "Integraciones Perfectas",              description: "Conéctate con las herramientas que ya utilizas: CRMs, análisis, pagos y más.",              bentoComponent: "orbiting-icons",              centerIcon: Puzzle,
              items: [
                { icon: Shield },
                { icon: Monitor },
                { icon: Zap },
                { icon: TrendingUp },
              ],
            },
            {
              title: "Tendencias de Crecimiento",              description: "Análisis de datos para optimizar tu presencia en búsquedas y generar tráfico.",              bentoComponent: "line-chart"},
          ]}
        />
        <TestimonialCardFifteen
          testimonial="Webild transformó completamente nuestra presencia en línea. El equipo entregó un sitio web impresionante que superó nuestras expectativas y duplicó nuestra tasa de conversión."
          rating={5}
          author="— Maria Santos, CEO en Luxuria Travel"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Cliente" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
        <MetricCardOne
          title="Confiado por Líderes de la Industria"
          description="Años de experiencia construyendo productos digitales que generan resultados reales."
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "projects", value: "100+", title: "Proyectos", description: "Entregados con éxito en todas las industrias", icon: Award },
            { id: "satisfaction", value: "99%", title: "Satisfacción", description: "Tasa de satisfacción del cliente y en aumento", icon: Users },
            { id: "years", value: "8+", title: "Años", description: "Creando experiencias digitales excepcionales", icon: TrendingUp },
          ]}
        />
        <FeatureCardSixteen
          title="¿Por Qué Elegir a Webild?"
          description="Descubre la diferencia que hace una agencia web profesional."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          negativeCard={{
            items: [
              "Plantillas genéricas sin personalidad",              "Tiempos de carga lentos y bajo rendimiento",              "Sin estrategia SEO ni visibilidad en búsquedas",              "Diseño obsoleto que daña la credibilidad",              "Sin soporte continuo después del lanzamiento"],
          }}
          positiveCard={{
            items: [
              "Diseños personalizados a medida de tu marca",              "Rendimiento ultrarrápido en todos los dispositivos",              "SEO integrado para generar tráfico orgánico",              "Diseño moderno que genera confianza",              "Soporte y mantenimiento dedicados"],
          }}
        />
        <TeamCardFive
          title="Conoce al Equipo"
          description="Las mentes creativas detrás de tu próximo proyecto."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          mediaClassName="object-[65%_center]"
          team={[
            { id: "1", name: "Sarah Miller", role: "Desarrolladora Líder", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Sarah Miller" },
            { id: "2", name: "Valentina Reyes", role: "Directora Creativa", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "Valentina Reyes" },
            { id: "3", name: "Carlos Mendoza", role: "Diseñador UX", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Carlos Mendoza" },
          ]}
        />
        <FaqBase
          title="Preguntas Frecuentes"
          description="Todo lo que necesitas saber sobre cómo trabajar con nosotros."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            { id: "1", title: "¿Cuánto tiempo suele tardar un proyecto típico?", content: "La mayoría de los proyectos se completan en 2-4 semanas, dependiendo del alcance y la complejidad. Proporcionaremos un cronograma detallado durante nuestra consulta inicial." },
            { id: "2", title: "¿Cuál es su estructura de precios?", content: "Ofrecemos precios basados en proyectos adaptados a tus necesidades. Cada proyecto incluye diseño, desarrollo, optimización SEO y soporte post-lanzamiento." },
            { id: "3", title: "¿Ofrecen mantenimiento continuo?", content: "¡Sí! Ofrecemos paquetes de soporte y mantenimiento continuo para mantener tu sitio web actualizado, seguro y funcionando al máximo." },
            { id: "4", title: "¿Pueden rediseñar mi sitio web existente?", content: "Absolutamente. Nos especializamos en rediseños de sitios web que modernizan tu marca mientras preservamos tu contenido existente y las clasificaciones SEO." },
            { id: "5", title: "¿Qué tecnologías utilizan?", content: "Construimos con tecnologías modernas como Next.js, React y Tailwind CSS para asegurar sitios web rápidos, escalables y fáciles de mantener." },
          ]}
        />
        <ContactCTA
          tag="Ponte en Contacto"
          title="¿Listo para Transformar tu Presencia Digital?"
          description="Construyamos algo extraordinario juntos. Ponte en contacto y hablemos de tu próximo proyecto."
          background={{ variant: "rotated-rays-animated" }}
          buttons={[
            { text: "Iniciar Tu Proyecto", href: "/contacto" },
            { text: "Ver Nuestro Portafolio", href: "/portafolio" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
        <FooterBase
          logoText="Webild"
          copyrightText="© 2026 | Webild"
          columns={[
            {
              title: "Compañía",              items: [
                { label: "Inicio", href: "/" },
                { label: "Nosotros", href: "#about" },
                { label: "Servicios", href: "#services" },
                { label: "Portafolio", href: "/portafolio" },
                { label: "Contacto", href: "/contacto" },
                { label: "Política de Privacidad", href: "/privacy-policy" }
              ],
            },
            {
              title: "Servicios",              items: [
                { label: "Desarrollo Web", href: "#" },
                { label: "SEO", href: "#" },
                { label: "Marca", href: "#" },
                { label: "Diseño UI/UX", href: "#" },
              ],
            },
            {
              title: "Conectar",              items: [
                { label: "Twitter", href: "#" },
                { label: "LinkedIn", href: "#" },
                { label: "Instagram", href: "#" },
                { label: "Dribbble", href: "#" },
              ],
            },
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
