import { Box, SimpleGrid, Stack, Text } from "@chakra-ui/react";
import type { ContentItem } from "../../db/schema";
import { Section } from "./Section";
import { SectionHeading } from "./SectionHeading";

export function Process({ items }: { items: ContentItem[] }) {
  return (
    <Section id="process">
      <SectionHeading
        eyebrow="服務流程"
        title="專業安裝流程 5 步到位"
        description="清晰透明嘅流程，每一步都有專人跟進，你唔需要自己四圍撲。"
      />
      <Box>
        <SimpleGrid columns={{ base: 1, md: 5 }} gap={{ base: 10, md: 6 }}>
          {items.map((item) => (
            <Stack
              key={item.id}
              align="flex-start"
              textAlign="left"
              gap="3"
            >
              <Box
                fontFamily="heading"
                fontWeight="900"
                fontSize="5xl"
                lineHeight="1"
                color="brand.600"
              >
                {item.extra}
              </Box>
              <Text fontFamily="heading" fontWeight="700" fontSize="lg" color="ink">
                {item.title}
              </Text>
              <Text fontSize="sm" color="fg.muted" lineHeight="1.75">
                {item.description}
              </Text>
            </Stack>
          ))}
        </SimpleGrid>
      </Box>
    </Section>
  );
}