import { Link } from "react-router-dom";
import {
  Button,
  Container,
  Stack,
  Title,
  Text,
  Group,
  Card,
  Divider,
} from "@mantine/core";
import { IconArrowRight, IconRocket, IconTerminal2 } from "@tabler/icons-react";
import clientRoutes from "@/clientRoutes";

export default function Home() {
  return (
    <Container
      mih="100vh"
      px="md"
      size={"full"}
      w={"100%"}
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background:
          "radial-gradient(circle at top left, rgba(0,255,200,0.08), transparent 70%)",
      }}
    >
      <Card
        radius="xl"
        p="xl"
        withBorder
        style={{
          textAlign: "center",
          background:
            "linear-gradient(145deg, rgba(20,20,20,0.95), rgba(45,45,45,0.9))",
          borderColor: "rgba(100,100,100,0.2)",
          boxShadow: "0 0 25px rgba(0,255,200,0.08)",
          backdropFilter: "blur(6px)",
        }}
      >
        <Stack gap="lg" align="center">
          <Group gap={8}>
            <IconRocket size={28} color="teal" />
            <Title order={1} c="gray.0">
              Welcome to Jenna
            </Title>
          </Group>
          <Text c="dimmed" size="md" maw={500}>
            A futuristic dashboard experience built with Mantine and Bun —
            designed for speed, precision, and modern elegance. Navigate to your
            dashboard and start exploring.
          </Text>
          <Divider w="40%" mx="auto" />
          <Button
            component={Link}
            to={clientRoutes["/scr/dashboard"]}
            radius="md"
            size="md"
            variant="gradient"
            gradient={{ from: "teal", to: "cyan", deg: 45 }}
            rightSection={<IconArrowRight size={18} />}
            style={{
              boxShadow: "0 0 12px rgba(0,255,200,0.3)",
              transition: "all 0.2s ease",
            }}
          >
            Go to Dashboard
          </Button>
          <Group mt="xl" gap={4} c="dimmed">
            <IconTerminal2 size={14} />
            <Text size="xs" c="dimmed">
              Built for developers — optimized for 2025 workflows.
            </Text>
          </Group>
        </Stack>
      </Card>
    </Container>
  );
}