"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Award, Zap } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="AgentAI"
          navItems={[
            { name: "Features", id: "/#features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Docs", id: "https://docs.example.com" }
          ]}
          button={{ text: "Start Free Trial", href: "/contact" }}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Enterprise Trust"
          title="Transforming how enterprises automate complex business processes with AI agents that deliver measurable results"
          description="Sarah Chen"
          subdescription="VP Operations, Fortune 500 Tech Company"
          icon={Sparkles}
          imageSrc="http://img.b2bpic.net/free-photo/relaxed-coworkers-office-having-fun-chatting-while-reviewing-documents_482257-126482.jpg"
          imageAlt="enterprise team business collaboration office"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Proven Impact at Scale"
          description="Real results from enterprises transforming their operations with AgentAI"
          tag="Results"
          metrics={[
            {
              id: "1",              value: "78%",              description: "Average Process Automation Increase"
            },
            {
              id: "2",              value: "2.3x",              description: "Return on Investment in Year One"
            },
            {
              id: "3",              value: "1,200+",              description: "Active Enterprise Deployments"
            },
            {
              id: "4",              value: "99.9%",              description: "Platform Uptime & Reliability"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Transform Your Operations?"
          description="Join hundreds of enterprises using AgentAI to automate complex workflows, reduce costs, and accelerate growth. Start your free trial today or schedule a demo with our team."
          tagIcon={Zap}
          inputPlaceholder="Enter your work email"
          buttonText="Start Free Trial"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. No credit card required."
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBaseCard
        logoText="AgentAI"
        copyrightText="© 2025 AgentAI Inc. 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", href: "/about" },
              { label: "Blog", href: "#" },
              { label: "Careers", href: "#" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Developers",            items: [
              { label: "Documentation", href: "https://docs.example.com" },
              { label: "API Reference", href: "#" },
              { label: "GitHub", href: "#" },
              { label: "Integration Hub", href: "#" }
            ]
          },
          {
            title: "Legal",            items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Compliance", href: "#" },
              { label: "Cookie Settings", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}