"use client";

import {
  Box,
  Container,
  SimpleGrid,
  Stack,
  Text,
  Title,
} from "@mantine/core";
import {
  Compass,
  Globe,
  PenTool,
  Rocket,
  ShieldCheck,
  Smartphone,
  type LucideIcon,
} from "lucide-react";
import { motion } from "framer-motion";
import { FeatureIcon } from "@/components/ui/FeatureIcon";
import { GlassCard } from "@/components/ui/GlassCard";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { useThemeColors } from "@/hooks/useThemeColors";
import { processIntro, processSteps } from "@/data/landing";
import { revealInViewProps } from "@/lib/motion";
import { colors } from "@/styles/tokens";

const iconMap: Record<string, LucideIcon> = {
  compass: Compass,
  "pen-tool": PenTool,
  smartphone: Smartphone,
  globe: Globe,
  "shield-check": ShieldCheck,
  rocket: Rocket,
};

export function ProcessSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100} id="processo" className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow={processIntro.eyebrow}
            title={processIntro.title}
            highlight={processIntro.highlight}
          />
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" w="100%">
            {processSteps.map((step, i) => {
              const Icon = iconMap[step.icon] ?? Compass;
              return (
                <motion.div key={step.title} {...revealInViewProps(i * 0.06, 16)}>
                  <GlassCard h="100%">
                    <Stack gap="md">
                      <FeatureIcon icon={Icon} />
                      <Text
                        size="xs"
                        fw={700}
                        tt="uppercase"
                        style={{ color: colors.primary, letterSpacing: "0.08em" }}
                      >
                        Etapa {i + 1}
                      </Text>
                      <Title order={5} fw={700} style={{ color: theme.heading }}>
                        {step.title}
                      </Title>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}