"use client";

import { Container, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import {
  Globe,
  LayoutDashboard,
  Palette,
  Plug,
  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 { SectionLabel } from "@/components/ui/SectionLabel";
import { useThemeColors } from "@/hooks/useThemeColors";
import { revealInViewProps } from "@/lib/motion";
import { services, servicesIntro } from "@/data/landing";

const iconMap: Record<string, LucideIcon> = {
  smartphone: Smartphone,
  globe: Globe,
  "layout-dashboard": LayoutDashboard,
  palette: Palette,
  plug: Plug,
};

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

  return (
    <Container component="section" size="xl" py={100} id="servicos">
      <Stack gap={56} align="center">
        <SectionHeader
          eyebrow={servicesIntro.eyebrow}
          title={servicesIntro.title}
          highlight={servicesIntro.highlight}
          description={servicesIntro.description}
        />
        <SectionLabel>{servicesIntro.sectionLabel}</SectionLabel>
        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg" w="100%">
          {services.map((item, i) => {
            const Icon = iconMap[item.icon] ?? Smartphone;
            return (
              <motion.div key={item.id} {...revealInViewProps(i * 0.06, 20)}>
                <GlassCard h="100%">
                  <Stack gap="md">
                    <FeatureIcon icon={Icon} />
                    <Title order={4} fw={700} style={{ color: theme.heading }}>
                      {item.title}
                    </Title>
                    <Text size="sm" style={{ color: theme.muted, lineHeight: 1.6 }}>
                      {item.description}
                    </Text>
                  </Stack>
                </GlassCard>
              </motion.div>
            );
          })}
        </SimpleGrid>
      </Stack>
    </Container>
  );
}