"use client";

import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
  Users,
  Building,
  Globe,
  Zap,
  Award,
  CheckCircle,
  Lightbulb,
  Twitter,
  Linkedin,
  Github,
} from "lucide-react";

export default function AboutPage() {
  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="aurora"
      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="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="CloudSync has transformed how teams collaborate and automate their workflows worldwide"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              icon: Users,
              title: "Active Users",
              value: "50,000+",
            },
            {
              id: "2",
              icon: Building,
              title: "Enterprise Clients",
              value: "1,200+",
            },
            {
              id: "3",
              icon: Globe,
              title: "Countries Served",
              value: "85+",
            },
            {
              id: "4",
              icon: Award,
              title: "Years Trusted",
              value: "8+",
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Trusted by Industry Leaders"
          description="Hear from the teams and companies that power their operations with CloudSync"
          tag="Customer Stories"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Operations Director",
              company: "TechFlow Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-a-confident-wom-1772484361224-191e8bae.png?_wi=2",
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "CTO",
              company: "InnovateLab",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-an-asian-man-in-1772484361289-886f28b6.png?_wi=2",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "CEO",
              company: "GrowthCo",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-a-latina-woman--1772484360873-51cfd050.png?_wi=2",
            },
            {
              id: "4",
              name: "David Kim",
              role: "Product Manager",
              company: "CloudWorks",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBMvIz3X0Osbgvb61KTzyrNiE/professional-headshot-of-an-asian-man-in-1772484361243-e20eca29.png?_wi=2",
            },
          ]}
          kpiItems={[
            { value: "98%", label: "Customer Satisfaction" },
            { value: "4.9/5", label: "Average Rating" },
            { value: "180+", label: "Success Stories" },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="About CloudSync"
          sideDescription="Learn more about our mission and values"
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",
              title: "What is CloudSync's mission?",
              content:
                "Our mission is to empower teams worldwide by providing enterprise-grade data synchronization and workflow automation that is intuitive, secure, and accessible to organizations of all sizes.",
            },
            {
              id: "2",
              title: "When was CloudSync founded?",
              content:
                "CloudSync was founded in 2017 by a team of software engineers and business leaders who recognized the need for a modern, user-friendly data synchronization platform.",
            },
            {
              id: "3",
              title: "Where is CloudSync based?",
              content:
                "CloudSync is headquartered in San Francisco, California, with offices and team members distributed across North America, Europe, and Asia-Pacific.",
            },
          ]}
        />
      </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>
  );
}