"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Zap, Target, Users, TrendingUp } from "lucide-react";

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

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Orion Media Co"
          bottomLeftText="Atlanta, Georgia"
          bottomRightText="hello@orionmedia.co"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Orion Media Co"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Elevating Brands Through Data-Driven Digital Marketing"
          description="Our Journey to Digital Excellence"
          subdescription="Founded in Atlanta, Georgia with a mission to transform businesses through strategic digital marketing"
          icon={Target}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/a-dynamic-team-of-digital-marketing-prof-1772493589811-b7e7ac84.png?_wi=2"
          imageAlt="Orion Media Co team collaborating"
          mediaAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Expert Team"
          description="Dedicated professionals with years of industry experience"
          tag="Team"
          tagIcon={Users}
          tagAnimation="slide-up"
          members={[
            {
              id: "1",
              name: "Michael Chen",
              role: "Strategy Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/a-professional-headshot-portrait-of-a-co-1772493588467-459ea545.png?_wi=2",
              imageAlt: "Michael Chen - Strategy Director",
            },
            {
              id: "2",
              name: "Jessica Taylor",
              role: "Social Media Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/a-professional-headshot-of-a-creative-so-1772493588975-4100e360.png?_wi=2",
              imageAlt: "Jessica Taylor - Social Media Lead",
            },
            {
              id: "3",
              name: "David Phillips",
              role: "SEO Specialist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/a-professional-headshot-of-a-senior-digi-1772493588145-ff30954d.png?_wi=2",
              imageAlt: "David Phillips - SEO Specialist",
            },
            {
              id: "4",
              name: "Amanda Foster",
              role: "Analytics Expert",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/professional-headshot-of-a-content-and-a-1772493588372-f6722acc.png?_wi=2",
              imageAlt: "Amanda Foster - Analytics Expert",
            },
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Track Record"
          description="Proven success across countless successful partnerships"
          tag="Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "clients",
              value: "150+",
              title: "Satisfied Clients",
              items: ["Across diverse industries", "Atlanta and beyond", "Sustained partnerships"],
            },
            {
              id: "growth",
              value: "250%",
              title: "Average Client Growth",
              items: ["Within first 12 months", "Measurable ROI", "Consistent performance"],
            },
            {
              id: "campaigns",
              value: "500+",
              title: "Successful Campaigns",
              items: ["Multi-channel approach", "Data-driven strategy", "Award recognition"],
            },
            {
              id: "experience",
              value: "10+",
              title: "Years of Excellence",
              items: ["Industry leadership", "Team expertise", "Trusted partner"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Orion Media Co"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}