"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import Link from 'next/link';
import { TrendingUp, Rocket, Users, BarChart3, Heart, Zap } from 'lucide-react';

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Portfolio", id: "portfolio" },
    { name: "About", id: "about" },
    { name: "Blog", id: "blog" },
  ];

  const footerColumns = [
    {
      title: "Services",
      items: [
        { label: "Social Strategy", href: "/#services" },
        { label: "Content Creation", href: "/#services" },
        { label: "Paid Advertising", href: "/#services" },
        { label: "Analytics", href: "/#services" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Portfolio", href: "/portfolio" },
        { label: "Blog", href: "/#blog" },
        { label: "Careers", href: "#" },
      ],
    },
    {
      title: "Connect",
      items: [
        { label: "Contact Us", href: "#contact" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Instagram", href: "https://instagram.com" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Lumina Social"
          navItems={navItems}
          button={{
            text: "Get Started",
            href: "/contact",
          }}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",
              content: "We're a team of creative strategists, content creators, and data analysts dedicated to transforming brands through strategic social media excellence. With over a decade of combined experience, we've helped businesses of all sizes achieve unprecedented growth across all major social platforms. Our mission is to elevate brands by creating authentic connections between companies and their audiences through innovative storytelling and data-driven strategies.",
            },
            {
              type: "image",
              src: "http://img.b2bpic.net/free-photo/office-workers-working-together-as-team_23-2149310891.jpg",
              alt: "Our creative team collaborating",
            },
          ]}
          useInvertedBackground={false}
          buttons={[{ text: "Explore Our Services", href: "/#services" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Track Record"
          description="Measurable results that demonstrate our commitment to delivering excellence for every client partnership."
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "clients", icon: Users, title: "Active Clients", value: "150+" },
            { id: "followers", icon: BarChart3, title: "Followers Grown", value: "25M+" },
            { id: "engagement", icon: Heart, title: "Avg. Engagement", value: "8.5%" },
            { id: "campaigns", icon: Zap, title: "Campaigns Delivered", value: "500+" },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Join Our Community of Successful Brands"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Partner With Us Today"
          description="Ready to transform your social media presence and achieve unprecedented growth? Let's schedule a strategic consultation to discuss your unique goals and how our team can drive exceptional results for your brand."
          buttons={[
            { text: "Schedule Consultation", href: "mailto:hello@luminasocial.com" },
            { text: "Call Our Team", href: "tel:+1234567890" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "floatingGradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2024 Lumina Social. All rights reserved. Elevating brands through strategic social media excellence."
        />
      </div>
    </ThemeProvider>
  );
}