"use client";

import { Accordion, Container, SimpleGrid, Stack, Text } from "@mantine/core";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { useThemeColors } from "@/hooks/useThemeColors";
import { faqIntro, faqItems, type FaqItem } from "@/data/landing";

function FaqColumn({ items }: { items: FaqItem[] }) {
  const theme = useThemeColors();

  return (
    <Accordion
      w="100%"
      variant="separated"
      radius="md"
      chevronPosition="right"
      styles={{
        item: theme.accordionItem,
        control: {
          color: theme.heading,
          fontWeight: 600,
          padding: "18px 20px",
        },
        panel: {
          padding: "0 20px 20px",
        },
      }}
    >
      {items.map((item) => (
        <Accordion.Item key={item.id} value={item.id}>
          <Accordion.Control>{item.q}</Accordion.Control>
          <Accordion.Panel>
            <Stack gap="md">
              {item.paragraphs.map((paragraph) => (
                <Text
                  key={paragraph.slice(0, 40)}
                  size="sm"
                  style={{ color: theme.muted, lineHeight: 1.75 }}
                >
                  {paragraph}
                </Text>
              ))}
            </Stack>
          </Accordion.Panel>
        </Accordion.Item>
      ))}
    </Accordion>
  );
}

export function FaqSection() {
  const mid = Math.ceil(faqItems.length / 2);
  const leftColumn = faqItems.slice(0, mid);
  const rightColumn = faqItems.slice(mid);

  return (
    <Container component="section" size="xl" py={100} id="faq">
      <Stack gap={48} align="center">
        <SectionHeader
          eyebrow={faqIntro.eyebrow}
          title={faqIntro.title}
          highlight={faqIntro.highlight}
        />
        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md" w="100%" verticalSpacing="md">
          <FaqColumn items={leftColumn} />
          <FaqColumn items={rightColumn} />
        </SimpleGrid>
      </Stack>
    </Container>
  );
}