"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Globe, Smartphone, Code, Zap, Shield, Lightbulb } from "lucide-react";

const ServicesPage = () => {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Portfolio", id: "/portfolio" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Services", href: "services" },
        { label: "Portfolio", href: "portfolio" },
        { label: "Pricing", href: "#" },
        { label: "Security", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "about" },
        { label: "Our Team", href: "about" },
        { label: "Blog", href: "#" },
        { label: "Contact", href: "contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "Facebook", href: "https://facebook.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
      </div>

      {/* Services - Detailed Feature Section */}
      <div id="services-detailed" data-section="services-detailed">
        <FeatureHoverPattern
          title="Our Complete Service Offering"
          description="Comprehensive digital solutions tailored to transform your business. From web development to mobile apps and custom solutions, we deliver excellence across every project."
          tag="Service Details"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          features={[
            {
              icon: Globe,
              title: "Website Development",              description:
                "Custom responsive websites designed for conversion. We create user-friendly, scalable platforms that establish your digital presence and engage your audience effectively.",              button: { text: "Learn More", href: "services" },
            },
            {
              icon: Smartphone,
              title: "Mobile App Development",              description:
                "Native and cross-platform applications for iOS and Android. We build intuitive, high-performance mobile solutions that solve real problems and drive user engagement.",              button: { text: "Learn More", href: "services" },
            },
            {
              icon: Code,
              title: "Custom Development Solutions",              description:
                "Bespoke software tailored to your unique business needs. From backend systems to complex integrations, we architect scalable solutions that grow with your business.",              button: { text: "Learn More", href: "services" },
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttonAnimation="blur-reveal"
          ariaLabel="Detailed services section"
        />
      </div>

      {/* Additional Services - Performance & Security */}
      <div id="services-advanced" data-section="services-advanced">
        <FeatureHoverPattern
          title="Advanced Solutions & Support"
          description="Beyond development, we provide ongoing optimization and enterprise-grade support to ensure your digital solutions remain competitive and secure."
          tag="Advanced Services"
          tagIcon={Shield}
          tagAnimation="slide-up"
          features={[
            {
              icon: Zap,
              title: "Performance Optimization",              description:
                "Lightning-fast applications and websites optimized for speed. We analyze, optimize, and enhance every aspect to deliver exceptional user experience and SEO benefits.",              button: { text: "Learn More", href: "services" },
            },
            {
              icon: Shield,
              title: "Security & Compliance",              description:
                "Enterprise-grade security implementation and compliance management. We protect your data with industry-standard practices and meet regulatory requirements.",              button: { text: "Learn More", href: "services" },
            },
            {
              icon: Code,
              title: "Maintenance & Support",              description:
                "Ongoing technical support and maintenance services. We ensure your applications remain stable, updated, and optimized with dedicated support teams.",              button: { text: "Learn More", href: "services" },
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="blur-reveal"
          ariaLabel="Advanced services section"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
          ariaLabel="Footer section"
        />
      </div>
    </ThemeProvider>
  );
};

export default ServicesPage;