"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import AboutMetric from "@/components/sections/about/AboutMetric";

import FooterBase from "@/components/sections/footer/FooterBase";
import { Clock, Sparkles, Star } from "lucide-react";

export default function AboutPage() {
  const commonNavItems = [
    { name: "Domov", id: "/" },
    
    { name: "Služby", id: "/services" },
    { name: "O nás", id: "/about" },
    { name: "Kontakt", id: "/contact" }
  ];

  const commonFooterColumnsEnglish = [
    {
      title: "Company",      items: [
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
        
        { 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: "/#" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="Grow With Social"
          navItems={commonNavItems}
        />

        <AboutMetric
          title="Crafting Digital Excellence Since 2018"
          metrics={[
            { icon: Clock, label: "Years of Experience", value: "5+" },
            { icon: Sparkles, label: "Projects Completed", value: "100+" },
            { icon: Star, label: "Client Satisfaction", value: "High" }
          ]}
          metricsAnimation="blur-reveal"
          useInvertedBackground={false}
        />

        

        <FooterBase
          logoText="Grow With Social"
          copyrightText="© 2026 | Grow With Social"
          columns={commonFooterColumnsEnglish}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
