"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, ArrowUpRight, Users, Trophy } from "lucide-react";

const NAV_ITEMS = [
  { name: "Home", id: "/" },
  { name: "Work", id: "work" },
  { name: "Services", id: "/services" },
  { name: "About", id: "/about" },
  { name: "Contact", id: "contact" }
];

const FOOTER_COLUMNS = [
  {
    title: "Company",    items: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" },
      { label: "Services", href: "/services" },
      { label: "Work", href: "/#work" },
      { label: "Contact", href: "/#contact" },
    ],
  },
  {
    title: "Services",    items: [
      { label: "Web Development", href: "/services" },
      { label: "SEO", href: "/services" },
      { label: "Branding", href: "/services" },
      { label: "UI/UX Design", href: "/services" },
    ],
  },
  {
    title: "Connect",    items: [
      { label: "Twitter", href: "#" },
      { label: "LinkedIn", href: "#" },
      { label: "Instagram", href: "#" },
      { label: "Dribbble", href: "#" },
    ],
  },
];

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="metallic"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="HoB Media"
          navItems={NAV_ITEMS}
          button={{ text: "Get Started", href: "/#contact" }}
        />
        <MetricSplitMediaAbout
          title="About HoB Media"
          description="HoB Media is a full-service digital agency dedicated to crafting compelling online experiences. We partner with businesses to build impactful brands, drive growth, and achieve measurable results through innovative web design, development, and marketing strategies."
          metrics={[
            { value: "10+", title: "Years Experience" },
            { value: "200+", title: "Projects Completed" },
            { value: "95%", title: "Client Retention" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp"
          imageAlt="HoB Media team working"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          tag="Our Story"
          tagIcon={Sparkles}
        />
        <TeamCardEleven
          title="Meet Our Team"
          description="Our diverse team of experts brings passion, creativity, and technical prowess to every project."
          groups={[
            {
              id: "leadership",              groupTitle: "Leadership",              members: [
                { id: "1", title: "Maria Santos", subtitle: "CEO & Founder", detail: "Visionary leader driving innovation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Maria Santos" },
                { id: "2", title: "John Doe", subtitle: "Creative Director", detail: "Crafting stunning visual narratives.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "John Doe" },
              ],
            },
            {
              id: "development",              groupTitle: "Development & Marketing",              members: [
                { id: "3", title: "Sarah Lee", subtitle: "Lead Developer", detail: "Building robust and scalable solutions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Sarah Lee" },
                { id: "4", title: "Michael Chen", subtitle: "SEO Specialist", detail: "Boosting online visibility and traffic.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-4.webp", imageAlt: "Michael Chen" },
              ],
            },
          ]}
          animationType="slide-up"
          useInvertedBackground={true}
          textboxLayout="default"
          tag="Our People"
          tagIcon={Users}
        />
        <FooterBase
          logoText="HoB Media"
          copyrightText="© 2026 | HoB Media"
          columns={FOOTER_COLUMNS}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
