"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { TrendingUp, Users, Shield, Zap, MessageCircle } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SaaS Pro"
          navItems={[
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "https://app.example.com/signup"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Our Story"
          description={[
            "Founded in 2019, SaaS Pro emerged from a simple observation: teams were drowning in inefficient processes and disconnected tools. Our founders, experienced software architects and business leaders, saw an opportunity to revolutionize how modern businesses operate.",
            "We believe that technology should empower people, not overwhelm them. That's why we've built a platform that combines powerful automation with intuitive design, helping thousands of teams worldwide work smarter, not harder."
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Mission", href: "/contact" }
          ]}
        />
      </div>

      <div id="values" data-section="values">
        <TextSplitAbout
          title="Our Values"
          description={[
            "Innovation drives everything we do. We constantly push the boundaries of what's possible, developing cutting-edge solutions that anticipate our customers' needs before they even know they have them.",
            "Trust and transparency form the foundation of every relationship. We believe in open communication, honest feedback, and building products that our customers can rely on completely."
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Join Our Team", href: "#" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact"
          description="The numbers that showcase our commitment to excellence"
          tag="Company Growth"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",
              value: "500+",
              title: "Companies",
              description: "Trust us with their operations",
              icon: Users
            },
            {
              id: "2",
              value: "4",
              title: "Years",
              description: "Of continuous innovation",
              icon: Shield
            },
            {
              id: "3",
              value: "50M+",
              title: "Tasks",
              description: "Automated successfully",
              icon: Zap
            },
            {
              id: "4",
              value: "98%",
              title: "Satisfaction",
              description: "Customer satisfaction rate",
              icon: MessageCircle
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/man-wheelchair-having-office-job_23-2149571066.jpg"
          imageAlt="Team collaboration workspace"
          logoText="SaaS Pro"
          copyrightText="© 2025 SaaS Pro. All rights reserved."
          columns={[
            {
              title: "Product",
              items: [
                { label: "Features", href: "/features" },
                { label: "Pricing", href: "/pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "GDPR", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}