"use client";

import { useState } from "react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { TeamCarousel } from "@/components/sections/team/TeamCarousel";
import { TeamMemberInfo } from "@/components/sections/team/TeamMemberInfo";
import type { SiteContent } from "@/types/content";

interface TeamProps {
  data: SiteContent["team"];
}

export function Team({ data: team }: TeamProps) {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <section
      id="team"
      className="section-glow relative section-padding bg-neutral-50 dark:bg-[#050505] overflow-hidden"
    >
      <div className="section-divider absolute top-0 left-0 right-0" />

      {/* Stage spotlight glow */}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse 50% 70% at 50% 30%, rgba(201,169,110,0.07) 0%, transparent 70%)",
        }}
      />

      <div className="section-container">
        <Reveal>
          <SectionHeading centered>{team.title}</SectionHeading>
        </Reveal>

        <Reveal>
          <div className="mt-10">
            <TeamCarousel
              members={team.members}
              activeIndex={activeIndex}
              onActiveChange={setActiveIndex}
            />

            <TeamMemberInfo
              members={team.members}
              activeIndex={activeIndex}
              onSelect={setActiveIndex}
            />
          </div>
        </Reveal>
      </div>
    </section>
  );
}
