"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap, Quote } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "Products", id: "/products" },
  { name: "Pricing", id: "/pricing" },
  { name: "About", id: "/about" },
  { name: "Contact", id: "/contact" },
];

const footerColumns = [
  {
    title: "Company",
    items: [
      { label: "About Us", href: "/about" },
      { label: "Our Services", href: "/services" },
      { label: "Products", href: "/products" },
      { label: "Blog", href: "#" },
    ],
  },
  {
    title: "Solutions",
    items: [
      { label: "Web Development", href: "/services" },
      { label: "Mobile Apps", href: "/services" },
      { label: "Cloud Services", href: "/services" },
      { label: "E-commerce", href: "/services" },
    ],
  },
  {
    title: "Contact",
    items: [
      { label: "Email: connect@codesniffs.com", href: "mailto:connect@codesniffs.com" },
      { label: "Phone: +91 91676 20778", href: "tel:+919167620778" },
      { label: "Mumbai, India", href: "#" },
      { label: "Get in Touch", href: "/contact" },
    ],
  },
];

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CodeSniffs"
          navItems={navItems.map((item) => ({
            name: item.name,
            id: item.id,
          }))}
          button={{
            text: "Start Project",
            href: "/contact",
          }}
        />
      </div>

      <div id="services-detail" data-section="services-detail">
        <FeatureCardThree
          title="Our Services"
          description="Comprehensive digital solutions designed to transform your business and accelerate growth. We provide end-to-end software development services tailored to your specific needs."
          tag="What We Offer"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: "01",
              title: "Web Development",
              description: "Custom web applications and responsive websites built with modern technologies for optimal performance. From simple websites to complex SaaS platforms, we deliver scalable solutions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/professional-web-development-workspace-s-1772881146240-2fb6b6ed.png?_wi=2",
              imageAlt: "Web Development Services",
            },
            {
              id: "02",
              title: "Mobile App Development",
              description: "Native and cross-platform mobile applications for iOS and Android with exceptional user experience. We build apps that engage users and drive business results.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/mobile-app-development-interface-showing-1772881146088-1847b2f6.png?_wi=2",
              imageAlt: "Mobile App Development",
            },
            {
              id: "03",
              title: "Cloud Solutions",
              description: "Scalable cloud infrastructure and services for secure, reliable, and cost-effective operations. We help you migrate to cloud and optimize your infrastructure.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/cloud-infrastructure-visualization-with--1772881145860-51526f1c.png?_wi=2",
              imageAlt: "Cloud Solutions Services",
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground={false}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardThree
          title="Our Development Process"
          description="A systematic approach ensuring quality, timely delivery, and exceptional results for every project."
          tag="How We Work"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: "01",
              title: "Requirement Gathering",
              description: "We deeply understand your business needs, goals, and technical requirements through detailed consultation.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/business-consultation-meeting-showing-st-1772881146105-e7763d39.png?_wi=1",
              imageAlt: "Requirement Gathering",
            },
            {
              id: "02",
              title: "Design & Planning",
              description: "Creating wireframes, mockups, and technical architecture aligned with your vision and best practices.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/design-studio-workspace-showing-wirefram-1772881146316-a2004155.png?_wi=1",
              imageAlt: "Design & Planning",
            },
            {
              id: "03",
              title: "Development & Testing",
              description: "Agile development with clean code, regular updates, comprehensive testing, and transparent communication throughout the project.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/development-team-working-on-code-impleme-1772881146228-ee1ef7db.png?_wi=1",
              imageAlt: "Development Phase",
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Client Success Stories"
          description="See how our services have helped businesses achieve their goals and transform their operations."
          tag="Client Feedback"
          tagIcon={Quote}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Rajesh Kumar",
              role: "CEO",
              company: "TechFlow Solutions",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/professional-portrait-photograph-of-a-co-1772881145274-12e7a02d.png?_wi=2",
              imageAlt: "Rajesh Kumar",
            },
            {
              id: "2",
              name: "Priya Sharma",
              role: "Founder",
              company: "Digital Innovations Ltd",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/professional-portrait-photograph-of-a-co-1772881144961-0bd0dd2c.png?_wi=2",
              imageAlt: "Priya Sharma",
            },
            {
              id: "3",
              name: "Amit Patel",
              role: "Operations Manager",
              company: "E-Commerce Hub",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/professional-portrait-photograph-of-a-ma-1772881145220-281dfd92.png?_wi=2",
              imageAlt: "Amit Patel",
            },
          ]}
          kpiItems={[
            {
              value: "150+",
              label: "Service Projects",
            },
            {
              value: "97%",
              label: "On-time Delivery",
            },
            {
              value: "12+",
              label: "Years Experience",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="CodeSniffs"
          copyrightText="© 2025 CodeSniffs. All rights reserved. Software Solutions Agency, Mumbai, India."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}