"use client";

import Image from "next/image";
import Link from "next/link";
import { Box, Container, Grid, List, Stack, Text, ThemeIcon } from "@mantine/core";
import { ArrowRight, Check } from "lucide-react";
import { motion } from "framer-motion";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { softwareHouseFeatures, softwareHouseIntro } from "@/data/landing";
import { useBrandColors } from "@/hooks/useBrandColors";
import { colors } from "@/styles/tokens";

const SOFTWARE_HOUSE_IMAGE = "/assets/fotoinstitucional_nogacode01.png";

export function SoftwareHouseSection() {
  const c = useBrandColors();
  return (
    <Box component="section" py={100} id="software-house" pos="relative" className="noga-grid-bg">
      <Container size="xl">
        <Grid gutter={{ base: 40, md: 64 }} align="center">
          <Grid.Col span={{ base: 12, md: 6 }} order={{ base: 2, md: 1 }}>
            <motion.div
              initial={{ opacity: 0, x: -24 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <Box
                className="software-house-photo"
                mx="auto"
                maw={520}
                w="100%"
                style={{
                  position: "relative",
                  aspectRatio: "1 / 1",
                  borderRadius: 28,
                  overflow: "hidden",
                  border: "1px solid rgba(0, 155, 255, 0.22)",
                  boxShadow:
                    "0 24px 56px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 40px rgba(0, 155, 255, 0.1)",
                }}
              >
                <Image
                  src={SOFTWARE_HOUSE_IMAGE}
                  alt="Equipe e ambiente NOGA CODE — software house"
                  fill
                  sizes="(max-width: 768px) 100vw, 50vw"
                  priority
                  style={{ objectFit: "cover" }}
                />
              </Box>
            </motion.div>
          </Grid.Col>
          <Grid.Col span={{ base: 12, md: 6 }} order={{ base: 1, md: 2 }}>
            <Stack gap="xl">
              <SectionHeader
                align="left"
                eyebrow={softwareHouseIntro.eyebrow}
                title={softwareHouseIntro.title}
                highlight={softwareHouseIntro.highlight}
                description={softwareHouseIntro.description}
              />
              <Text size="sm" tt="uppercase" fw={700} style={{ color: colors.primary, letterSpacing: "0.1em" }}>
                Diferenciais
              </Text>
              <List
                spacing="sm"
                icon={
                  <ThemeIcon
                    size={24}
                    radius="xl"
                    style={{ background: "rgba(0,155,255,0.15)", color: colors.primary }}
                  >
                    <Check size={12} />
                  </ThemeIcon>
                }
              >
                {softwareHouseFeatures.map((f) => (
                  <List.Item key={f}>
                    <Text style={{ color: c.body }}>{f}</Text>
                  </List.Item>
                ))}
              </List>
              <Link href="/quem-somos" style={{ textDecoration: "none" }}>
                <PrimaryButton
                  rightSection={<ArrowRight size={18} />}
                  style={{ width: "fit-content" }}
                >
                  Saiba mais
                </PrimaryButton>
              </Link>
            </Stack>
          </Grid.Col>
        </Grid>
      </Container>
    </Box>
  );
}