"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Users, TrendingUp, Award, Target, Zap } from "lucide-react";

export default function TeamPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Tech Club"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About Us", id: "/about" },
            { name: "Our Team", id: "/team" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="team-section" data-section="team-section">
        <TeamCardOne
          title="Meet Our Leadership Team"
          description="Our dedicated team of tech enthusiasts drives innovation and fosters a collaborative community where members can learn, grow, and build amazing projects together."
          tag="Leadership"
          tagIcon={Users}
          tagAnimation="slide-up"
          members={[
            {
              id: "member-1",
              name: "Alex Chen",
              role: "Club President",
              imageSrc: "http://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg?_wi=1",
              imageAlt: "Alex Chen, Club President"
            },
            {
              id: "member-2",
              name: "Jordan Martinez",
              role: "Vice President & Events Lead",
              imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg?_wi=1",
              imageAlt: "Jordan Martinez, Vice President & Events Lead"
            },
            {
              id: "member-3",
              name: "Sam Patel",
              role: "Technical Director",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businessman-posing-looking-camera_1163-4800.jpg?_wi=1",
              imageAlt: "Sam Patel, Technical Director"
            },
            {
              id: "member-4",
              name: "Casey Williams",
              role: "Community Manager",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-camera-while-colleagues-working-ba_1170-1874.jpg",
              imageAlt: "Casey Williams, Community Manager"
            },
            {
              id: "member-5",
              name: "Morgan Lee",
              role: "Workshop Coordinator",
              imageSrc: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136872.jpg",
              imageAlt: "Morgan Lee, Workshop Coordinator"
            },
            {
              id: "member-6",
              name: "Taylor Brown",
              role: "Social Media Lead",
              imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg",
              imageAlt: "Taylor Brown, Social Media Lead"
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Join Our Team", href: "/contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardOne
          title="Leadership Testimonials"
          description="Hear directly from our team leaders about their experiences and vision for the computer club community."
          tag="Team Voices"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "leader-1",
              name: "Alex Chen",
              role: "Club President",
              company: "Computer Science Major",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg?_wi=2",
              imageAlt: "Alex Chen, Club President"
            },
            {
              id: "leader-2",
              name: "Jordan Martinez",
              role: "Vice President",
              company: "Software Engineering Student",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg?_wi=2",
              imageAlt: "Jordan Martinez, Vice President"
            },
            {
              id: "leader-3",
              name: "Sam Patel",
              role: "Technical Director",
              company: "Full Stack Developer",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businessman-posing-looking-camera_1163-4800.jpg?_wi=2",
              imageAlt: "Sam Patel, Technical Director"
            }
          ]}
        />
      </div>

      <div id="metrics-section" data-section="metrics-section">
        <MetricCardOne
          title="Team Leadership Impact"
          description="Our leadership team has created tremendous value for our members and the broader tech community through their dedication and vision."
          tag="Leadership Stats"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          useInvertedBackground={false}
          metrics={[
            {
              id: "leaders",
              value: "12",
              title: "Team Leaders",
              description: "Experienced leaders guiding our community forward",
              icon: Users
            },
            {
              id: "experience",
              value: "50",
              title: "Years Combined Experience",
              description: "Collective expertise in technology and leadership",
              icon: Award
            },
            {
              id: "initiatives",
              value: "25",
              title: "New Initiatives",
              description: "Programs and projects launched by our leadership",
              icon: Target
            }
          ]}
          buttons={[
            { text: "Join Our Leadership", href: "/contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <FooterBase
        logoText="TechClub"
        copyrightText="© 2025 TechClub | Empowering Tech Enthusiasts"
        columns={[
          {
            title: "Explore",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Team", href: "/team" },
              { label: "Home", href: "/" }
            ]
          },
          {
            title: "Community",
            items: [
              { label: "Join Us", href: "/contact" },
              { label: "GitHub", href: "https://github.com" },
              { label: "Discord", href: "https://discord.com" }
            ]
          },
          {
            title: "Connect",
            items: [
              { label: "Contact", href: "/contact" },
              { label: "LinkedIn", href: "https://linkedin.com" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}