"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { TrendingUp, Users, Shield, Globe, MessageCircle } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="CryptoVault"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Launch App", href: "https://app.example.com" }}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Journey in Numbers"
          description="Since 2019, we've built the most trusted cryptocurrency trading platform with proven results"
          tag="About Us"
          tagIcon={TrendingUp}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          metrics={[
            {
              id: "founded",
              value: "2019",
              title: "Founded",
              description: "Year we started revolutionizing crypto trading",
              icon: TrendingUp
            },
            {
              id: "team",
              value: "200+",
              title: "Team Members",
              description: "Expert engineers and financial professionals",
              icon: Users
            },
            {
              id: "security",
              value: "Zero",
              title: "Breaches",
              description: "Perfect security track record since launch",
              icon: Shield
            },
            {
              id: "awards",
              value: "15+",
              title: "Industry Awards",
              description: "Recognition for innovation and security",
              icon: Globe
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Trusted by Industry Leaders"
          description="Hear from the professionals who rely on CryptoVault for their trading operations"
          tag="Reviews"
          tagIcon={MessageCircle}
          textboxLayout="default"
          animationType="blur-reveal"
          speed={35}
          testimonials={[
            {
              id: "7",
              name: "Alexandra Martinez",
              handle: "@alextrading_pro",
              testimonial: "CryptoVault's institutional features are unmatched. The deep liquidity and execution quality make it our go-to platform for large trades.",
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",
              imageAlt: "profile avatar user person professional"
            },
            {
              id: "8",
              name: "Robert Kim",
              handle: "@robfund_manager",
              testimonial: "As a fund manager, security and compliance are paramount. CryptoVault exceeds all our requirements with transparent reporting.",
              imageSrc: "https://img.b2bpic.net/free-vector/male-female-avatars-flat-design_23-2147528437.jpg",
              imageAlt: "avatar portrait business professional user"
            },
            {
              id: "9",
              name: "Diana Petrov",
              handle: "@diana_crypto_analyst",
              testimonial: "The advanced charting tools and real-time data feeds are exceptional. Perfect for technical analysis and market research.",
              imageSrc: "https://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg",
              imageAlt: "profile avatar user person professional"
            },
            {
              id: "10",
              name: "Marcus Thompson",
              handle: "@marcus_defi",
              testimonial: "Integration with DeFi protocols is seamless. CryptoVault bridges traditional and decentralized finance perfectly.",
              imageSrc: "https://img.b2bpic.net/free-vector/variety-avatars-flat-design_23-2147662095.jpg",
              imageAlt: "avatar portrait business professional user"
            },
            {
              id: "11",
              name: "Sofia Chang",
              handle: "@sofia_blockchain",
              testimonial: "Customer service is outstanding. 24/7 support with actual blockchain experts who understand the technology deeply.",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",
              imageAlt: "profile avatar user person professional"
            },
            {
              id: "12",
              name: "Andrew Foster",
              handle: "@andrew_institutional",
              testimonial: "Risk management tools are industry-leading. The platform helps us maintain strict compliance while maximizing trading opportunities.",
              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-people-avatar-collection_23-2148074529.jpg",
              imageAlt: "avatar portrait business professional user"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterLogoReveal
        logoText="CryptoVault"
        logoLineHeight={1.1}
      />
    </ThemeProvider>
  );
}