import * as React from "react";
import { Box, Typography, Button, Container, Stack } from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";

export default function Home() {
  const navigate = useNavigate();
  const theme = useTheme();

  return (
    <Box
      sx={{
        width: "100%",
        minHeight: "calc(100vh - 64px)", // accounting for header
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        overflow: "hidden",
        "&::before": {
          content: '""',
          position: "absolute",
          top: "-20%",
          left: "-10%",
          width: "50%",
          height: "60%",
          background: "radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(0,0,0,0) 70%)",
          zIndex: 0,
        },
        "&::after": {
          content: '""',
          position: "absolute",
          bottom: "-20%",
          right: "-10%",
          width: "50%",
          height: "60%",
          background: "radial-gradient(circle, rgba(236,72,153,0.15) 0%, rgba(0,0,0,0) 70%)",
          zIndex: 0,
        },
      }}
    >
      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 1 }}>
        <Stack
          spacing={4}
          alignItems="center"
          textAlign="center"
          sx={{
            p: { xs: 4, md: 8 },
            backdropFilter: "blur(20px)",
            backgroundColor: (t) => alpha(t.palette.common.white, t.palette.mode === "dark" ? 0.04 : 0.6),
            border: "1px solid",
            borderColor: "divider",
            borderRadius: 4,
            boxShadow: (t) =>
              t.palette.mode === "dark"
                ? "0 8px 32px 0 rgba(0, 0, 0, 0.5)"
                : "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
          }}
        >
          <Typography
            variant="h1"
            sx={{
              fontWeight: 800,
              fontSize: { xs: "3rem", md: "5rem" },
              background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              mb: 2,
            }}
          >
            Welcome to Khata
          </Typography>

          <Typography
            variant="h5"
            color="text.secondary"
            sx={{ maxWidth: "600px", lineHeight: 1.6 }}
          >
            Your intelligent, extensible financial ledger. Control accounts, manage transactions, and track your data dynamically with our OpenAPI-driven architecture.
          </Typography>

          <Box mt={4}>
            <Button
              variant="contained"
              size="large"
              endIcon={<ArrowForwardIcon />}
              onClick={() => navigate("/dashboard")}
              sx={{
                px: 4,
                py: 1.5,
                borderRadius: "50px",
                fontWeight: "bold",
                background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
                transition: "transform 0.2s ease-in-out, box-shadow 0.2s",
                "&:hover": {
                  transform: "translateY(-3px)",
                  boxShadow: (t) => `0 8px 20px ${alpha(t.palette.primary.main, 0.4)}`,
                },
              }}
            >
              Enter Dashboard
            </Button>
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}