"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import TeamCardSix from '@/components/sections/team/TeamCardSix';

export default function TeamPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Team", id: "/team" },
            { name: "Insights", id: "/insights" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Next Year"
        />
      </div>

      <div id="team-hero" data-section="team-hero">
        <HeroLogoBillboardSplit
          logoText="EXPERT TEAM"
          description="Meet the seasoned investment professionals dedicated to your financial success and wealth growth."
          buttons={[
            { text: "Schedule Consultation", href: "/contact" },
            { text: "Back to Home", href: "/" }
          ]}
          layoutOrder="default"
          background={{ variant: "radial-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
          imageAlt="Next Year team"
          frameStyle="card"
        />
      </div>

      <div id="team-members" data-section="team-members">
        <TeamCardSix
          title="Leadership Team"
          description="Experienced investment professionals with proven track records across global markets"
          members={[
            {
              id: "1",
              name: "James Richardson",
              role: "Chief Investment Officer",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-work_1098-286.jpg",
              imageAlt: "James Richardson, CIO"
            },
            {
              id: "2",
              name: "Sarah Mitchell",
              role: "Head of Wealth Management",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg",
              imageAlt: "Sarah Mitchell, Wealth Management"
            },
            {
              id: "3",
              name: "David Park",
              role: "Senior Portfolio Manager",
              imageSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3796.jpg",
              imageAlt: "David Park, Portfolio Manager"
            },
            {
              id: "4",
              name: "Jennifer Torres",
              role: "Financial Advisor",
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
              imageAlt: "Jennifer Torres, Financial Advisor"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          tag="Experts"
        />
      </div>

      <footer className="bg-foreground text-background py-12">
        <div className="mx-auto px-4 md:px-6 max-w-7xl">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="md:col-span-2">
              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
              <p className="text-background/80 mb-4">
                Transforming wealth through intelligent investment strategies and expert guidance.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Navigation</h4>
              <nav className="space-y-2">
                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
                  Home
                </Link>
                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
                  Services
                </Link>
                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
                  Team
                </Link>
                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
                  Insights
                </Link>
                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
                  Contact
                </Link>
              </nav>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Contact</h4>
              <div className="text-background/80">
                <p>Schedule a consultation to discuss your investment goals.</p>
              </div>
            </div>
          </div>
          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </ThemeProvider>
  );
}