"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Code, Monitor, Palette, ShoppingCart, Shield, Zap } from "lucide-react";

export default function ServicesPage() {
  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: "Work", href: "/#work" },
            { name: "Services", href: "/services" },
            { name: "About", href: "/#about" },
            { name: "Contact", href: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
        />
        <FeatureBorderGlow
          id="services"
          title="Our Web Design Services"
          description="From initial concept to launch, we offer a comprehensive suite of services to build your online success."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              icon: Palette,
              title: "UI/UX Design",              description: "Crafting intuitive and visually stunning interfaces that engage users and drive conversions."
            },
            {
              icon: Code,
              title: "Custom Web Development",              description: "Building bespoke, high-performance websites tailored to your unique business needs and goals."
            },
            {
              icon: Monitor,
              title: "Responsive Design",              description: "Ensuring your website looks and functions flawlessly across all devices, from desktops to smartphones."
            },
            {
              icon: Zap,
              title: "Performance Optimization",              description: "Optimizing your site for speed and efficiency, providing a seamless user experience and improved SEO."
            },
            {
              icon: ShoppingCart,
              title: "E-commerce Solutions",              description: "Developing powerful online stores with secure payment gateways and easy product management."
            },
            {
              icon: Shield,
              title: "Website Security",              description: "Implementing robust security measures to protect your website and user data from threats."
            }
          ]}
        />
        <FooterBase
          logoText="Webild"
          copyrightText="© 2026 | Webild"
          columns={[
            {
              title: "Company",              items: [
                { label: "About", href: "/#about" },
                { label: "Services", href: "/services" },
                { label: "Work", href: "/#work" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Web Development", href: "/services" },
                { label: "SEO", href: "/services" },
                { label: "Branding", href: "/services" },
                { label: "UI/UX Design", href: "/services" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "#" },
                { label: "LinkedIn", href: "#" },
                { label: "Instagram", href: "#" },
                { label: "Dribbble", href: "#" }
              ]
            }
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}