"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FooterBase from "@/components/sections/footer/FooterBase";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import { LayoutGrid, Search, Palette, PenTool, Megaphone, Users, Server, Cloud, Smartphone, TrendingUp, Brush } 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", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
        />

        <div id="services" data-section="services">
          <FeatureCardTwentyThree
            title="Our Comprehensive Services"
            description="We provide a full spectrum of digital solutions to elevate your brand and achieve your business goals."
            textboxLayout="default"
            useInvertedBackground={false}
            animationType="slide-up"
            features={[
              {
                id: "web-development",                title: "Web Design & Development",                tags: ["Frontend", "Backend", "CMS", "E-commerce"],
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp",                imageAlt: "Web development project"},
              {
                id: "seo-optimization",                title: "Search Engine Optimization (SEO)",                tags: ["Keywords", "Analytics", "Rankings"],
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp",                imageAlt: "SEO analysis dashboard"},
              {
                id: "branding",                title: "Branding & Identity",                tags: ["Logo Design", "Guidelines", "Strategy"],
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp",                imageAlt: "Branding elements"},
              {
                id: "ui-ux-design",                title: "UI/UX Design",                tags: ["User Research", "Wireframing", "Prototyping"],
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp",                imageAlt: "UI UX design mockups"},
              {
                id: "content-marketing",                title: "Content Marketing",                tags: ["Strategy", "Creation", "Distribution"],
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp",                imageAlt: "Content marketing strategy"},
              {
                id: "social-media",                title: "Social Media Management",                tags: ["Strategy", "Engagement", "Advertising"],
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp",                imageAlt: "Social media dashboard"},
            ]}
          />
        </div>

        <FooterBase
          logoText="Webild"
          copyrightText="© 2026 | Webild"
          columns={[
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Services", href: "/services" },
                { label: "Work", href: "/portfolio" },
                { 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>
  );
}
