"use client";

import Image from "next/image";
import { Box, Container, Divider, Grid, Stack, Text, Title } from "@mantine/core";
import { AboutStoryText } from "@/components/about/AboutStoryText";
import { aboutStory, aboutStoryImage } from "@/data/about";
import { useThemeColors } from "@/hooks/useThemeColors";
import { colors, typography } from "@/styles/tokens";

export function AboutStorySection() {
  const theme = useThemeColors();
  const divider = theme.isDark ? "rgba(255, 255, 255, 0.08)" : "rgba(15, 23, 42, 0.1)";

  return (
    <Box
      component="section"
      id="sobre-nos"
      py={{ base: 72, md: 96 }}
      style={{
        background: theme.isDark ? "rgba(6, 8, 24, 0.4)" : "#ffffff",
        borderBottom: `1px solid ${divider}`,
      }}
    >
      <Container size="xl">
        <Grid gutter={{ base: 40, md: 64 }} align="flex-start">
          {/* Texto — esquerda */}
          <Grid.Col span={{ base: 12, md: 7 }} order={{ base: 1, md: 1 }}>
            <Stack gap="xl">
              <Stack gap="lg">
                <Text
                  size="xs"
                  tt="uppercase"
                  fw={700}
                  style={{ letterSpacing: "0.18em", color: colors.primary }}
                >
                  {aboutStory.eyebrow}
                </Text>
                <Title
                  order={2}
                  m={0}
                  style={{
                    ...typography.h2,
                    color: theme.heading,
                    maxWidth: 560,
                  }}
                >
                  {aboutStory.title}{" "}
                  <Text component="span" inherit c={colors.primary}>
                    {aboutStory.highlight}
                  </Text>
                </Title>
                <AboutStoryText color={theme.body} size="lg">
                  {aboutStory.lead}
                </AboutStoryText>
              </Stack>

              <Divider color={divider} />

              <Stack gap="xl">
                {aboutStory.chapters.map((chapter) => (
                  <Stack key={chapter.theme} gap="md">
                    <Text
                      size="xs"
                      tt="uppercase"
                      fw={700}
                      style={{ letterSpacing: "0.14em", color: colors.primary }}
                    >
                      {chapter.theme}
                    </Text>
                    {chapter.paragraphs.map((p) => (
                      <AboutStoryText key={p.slice(0, 40)} color={theme.body}>
                        {p}
                      </AboutStoryText>
                    ))}
                  </Stack>
                ))}
              </Stack>

              <Text
                fw={600}
                size="sm"
                tt="uppercase"
                style={{ letterSpacing: "0.1em", color: theme.muted }}
              >
                {aboutStory.tagline}
              </Text>
            </Stack>
          </Grid.Col>

          {/* Foto — direita */}
          <Grid.Col span={{ base: 12, md: 5 }} order={{ base: 2, md: 2 }}>
            <Box
              style={{
                position: "sticky",
                top: 96,
              }}
            >
              <Box
                pos="relative"
                style={{
                  borderRadius: 28,
                  overflow: "hidden",
                  aspectRatio: "4/5",
                  maxHeight: 560,
                  border: theme.isDark
                    ? "1px solid rgba(0, 155, 255, 0.22)"
                    : "1px solid rgba(15, 23, 42, 0.08)",
                  boxShadow: theme.isDark
                    ? "0 24px 56px rgba(0, 0, 0, 0.35), 0 0 40px rgba(0, 155, 255, 0.08)"
                    : "0 20px 48px rgba(15, 23, 42, 0.1)",
                }}
              >
                <Image
                  src={aboutStoryImage}
                  alt="Equipe e ambiente NOGA CODE — software house"
                  fill
                  sizes="(max-width: 768px) 100vw, 42vw"
                  style={{ objectFit: "cover" }}
                />
              </Box>
              <Text size="xs" mt="md" style={{ color: theme.muted, letterSpacing: "0.06em" }}>
                NOGA CODE · Software house · Brasil
              </Text>
            </Box>
          </Grid.Col>
        </Grid>
      </Container>
    </Box>
  );
}