"use client";

import { Box, Container, Stack, Text } from "@mantine/core";
import { motion } from "framer-motion";
import { TechStackCard } from "@/components/about/TechStackCard";
import { GlowOrb } from "@/components/ui/GlowOrb";
import { SectionHeader } from "@/components/ui/SectionHeader";
import {
  aboutTechCategories,
  aboutTechnologiesIntro,
} from "@/data/aboutTechnologies";
import { revealInViewProps } from "@/lib/motion";
import { colors } from "@/styles/tokens";

const techSchemaJson = {
  "@context": "https://schema.org",
  "@type": "ItemList",
  name: "Tecnologias utilizadas nos projetos NOGA CODE",
  description: aboutTechnologiesIntro.subtitle,
  itemListElement: aboutTechCategories.flatMap((cat, catIndex) =>
    cat.items.map((item, itemIndex) => ({
      "@type": "ListItem",
      position: catIndex * 10 + itemIndex + 1,
      item: {
        "@type": "SoftwareApplication",
        name: item.name,
        applicationCategory: cat.title,
        description: item.description,
        programmingLanguage: item.language,
      },
    })),
  ),
};

export function AboutTechnologiesSection() {
  return (
    <Box
      component="section"
      id="tecnologias"
      py={{ base: 64, md: 100 }}
      className="noga-grid-bg"
      pos="relative"
      aria-labelledby="about-tech-heading"
    >
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(techSchemaJson) }}
      />
      <GlowOrb size={360} top="10%" right="-5%" opacity={0.22} />
      <GlowOrb size={280} bottom="5%" left="-8%" opacity={0.14} />

      <Container size="xl" pos="relative">
        <Stack gap={56} align="center">
          <Box id="about-tech-heading" w="100%" maw={800}>
            <SectionHeader
              eyebrow={aboutTechnologiesIntro.eyebrow}
              title={aboutTechnologiesIntro.title}
              highlight={aboutTechnologiesIntro.highlight}
              description={aboutTechnologiesIntro.subtitle}
            />
          </Box>

          <Stack gap={56} w="100%" align="center">
            {aboutTechCategories.map((category, catIndex) => (
              <Stack key={category.id} gap="xl" w="100%" align="center" maw={1200}>
                <motion.div {...revealInViewProps(catIndex * 0.06, 12)} style={{ width: "100%" }}>
                  <Text
                    component="h3"
                    size="sm"
                    fw={800}
                    tt="uppercase"
                    ta="center"
                    style={{
                      letterSpacing: "0.12em",
                      color: colors.blueLight,
                      paddingBottom: 12,
                      borderBottom: "1px solid rgba(0, 155, 255, 0.2)",
                      maxWidth: 480,
                      margin: "0 auto",
                    }}
                  >
                    {category.title}
                  </Text>
                </motion.div>

                <Box className="noga-tech-grid-4" w="100%" role="list">
                  {category.items.map((item, i) => (
                    <Box key={item.id} className="noga-tech-grid-4__item" role="listitem">
                      <TechStackCard item={item} index={i} />
                    </Box>
                  ))}
                </Box>
              </Stack>
            ))}
          </Stack>
        </Stack>
      </Container>
    </Box>
  );
}