"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Users, TrendingUp } from "lucide-react";

export default function TeamPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Work", id: "work" },
    { name: "Team", id: "team" },
    { name: "Pricing", id: "pricing" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="SocialVibe Agency"
          bottomLeftText="Premium Social Strategy"
          bottomRightText="hello@socialvibe.com"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Meet Our Team"
          description="Passionate creatives and strategists dedicated to your social success"
          tag="Our Experts"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          team={[
            {
              id: "member-1",
              name: "Sarah Chen",
              role: "Creative Director",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-hispanic-cheerful-female-with-curly-hair_181624-53321.jpg?_wi=3",
              imageAlt: "Sarah Chen, Creative Director",
            },
            {
              id: "member-2",
              name: "Marcus Johnson",
              role: "Strategy Lead",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-pensive-office-worker_329181-16086.jpg?_wi=2",
              imageAlt: "Marcus Johnson, Strategy Lead",
            },
            {
              id: "member-3",
              name: "Emma Rodriguez",
              role: "Content Specialist",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-hispanic-cheerful-female-with-curly-hair_181624-53321.jpg?_wi=4",
              imageAlt: "Emma Rodriguez, Content Specialist",
            },
            {
              id: "member-4",
              name: "Alex Thompson",
              role: "Analytics Expert",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-manager-with-digital-tablet_1262-1058.jpg?_wi=2",
              imageAlt: "Alex Thompson, Analytics Expert",
            },
            {
              id: "member-5",
              name: "Jasmine Patel",
              role: "Community Manager",
              imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-working-together-outdoors_23-2148416453.jpg?_wi=2",
              imageAlt: "Jasmine Patel, Community Manager",
            },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Our Impact"
          description="Numbers that speak to our commitment to excellence and client success"
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="centered"
          useInvertedBackground={false}
          animationType="scale-rotate"
          metrics={[
            {
              id: "clients",
              title: "Active Clients",
              subtitle: "Brands we partner with",
              category: "Portfolio",
              value: "150+",
              buttons: [],
            },
            {
              id: "followers",
              title: "Followers Generated",
              subtitle: "Total audience growth",
              category: "Growth",
              value: "45M+",
              buttons: [],
            },
            {
              id: "engagement",
              title: "Avg Engagement Rate",
              subtitle: "Industry-leading",
              category: "Quality",
              value: "12.4%",
              buttons: [],
            },
            {
              id: "campaigns",
              title: "Campaigns Launched",
              subtitle: "Year-over-year",
              category: "Experience",
              value: "2,847",
              buttons: [],
            },
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Why Choose SocialVibe?"
          description={[
            "We're not just another social media agency. We're strategic partners invested in your growth.",
            "With 8+ years of industry experience, we've built social presence for 150+ brands across industries. We combine data-driven strategy with creative excellence.",
            "Our team stays ahead of platform trends and algorithm changes. We adapt quickly and test continuously to find what works for your unique audience.",
            "We believe in transparent reporting, collaborative partnerships, and results that matter to your bottom line.",
          ]}
          buttons={[
            {
              text: "Start Your Project",
              href: "/",
            },
            {
              text: "Schedule Consultation",
              href: "/",
            },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          showBorder={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="SocialVibe"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "© 2024 SocialVibe Agency", href: "/" }}
        />
      </div>
    </ThemeProvider>
  );
}