"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Users, Award, Briefcase, Star } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Love Code"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Courses", id: "/courses" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "/contact"
          }}
        />
      </div>

      <div id="about-detailed" data-section="about-detailed">
        <AboutMetric
          title="At Love Code, we believe in transforming lives through technology education. Our comprehensive approach combines cutting-edge curriculum, experienced mentorship, and practical hands-on learning to create the next generation of tech leaders. Founded with the mission to make quality programming education accessible to everyone, we've successfully trained over 5,000 students who now work at leading tech companies worldwide."
          metrics={[
            { icon: Users, label: "Students Trained", value: "5,000+" },
            { icon: Award, label: "Success Rate", value: "95%" },
            { icon: Briefcase, label: "Job Placements", value: "1,200+" },
            { icon: Star, label: "Expert Instructors", value: "50+" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterLogoReveal logoText="Love Code" />
    </ThemeProvider>
  );
}