"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { MapPin, Users, Award, Zap } from 'lucide-react';

export default function AboutMePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="medium"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Work", id: "work" },
            { name: "About", id: "/about-me" },
            { name: "Services", id: "services" },
            { name: "Results", id: "results" }
          ]}
          brandName="Hidde Digital"
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="About Me"
          description="I'm a 20-year-old student-athlete from The Hague, Netherlands, currently studying in the United States. Combining athletic dedication with academic excellence and a passion for creating exceptional digital experiences."
          background={{ variant: "plain" }}
          kpis={[
            { value: "The Hague", label: "From Netherlands" },
            { value: "20", label: "Years Old" },
            { value: "USA", label: "Studying Here" }
          ]}
          enableKpiAnimation={true}
          tag="About Me"
          tagIcon={Zap}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AqXgsnzzGzY8t8KhASFkum85OC/uploaded-1773345682402-6uuhacve.jpg"
          imageAlt="Profile picture"
          mediaAnimation="slide-up"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <ContactText
          text="I'm a passionate student-athlete balancing rigorous academics and competitive sports while pursuing my dreams in the United States. Originally from The Hague, Netherlands, I bring a unique perspective shaped by European heritage and American ambition. My commitment to excellence extends beyond the playing field into every project I undertake, whether it's web design, digital strategy, or building meaningful connections."
          animationType="reveal-blur"
          buttons={[
            { text: "Get in Touch", href: "#contact" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-vector/business-workshop-social-media-pack-landing-page_23-2149381280.jpg?_wi=2"
          imageAlt="Portfolio showcase"
          columns={[
            {
              title: "Product",              items: [
                { label: "Web Design", href: "/#services" },
                { label: "SEO Optimization", href: "/#services" },
                { label: "Mobile Design", href: "/#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Me", href: "/about-me" },
                { label: "Our Work", href: "/#work" },
                { label: "Testimonials", href: "/#testimonials" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          logoText="Hidde Digital"
          copyrightText="© 2025 Hidde Digital. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}