import { Box, Group, Paper, Text, Title } from "@mantine/core";
import type { ReactNode } from "react";

const INK = "#10202F";
const MUTED = "#6B7C8E";
const BORDER = "#E6ECF2";
const GREEN_DARK = "#0A6F4D";

export const fieldStyles = {
  label: { fontWeight: 600, fontSize: 13, color: INK, marginBottom: 6 },
  input: {
    borderRadius: 12,
    minHeight: 46,
    height: 46,
    fontSize: 14,
    borderColor: BORDER,
  },
};

export function StepLabel({ children }: { children: ReactNode }) {
  return (
    <Text
      fz={11}
      fw={700}
      tt="uppercase"
      c={MUTED}
      style={{ letterSpacing: "0.07em" }}
    >
      {children}
    </Text>
  );
}

export function StepCard({
  children,
  eyebrow,
}: {
  children: ReactNode;
  eyebrow?: ReactNode;
}) {
  return (
    <Paper
      radius={20}
      p={{ base: "lg", sm: 28 }}
      withBorder
      bg="white"
      style={{ borderColor: BORDER, boxShadow: "0 2px 14px rgba(16,24,40,0.04)" }}
    >
      {eyebrow}
      {children}
    </Paper>
  );
}

export function StepHeader({
  title,
  description,
  icon,
}: {
  title: string;
  description: string;
  icon?: ReactNode;
}) {
  return (
    <Group gap={14} align="flex-start" wrap="nowrap" mb={22}>
      {icon ? (
        <Box
          style={{
            flexShrink: 0,
            width: 44,
            height: 44,
            borderRadius: 13,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            background: "linear-gradient(135deg, #ECF6F1, #E4F3EC)",
            color: GREEN_DARK,
          }}
        >
          {icon}
        </Box>
      ) : null}
      <Box>
        <Title order={3} fz={20} fw={800} c={INK} style={{ letterSpacing: "-0.01em" }}>
          {title}
        </Title>
        <Text size="sm" c={MUTED} mt={4} style={{ lineHeight: 1.5 }}>
          {description}
        </Text>
      </Box>
    </Group>
  );
}
