"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TeamCardSix from "@/components/sections/team/TeamCardSix";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Users, Star, Megaphone } from "lucide-react";

export default function NosotrosPage() {
  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="about" data-section="about">
          <AboutMetric
            title="Somos Webild: Innovación y Creatividad Digital"
            metrics={[
              { icon: Users, label: "Clientes Satisfechos", value: "300+" },
              { icon: Star, label: "Años de Experiencia", value: "10+" },
              { icon: Megaphone, label: "Proyectos Completados", value: "500+" },
            ]}
            metricsAnimation="slide-up"
            useInvertedBackground={false}
          />
        </div>

        <div id="team" data-section="team">
          <TeamCardSix
            title="Nuestro Equipo Apasionado"
            description="Conozca a los profesionales detrás de cada proyecto exitoso."
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            members={[
              {
                id: "1",                name: "Juan Pérez",                role: "CEO & Fundador",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp",                imageAlt: "Juan Pérez"},
              {
                id: "2",                name: "María García",                role: "Directora Creativa",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp",                imageAlt: "María García"},
              {
                id: "3",                name: "Carlos Sánchez",                role: "Desarrollador Líder",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp",                imageAlt: "Carlos Sánchez"},
            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFive
            title="Lo que dicen nuestros clientes"
            description="La satisfacción de nuestros clientes es nuestra mayor prioridad."
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              {
                id: "1",                name: "Ana Fernández",                date: "2023-01-15",                title: "Un equipo excepcional",                quote: "Webild transformó nuestra presencia online. Su dedicación y creatividad son inigualables.",                tag: "Diseño Web",                avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/avatar-1.webp",                avatarAlt: "Ana Fernández"},
              {
                id: "2",                name: "Roberto Gómez",                date: "2023-03-20",                title: "Resultados sobresalientes",                quote: "Profesionales de principio a fin. Superaron todas nuestras expectativas en desarrollo.",                tag: "Desarrollo SEO",                avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/avatar-2.webp",                avatarAlt: "Roberto Gómez"},
            ]}
          />
        </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>
  );
}
