"use client";

import Image from "next/image";
import { useState } from "react";
import {
  Box,
  Container,
  Grid,
  SimpleGrid,
  Stack,
  Text,
  Title,
  Badge,
} from "@mantine/core";
import { motion } from "framer-motion";
import { AboutFounderPhoto } from "@/components/about/AboutFounderPhoto";
import { AboutInstitutionalHero } from "@/components/about/AboutInstitutionalHero";
import { AboutStorySection } from "@/sections/about/AboutStorySection";
import { AboutCultureSection } from "@/sections/about/AboutCultureSection";
import { AboutTechnologiesSection } from "@/sections/about/AboutTechnologiesSection";
import { TeamMemberCard } from "@/components/team/TeamMemberCard";
import { TeamMemberModal } from "@/components/team/TeamMemberModal";
import {
  aboutFounder,
  aboutTeamBackdrop,
  aboutTeamIntro,
} from "@/data/about";
import { teamMembers } from "@/data/team";
import { fadeUp, revealInViewProps } from "@/lib/motion";
import { useThemeColors } from "@/hooks/useThemeColors";
import type { TeamMember } from "@/types/team";
import { colors } from "@/styles/tokens";

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

  return (
    <>
      <AboutInstitutionalHero />

      <AboutStorySection />

      <AboutCultureSection />

      {/* Fundador */}
      <Box component="section" py={{ base: 64, md: 100 }} className="noga-grid-bg">
        <Container size="xl">
          <Grid gutter={48} align="center">
            <Grid.Col span={{ base: 12, md: 5 }}>
              <motion.div {...revealInViewProps(0, 20)}>
                <AboutFounderPhoto headingColor={theme.heading} />
              </motion.div>
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 7 }}>
              <Stack gap="lg">
                <Badge
                  size="lg"
                  radius="xl"
                  variant="outline"
                  styles={{
                    root: {
                      width: "fit-content",
                      borderColor: "rgba(0, 155, 255, 0.35)",
                      background: "rgba(0, 155, 255, 0.1)",
                      color: colors.blueLight,
                    },
                  }}
                >
                  {aboutFounder.eyebrow}
                </Badge>
                <Title order={2} style={{ color: theme.heading, letterSpacing: "-0.03em" }}>
                  {aboutFounder.name}
                </Title>
                <Text size="md" fw={600} style={{ color: colors.blueLight }}>
                  {aboutFounder.role}
                </Text>
                {aboutFounder.paragraphs.map((p, i) => (
                  <motion.div key={p.slice(0, 20)} {...revealInViewProps(0.08 + i * 0.05, 12)}>
                    <Text size="md" style={{ color: theme.body, lineHeight: 1.75 }}>
                      {p}
                    </Text>
                  </motion.div>
                ))}
              </Stack>
            </Grid.Col>
          </Grid>
        </Container>
      </Box>

      {/* Equipe — fundo fotográfico */}
      <Box
        component="section"
        id="equipe-about"
        py={{ base: 80, md: 120 }}
        pos="relative"
        style={{ overflow: "hidden" }}
      >
        <Box pos="absolute" inset={0} style={{ zIndex: 0 }}>
          <Image
            src={aboutTeamBackdrop}
            alt=""
            fill
            sizes="100vw"
            style={{
              objectFit: "cover",
              opacity: isDark ? 1 : 0.22,
            }}
          />
          <Box
            pos="absolute"
            inset={0}
            style={{
              background: isDark
                ? "linear-gradient(180deg, rgba(6,8,24,0.88) 0%, rgba(6,8,24,0.94) 50%, rgba(6,8,24,0.98) 100%)"
                : "linear-gradient(180deg, #f8fafc 0%, #ffffff 55%, #f1f5f9 100%)",
            }}
          />
        </Box>
        <Container size="xl" pos="relative" style={{ zIndex: 1 }}>
          <Stack gap={48} align="center">
            <motion.div initial={false} animate="visible" variants={fadeUp(0)}>
              <Badge
                size="lg"
                radius="xl"
                style={{
                  background: isDark ? "rgba(0, 155, 255, 0.15)" : "rgba(0, 155, 255, 0.1)",
                  color: isDark ? colors.blueLight : colors.primary,
                  border: isDark
                    ? "1px solid rgba(0, 155, 255, 0.35)"
                    : "1px solid rgba(0, 155, 255, 0.28)",
                  fontWeight: 600,
                  textTransform: "none",
                }}
              >
                {aboutTeamIntro.badge}
              </Badge>
            </motion.div>
            <Title
              order={2}
              ta="center"
              style={{
                fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
                fontWeight: 800,
                letterSpacing: "-0.03em",
                color: isDark ? colors.white : theme.heading,
              }}
            >
              {aboutTeamIntro.title}{" "}
              <Text
                component="span"
                inherit
                style={{
                  background: `linear-gradient(135deg, ${colors.primary}, ${colors.blueNeon})`,
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                }}
              >
                {aboutTeamIntro.highlight}
              </Text>
            </Title>
            <Text
              size="lg"
              ta="center"
              maw={640}
              style={{ color: isDark ? "rgba(255,255,255,0.72)" : theme.body, lineHeight: 1.6 }}
            >
              {aboutTeamIntro.description}
            </Text>
            <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={() => {
                    setSelectedMember(member);
                    setModalOpen(true);
                  }}
                />
              ))}
            </SimpleGrid>
          </Stack>
        </Container>
        <TeamMemberModal
          member={selectedMember}
          opened={modalOpen}
          onClose={() => setModalOpen(false)}
        />
      </Box>

      <AboutTechnologiesSection />
    </>
  );
}