"use client";

import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
  ArrowRight,
  Shield,
  Zap,
  TrendingUp,
  Plug,
  Headphones,
  Users,
  Building,
  Globe,
  Award,
  Twitter,
  Linkedin,
  Github,
} from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Features", id: "/services" },
    { name: "Pricing", id: "/pricing" },
    { name: "About", id: "/about" },
    { name: "Resources", id: "/resources" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CloudSync"
          navItems={navItems}
          button={{
            text: "Get Started",            href: "/pricing"}}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySix
          title="Powerful Features Built for Your Team"
          description="Everything you need to streamline collaboration and automate workflows"
          tag="Core Features"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "Real-Time Synchronization",              description: "Instant data sync across all your tools and platforms",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-data-synchronization-acr-1772484361833-8ba061d5.png?_wi=3",              imageAlt: "Real-time sync feature",              buttonIcon: ArrowRight,
              buttonHref: "#"},
            {
              title: "Advanced Security",              description: "Enterprise-grade encryption and compliance standards",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/abstract-illustration-of-security-and-en-1772484363252-dbad034c.png?_wi=3",              imageAlt: "Security features",              buttonIcon: Shield,
              buttonHref: "#"},
            {
              title: "Custom Workflows",              description: "Build automation tailored to your unique processes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-workflow-automation-and--1772484362726-ba10f98d.png?_wi=3",              imageAlt: "Workflow customization",              buttonIcon: Zap,
              buttonHref: "#"},
            {
              title: "Analytics Dashboard",              description: "Deep insights into your data and team performance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/dashboard-analytics-visualization-with-m-1772484362759-1bcf8cea.png?_wi=3",              imageAlt: "Analytics dashboard",              buttonIcon: TrendingUp,
              buttonHref: "#"},
            {
              title: "API Integration",              description: "Connect with 500+ applications seamlessly",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-api-integration-and-conn-1772484361758-d7ab5707.png?_wi=3",              imageAlt: "API integrations",              buttonIcon: Plug,
              buttonHref: "#"},
            {
              title: "24/7 Support",              description: "Dedicated support team ready to help anytime",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/illustration-of-customer-support-and-ass-1772484362219-cbe7a847.png?_wi=3",              imageAlt: "Customer support",              buttonIcon: Headphones,
              buttonHref: "#"},
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Enterprise-Grade Capabilities"
          description="Built for teams that demand reliability and performance"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Team Collaboration",              value: "Unlimited"},
            {
              id: "2",              icon: Building,
              title: "Enterprise Scale",              value: "Ready"},
            {
              id: "3",              icon: Globe,
              title: "Global Coverage",              value: "85+"},
            {
              id: "4",              icon: Award,
              title: "Compliance",              value: "SOC 2"},
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Service Features"
          sideDescription="Learn more about our capabilities and service offerings"
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "What makes our platform different?",              content:
                "CloudSync combines enterprise-grade security with intuitive ease-of-use. Our platform supports 500+ integrations out of the box and scales from startups to enterprise organizations."},
            {
              id: "2",              title: "How does real-time sync work?",              content:
                "Our proprietary sync engine processes data in real-time with sub-second latency. Changes in one platform are instantly reflected across all connected systems with guaranteed data consistency."},
            {
              id: "3",              title: "What security standards do you comply with?",              content:
                "We comply with SOC 2 Type II, GDPR, HIPAA, and CCPA standards. All data is encrypted with AES-256, and we conduct quarterly security audits with third-party penetration testing."},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="CloudSync"
          copyrightText="© 2025 CloudSync. All rights reserved."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/cloudsync",              ariaLabel: "Twitter"},
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/cloudsync",              ariaLabel: "LinkedIn"},
            {
              icon: Github,
              href: "https://github.com/cloudsync",              ariaLabel: "GitHub"},
          ]}
        />
      </div>
    </ThemeProvider>
  );
}