"use client";

import { useState } from "react";
import { Badge, Box, Container, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { TeamMemberCard } from "@/components/team/TeamMemberCard";
import { TeamMemberModal } from "@/components/team/TeamMemberModal";
import { teamIntro, teamMembers } from "@/data/team";
import { useThemeColors } from "@/hooks/useThemeColors";
import type { TeamMember } from "@/types/team";
import { colors } from "@/styles/tokens";

export function TeamSection() {
  const theme = useThemeColors();
  const isDark = theme.isDark;
  const [selected, setSelected] = useState<TeamMember | null>(null);
  const [modalOpen, setModalOpen] = useState(false);

  const openProfile = (member: TeamMember) => {
    setSelected(member);
    setModalOpen(true);
  };

  const closeProfile = () => {
    setModalOpen(false);
  };

  return (
    <Box
      component="section"
      id="equipe"
      py={100}
      style={{
        background: isDark
          ? `linear-gradient(180deg, ${colors.bgMain} 0%, ${colors.bgSecondary} 50%, ${colors.bgMain} 100%)`
          : "linear-gradient(180deg, #f1f5f9 0%, #f8fafc 50%, #f1f5f9 100%)",
        position: "relative",
      }}
    >
      <Box
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: isDark
            ? "radial-gradient(circle at 20% 30%, rgba(0, 155, 255, 0.12), transparent 45%), radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.08), transparent 40%)"
            : "radial-gradient(circle at 20% 30%, rgba(0, 155, 255, 0.06), transparent 45%), radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.05), transparent 40%)",
          pointerEvents: "none",
        }}
      />

      <Container size="xl" pos="relative">
        <Stack gap={48} align="center">
          <Stack gap="md" align="center" maw={800}>
            <Badge
              size="lg"
              radius="xl"
              variant="light"
              style={{
                background: "rgba(0, 155, 255, 0.1)",
                color: colors.primary,
                border: "1px solid rgba(0, 155, 255, 0.2)",
                fontWeight: 600,
                textTransform: "none",
                letterSpacing: "0.02em",
              }}
            >
              {teamIntro.badge}
            </Badge>

            <Title
              order={2}
              ta="center"
              style={{
                fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
                fontWeight: 800,
                letterSpacing: "-0.03em",
                lineHeight: 1.15,
                color: theme.heading,
              }}
            >
              {teamIntro.title}{" "}
              <Text
                component="span"
                inherit
                style={{
                  background: `linear-gradient(135deg, ${colors.primary}, ${colors.blueNeon})`,
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                }}
              >
                {teamIntro.highlight}
              </Text>{" "}
              {teamIntro.titleEnd}
            </Title>

            <Text
              size="lg"
              ta="center"
              maw={640}
              style={{ lineHeight: 1.6, color: isDark ? colors.grayMedium : "#64748b" }}
            >
              {teamIntro.description}
            </Text>
          </Stack>

          <SimpleGrid cols={{ base: 1, xs: 2, md: 3, xl: 4 }} spacing="lg" w="100%">
            {teamMembers.map((member, i) => (
              <TeamMemberCard
                key={member.id}
                member={member}
                index={i}
                variant={isDark ? "dark" : "light"}
                onClick={() => openProfile(member)}
              />
            ))}
          </SimpleGrid>
        </Stack>
      </Container>

      <TeamMemberModal member={selected} opened={modalOpen} onClose={closeProfile} />
    </Box>
  );
}