"use client";

import { Container, SimpleGrid, Stack, ThemeIcon, Title } from "@mantine/core";
import {
  Apple,
  Cloud,
  Globe,
  LayoutDashboard,
  Monitor,
  Smartphone,
  type LucideIcon,
} from "lucide-react";
import { motion } from "framer-motion";
import { GlassCard } from "@/components/ui/GlassCard";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { useThemeColors } from "@/hooks/useThemeColors";
import { platforms, platformsIntro } from "@/data/landing";
import { revealInViewProps } from "@/lib/motion";
import { colors } from "@/styles/tokens";

const iconMap: Record<string, LucideIcon> = {
  smartphone: Smartphone,
  apple: Apple,
  globe: Globe,
  monitor: Monitor,
  "layout-dashboard": LayoutDashboard,
  cloud: Cloud,
};

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

  return (
    <Container component="section" size="xl" py={100} id="plataformas">
      <Stack gap={56} align="center">
        <SectionHeader
          eyebrow={platformsIntro.eyebrow}
          title={platformsIntro.title}
          highlight={platformsIntro.highlight}
          description={platformsIntro.description}
        />
        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" w="100%">
          {platforms.map((item, i) => {
            const Icon = iconMap[item.icon] ?? Smartphone;
            return (
              <motion.div key={item.id} {...revealInViewProps(i * 0.05, 16)}>
                <GlassCard>
                  <Stack gap="sm" align="center" ta="center">
                    <ThemeIcon
                      size={44}
                      radius="md"
                      variant="light"
                      color="nogahost"
                      style={{ background: "rgba(0, 155, 255, 0.12)" }}
                    >
                      <Icon size={22} color={colors.primary} />
                    </ThemeIcon>
                    <Title order={5} style={{ color: theme.heading }}>
                      {item.title}
                    </Title>
                  </Stack>
                </GlassCard>
              </motion.div>
            );
          })}
        </SimpleGrid>
      </Stack>
    </Container>
  );
}