"use client";

import { Box, Container, Stack, Text } from "@mantine/core";
import { PortfolioCarousel } from "@/components/portfolio/PortfolioCarousel";
import { WebsiteAppScreensCarousel } from "@/components/website-app/WebsiteAppScreensCarousel";
import { WebsiteAppDevicesSection } from "@/sections/website-app/WebsiteAppSections";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { portfolioIntro } from "@/data/landing";
import { colors } from "@/styles/tokens";

export function ShowcaseSection() {
  return (
    <>
      <Container component="section" size="xl" py={100} id="portfolio">
        <Stack gap={48} align="center">
          <SectionHeader
            eyebrow={portfolioIntro.eyebrow}
            title={portfolioIntro.title}
            highlight={portfolioIntro.highlight}
            description={portfolioIntro.description}
          />

          <Box w="100%" style={{ overflow: "hidden" }}>
            <WebsiteAppScreensCarousel />
          </Box>
        </Stack>
      </Container>

      <WebsiteAppDevicesSection />

      <Container size="xl" pb={100}>
        <Stack gap={48} align="center">
          <PortfolioCarousel />

          <Text size="sm" ta="center" maw={480} style={{ color: colors.grayMedium, lineHeight: 1.6 }}>
            Cada projeto é desenvolvido sob medida com design premium, publicação nas lojas e infraestrutura
            NOGA CODE.
          </Text>
        </Stack>
      </Container>
    </>
  );
}