"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";

export default function PortafolioPage() {
  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="portafolio" data-section="portafolio">
          <ProductCardTwo
            title="Nuestro Trabajo Reciente"
            description="Una muestra de nuestros proyectos más destacados y la calidad que ofrecemos."
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              {
                id: "1",                brand: "Cliente A",                name: "Rediseño Corporativo",                price: "Diseño Web",                rating: 5,
                reviewCount: "4.8",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/portfolio-1.webp",                imageAlt: "Rediseño Corporativo"},
              {
                id: "2",                brand: "Cliente B",                name: "Plataforma E-commerce",                price: "Desarrollo Web",                rating: 5,
                reviewCount: "4.9",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/portfolio-2.webp",                imageAlt: "Plataforma E-commerce"},
              {
                id: "3",                brand: "Cliente C",                name: "Campaña de Marketing",                price: "SEO & Branding",                rating: 5,
                reviewCount: "4.7",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/portfolio-3.webp",                imageAlt: "Campaña de Marketing"},
            ]}
          />
        </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>
  );
}
