"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="CryptoVault"
          navItems={[
            { name: "Platform", id: "/" },
            { name: "Security", id: "/about" },
            { name: "About", id: "/about" },
            { name: "Resources", id: "/faq" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout 
          title="Built on Trust, Powered by Innovation"
          description="Founded in 2018 by blockchain pioneers, CryptoVault emerged from a vision to create the most secure and transparent trading platform in the world. We've processed over $2 trillion in transactions while maintaining a perfect security record."
          tag="Our Story"
          imageSrc="https://img.b2bpic.net/free-vector/blockchain-concept_23-2147863445.jpg"
          imageAlt="Blockchain technology foundation"
          buttons={[{ text: "Start Trading", href: "/contact" }]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team-metrics" data-section="team-metrics">
        <MetricCardEleven 
          title="Our Global Impact"
          description="From a small team to a worldwide platform serving millions of users across 180+ countries."
          tag="Growth"
          metrics={[
            {
              id: "1",
              value: "180+",
              title: "Countries Served",
              description: "Global reach with local compliance and support",
              imageSrc: "https://img.b2bpic.net/free-photo/young-team-coworkers-working-project_273609-15664.jpg",
              imageAlt: "Global team collaboration"
            },
            {
              id: "2",
              value: "99.99%",
              title: "Platform Uptime",
              description: "Seven years of reliable, uninterrupted service",
              imageSrc: "https://img.b2bpic.net/free-photo/happiness-power-smile-opportunity-graph-growth_53876-134038.jpg",
              imageAlt: "Platform reliability metrics"
            },
            {
              id: "3",
              value: "$2T+",
              title: "Total Volume",
              description: "Processed securely since our founding in 2018",
              imageSrc: "https://img.b2bpic.net/free-photo/supporters-watching-their-team-win-game-mobile-phone_53876-132395.jpg",
              imageAlt: "Trading volume history"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="leadership" data-section="leadership">
        <TestimonialCardTwo 
          title="Meet Our Leadership"
          description="Industry veterans and blockchain pioneers driving the future of digital finance."
          tag="Leadership Team"
          testimonials={[
            {
              id: "1",
              name: "Alex Chen",
              role: "CEO & Co-Founder",
              testimonial: "Our mission is to democratize access to digital assets while maintaining the highest standards of security and transparency. Every decision we make puts our users first.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "Alex Chen, CEO"
            },
            {
              id: "2",
              name: "Dr. Maria Rodriguez",
              role: "CTO & Co-Founder",
              testimonial: "We've built CryptoVault from the ground up with security as the foundation. Our zero-breach record isn't luck—it's the result of rigorous engineering and constant vigilance.",
              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
              imageAlt: "Dr. Maria Rodriguez, CTO"
            },
            {
              id: "3",
              name: "James Wilson",
              role: "Head of Security",
              testimonial: "Trust is earned through transparency. That's why we undergo quarterly security audits and maintain the industry's most comprehensive insurance coverage for digital assets.",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",
              imageAlt: "James Wilson, Head of Security"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBaseReveal 
        columns={[
          {
            title: "Product",
            items: [
              { label: "Platform", href: "/" },
              { label: "Security", href: "/about" },
              { label: "API Docs", href: "https://docs.cryptovault.example" },
              { label: "Mobile App", href: "https://app.cryptovault.example" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "https://blog.cryptovault.example" },
              { label: "Careers", href: "https://careers.cryptovault.example" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Terms of Service", href: "https://cryptovault.example/terms" },
              { label: "Privacy Policy", href: "https://cryptovault.example/privacy" },
              { label: "Compliance", href: "https://cryptovault.example/compliance" },
              { label: "Security", href: "https://cryptovault.example/security" }
            ]
          }
        ]}
        copyrightText="© 2025 CryptoVault. All rights reserved. | Securing the future of digital finance."
      />
    </ThemeProvider>
  );
}