"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Palette, TrendingUp, Headphones } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="NEXUS"
          navItems={[
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          tag="Who We Are"
          title="Award-Winning Social Media Excellence"
          description="We are a premium social media agency dedicated to crafting exceptional digital experiences. With a team of strategists, creatives, and data analysts, we transform brands into industry leaders through innovative campaigns and authentic storytelling."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imagePosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/look-this_1098-13096.jpg"
          imageAlt="Team collaboration and creative brainstorming session"
          bulletPoints={[
            {
              title: "Strategic Expertise",
              description: "Data-driven campaigns that align with your business objectives and drive measurable ROI.",
              icon: Sparkles
            },
            {
              title: "Creative Excellence", 
              description: "Compelling content and visuals designed to captivate audiences and build brand loyalty.",
              icon: Palette
            },
            {
              title: "Proven Results",
              description: "Transparent reporting and consistent growth across all major social platforms.",
              icon: TrendingUp
            },
            {
              title: "24/7 Support",
              description: "Dedicated account managers and rapid response teams ensuring your success.",
              icon: Headphones
            }
          ]}
          buttons={[{ text: "View Our Work", href: "/portfolio" }]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Our Impact: Delivering Measurable Results for Brands Worldwide"
          tag="Results"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",
              value: "500M+",
              description: "Total impressions generated across all client campaigns and platforms annually."
            },
            {
              id: "2", 
              value: "85%",
              description: "Average client retention rate reflecting our commitment to long-term partnership and success."
            },
            {
              id: "3",
              value: "200+",
              description: "Brands transformed with our strategic approach and creative execution."
            },
            {
              id: "4",
              value: "12 Years",
              description: "Industry experience with a proven track record of excellence and innovation."
            }
          ]}
        />
      </div>

      <FooterLogoEmphasis
        logoText="NEXUS"
        columns={[
          {
            items: [
              { label: "Services", href: "/services" },
              { label: "Portfolio", href: "/portfolio" },
              { label: "Pricing", href: "/pricing" }
            ]
          },
          {
            items: [
              { label: "About Us", href: "/about" },
              { label: "Team", href: "/about" },
              { label: "Careers", href: "https://nexus-agency.com/careers" }
            ]
          },
          {
            items: [
              { label: "Contact", href: "/contact" },
              { label: "hello@nexus-agency.com", href: "mailto:hello@nexus-agency.com" },
              { label: "+1 (555) 123-4567", href: "tel:+15551234567" }
            ]
          },
          {
            items: [
              { label: "Twitter", href: "https://twitter.com/nexus-agency" },
              { label: "Instagram", href: "https://instagram.com/nexus-agency" },
              { label: "LinkedIn", href: "https://linkedin.com/company/nexus-agency" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}