"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Target, Users, TrendingUp, Twitter, Linkedin, Facebook, Instagram } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="GiGant Academy"
          button={{
            text: "Start Learning",
            href: "/courses"
          }}
        />
      </div>

      <div id="about-hero" data-section="about-hero">
        <HeroLogo
          logoText="Our Story"
          description="Learn how GiGant Academy is revolutionizing investment education and empowering the next generation of investors."
          buttons={[
            { text: "Back Home", href: "/" },
            { text: "Join Us", href: "/courses" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/person-putting-coins-piggy-bank-with-books-pencils_23-2148756621.jpg"
          imageAlt="GiGant Academy story"
          showDimOverlay={true}
          logoLineHeight={1.15}
        />
      </div>

      <div id="about-mission" data-section="about-mission">
        <MetricSplitMediaAbout
          tag="Our Mission"
          tagIcon={Target}
          title="Democratizing Investment Education Worldwide"
          description="Founded in 2018, GiGant Academy was born from a simple belief: investment knowledge shouldn't be exclusive to the wealthy. We've grown from a small team of passionate educators to a global platform serving over 10,000 active students across 45 countries. Our mission is to empower every individual with the knowledge and confidence to build lasting wealth through smart investing."
          metrics={[
            { value: "45+", title: "Countries Served" },
            { value: "$50M+", title: "Student Wealth Created" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/person-putting-coins-piggy-bank-with-books-pencils_23-2148756621.jpg"
          imageAlt="Our mission and impact"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Meet Our Expert Team"
          description="Learn from the best. Our instructors bring decades of combined investment experience and proven track records."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Leadership"
          tagIcon={Users}
          animationType="slide-up"
          team={[
            {
              id: "1",
              name: "James Wilson",
              role: "Founder & CEO",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-elegant-professional-businesswoman_23-2150917266.jpg",
              imageAlt: "James Wilson"
            },
            {
              id: "2",
              name: "Amanda Brooks",
              role: "Head of Curriculum",
              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5367.jpg",
              imageAlt: "Amanda Brooks"
            },
            {
              id: "3",
              name: "David Patel",
              role: "Lead Instructor - Stocks",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg",
              imageAlt: "David Patel"
            },
            {
              id: "4",
              name: "Sophie Laurent",
              role: "Real Estate Expert",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-businessman-with-crossed-arms_23-2147955274.jpg",
              imageAlt: "Sophie Laurent"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Our Impact"
          description="Real numbers showing real results from our academy community."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          tag="Results"
          tagIcon={TrendingUp}
          animationType="slide-up"
          carouselMode="buttons"
          metrics={[
            {
              id: "1",
              title: "Average Portfolio Growth",
              subtitle: "Students reporting after 12 months",
              category: "Performance",
              value: "23.5%",
              buttons: [{ text: "Learn More", href: "/courses" }]
            },
            {
              id: "2",
              title: "Student Satisfaction Rate",
              subtitle: "Rating our courses and mentorship",
              category: "Quality",
              value: "4.9/5.0",
              buttons: [{ text: "Read Reviews", href: "/" }]
            },
            {
              id: "3",
              title: "Course Completion Rate",
              subtitle: "Students finishing their chosen program",
              category: "Success",
              value: "87%",
              buttons: [{ text: "Join Now", href: "/courses" }]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="GiGant Academy"
          copyrightText="© 2025 GiGant Academy. All rights reserved. | Empowering Investors Worldwide"
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/gigantacademy", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/gigant-academy", ariaLabel: "LinkedIn" },
            { icon: Facebook, href: "https://facebook.com/gigantacademy", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/gigantacademy", ariaLabel: "Instagram" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}