"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";

export default function ServiciosPage() {
  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>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="Webild"
            navItems={[
              { name: "Inicio", id: "/" },
              { name: "Portafolio", id: "/portafolio" },
              { name: "Servicios", id: "/servicios" },
              { name: "Nosotros", id: "/nosotros" },
              { name: "Contacto", id: "/contacto" },
            ]}
            button={{ text: "Empezar", href: "#contact" }}
          />
        </div>

        <div id="servicios" data-section="servicios">
          <FeatureCardTwentyOne
            tag="NUESTROS SERVICIOS"
            title="Soluciones Digitales Integrales para su Éxito"
            description="Ofrecemos un espectro completo de servicios para potenciar su presencia online y alcanzar sus metas de negocio."
            useInvertedBackground={false}
            mediaAnimation="slide-up"
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/services-1.webp"
            imageAlt="Servicios Integrales"
            mediaPosition="left"
            accordionItems={[
              {
                id: "1",                title: "Diseño Web Personalizado",                content: "Creamos sitios web atractivos, funcionales y optimizados para cualquier dispositivo, reflejando la identidad de su marca."},
              {
                id: "2",                title: "Desarrollo de Aplicaciones",                content: "Construimos aplicaciones web y móviles robustas y escalables, adaptadas a sus necesidades específicas."},
              {
                id: "3",                title: "Optimización SEO y Marketing Digital",                content: "Mejoramos su visibilidad en buscadores y desarrollamos estrategias de marketing digital para atraer a su público objetivo."},
              {
                id: "4",                title: "Consultoría Estratégica",                content: "Ofrecemos asesoramiento experto para guiar su estrategia digital y maximizar el retorno de su inversión."},
            ]}
          />
        </div>

        <div id="precios" data-section="precios">
          <PricingCardOne
            title="Planes Flexibles para Cada Necesidad"
            description="Elija el plan que mejor se adapte a sus objetivos y presupuesto."
            textboxLayout="default"
            useInvertedBackground={true}
            animationType="slide-up"
            plans={[
              {
                id: "1",                badge: "Básico",                price: "$500",                subtitle: "Ideal para empezar",                features: [
                  "Diseño responsivo",                  "Integración de redes sociales",                  "Formulario de contacto",                  "Soporte básico"],
              },
              {
                id: "2",                badge: "Estándar",                price: "$1,200",                subtitle: "Para crecer su negocio",                features: [
                  "Todo lo básico",                  "Blog integrado",                  "Optimización SEO inicial",                  "Galería de imágenes",                  "Soporte prioritario"],
              },
              {
                id: "3",                badge: "Premium",                price: "$2,500",                subtitle: "Soluciones a medida",                features: [
                  "Todo lo estándar",                  "Desarrollo personalizado",                  "Integración de e-commerce",                  "Analítica avanzada",                  "Consultoría estratégica",                  "Soporte 24/7"],
              },
            ]}
          />
        </div>

        <div id="faqs" data-section="faqs">
          <FaqSplitMedia
            title="Preguntas Frecuentes"
            description="Respuestas a las dudas más comunes sobre nuestros servicios y procesos."
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/faq-1.webp"
            imageAlt="FAQs"
            mediaPosition="right"
            mediaAnimation="slide-up"
            faqsAnimation="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            faqs={[
              {
                id: "1",                title: "¿Cuánto tiempo toma desarrollar un sitio web?",                content: "El tiempo varía según la complejidad del proyecto, pero generalmente un sitio web básico puede tomar de 4 a 6 semanas."},
              {
                id: "2",                title: "¿Ofrecen servicios de mantenimiento post-lanzamiento?",                content: "Sí, ofrecemos planes de mantenimiento y soporte para asegurar que su sitio web funcione sin problemas y esté siempre actualizado."},
              {
                id: "3",                title: "¿Cómo se maneja el proceso de diseño y aprobación?",                content: "Trabajamos en fases: investigación, diseño conceptual, desarrollo, revisiones y aprobación final. Le mantenemos informado en cada paso."},
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="Webild"
            copyrightText="© 2026 | Webild"
            columns={[
              {
                title: "Empresa",                items: [
                  { label: "Inicio", href: "/" },
                  { label: "Portafolio", href: "/portafolio" },
                  { label: "Servicios", href: "/servicios" },
                  { label: "Nosotros", href: "/nosotros" },
                  { label: "Contacto", href: "/contacto" },
                ],
              },
              {
                title: "Servicios",                items: [
                  { label: "Diseño Web", href: "/servicios" },
                  { label: "Desarrollo", href: "/servicios" },
                  { label: "SEO", href: "/servicios" },
                  { label: "Branding", href: "/servicios" },
                ],
              },
              {
                title: "Conectar",                items: [
                  { label: "Twitter", href: "#" },
                  { label: "LinkedIn", href: "#" },
                  { label: "Instagram", href: "#" },
                ],
              },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
