"use client";

import { Box, Container, Divider, Grid, SimpleGrid, Stack, Text } from "@mantine/core";
import { motion } from "framer-motion";
import { SectionHeader } from "@/components/ui/SectionHeader";
import {
  aboutCultureIntro,
  aboutMission,
  aboutValues,
  aboutVision,
} from "@/data/about";
import { revealInViewProps } from "@/lib/motion";
import { useThemeColors } from "@/hooks/useThemeColors";
import { colors } from "@/styles/tokens";

function InstitutionalPillar({ label, text, bodyColor }: { label: string; text: string; bodyColor: string }) {
  return (
    <Stack gap="lg" maw={520}>
      <Text
        size="xs"
        tt="uppercase"
        fw={700}
        style={{ letterSpacing: "0.2em", color: colors.primary }}
      >
        {label}
      </Text>
      <Text
        component="p"
        m={0}
        style={{
          fontSize: "clamp(1.05rem, 1.8vw, 1.2rem)",
          fontWeight: 500,
          color: bodyColor,
          lineHeight: 1.85,
          letterSpacing: "-0.01em",
        }}
      >
        {text}
      </Text>
    </Stack>
  );
}

export function AboutCultureSection() {
  const theme = useThemeColors();
  const dividerColor = theme.isDark ? "rgba(0, 155, 255, 0.15)" : "rgba(15, 23, 42, 0.08)";

  return (
    <Box
      component="section"
      id="cultura"
      py={{ base: 72, md: 110 }}
      style={{
        borderTop: `1px solid ${dividerColor}`,
        borderBottom: `1px solid ${dividerColor}`,
        background: theme.isDark
          ? "linear-gradient(180deg, rgba(6, 8, 24, 0.6) 0%, rgba(6, 8, 24, 0.35) 100%)"
          : "linear-gradient(180deg, #f8fafc 0%, #ffffff 100%)",
      }}
    >
      <Container size="xl">
        <Stack gap={{ base: 48, md: 72 }}>
          <SectionHeader
            align="left"
            eyebrow={aboutCultureIntro.eyebrow}
            title={aboutCultureIntro.title}
            highlight={aboutCultureIntro.highlight}
            description={aboutCultureIntro.description}
          />

          <motion.div {...revealInViewProps(0, 16)}>
            <Grid gutter={{ base: 40, md: 64 }}>
              <Grid.Col span={{ base: 12, md: 6 }}>
                <InstitutionalPillar
                  label={aboutMission.title}
                  text={aboutMission.text}
                  bodyColor={theme.body}
                />
              </Grid.Col>
              <Grid.Col span={{ base: 12, md: 6 }}>
                <Box className="noga-culture-pillar-divider" pl={{ base: 0, md: 48 }}>
                  <InstitutionalPillar
                    label={aboutVision.title}
                    text={aboutVision.text}
                    bodyColor={theme.body}
                  />
                </Box>
              </Grid.Col>
            </Grid>
          </motion.div>

          <Stack gap={{ base: 32, md: 40 }}>
            <Divider color={dividerColor} />
            <motion.div {...revealInViewProps(0.08, 16)}>
              <Stack gap="xs" mb="lg">
                <Text
                  size="xs"
                  tt="uppercase"
                  fw={700}
                  style={{ letterSpacing: "0.2em", color: colors.primary }}
                >
                  Nossos valores
                </Text>
                <Text maw={640} style={{ color: theme.muted, lineHeight: 1.65 }}>
                  Princípios que guiam nossa equipe em cada etapa do projeto.
                </Text>
              </Stack>
            </motion.div>

            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing={{ base: 28, md: 36 }}>
              {aboutValues.map((v, i) => (
                <motion.div key={v.title} {...revealInViewProps(0.1 + i * 0.04, 12)}>
                  <Box pl="lg" style={{ borderLeft: `2px solid ${colors.primary}` }}>
                    <Text
                      fw={700}
                      mb={10}
                      style={{
                        color: theme.heading,
                        fontSize: "1rem",
                        letterSpacing: "-0.02em",
                      }}
                    >
                      {v.title}
                    </Text>
                    <Text size="sm" style={{ color: theme.muted, lineHeight: 1.75 }}>
                      {v.description}
                    </Text>
                  </Box>
                </motion.div>
              ))}
            </SimpleGrid>
          </Stack>
        </Stack>
      </Container>
    </Box>
  );
}