"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import {
  Box,
  Card,
  Container,
  List,
  ListItemButton,
  ListItemText,
  Stack,
  Typography,
} from "@mui/material";
import { paths } from "@/paths";

const navItems = [
  { label: "Products", path: paths.products.home },
  { label: "Games", path: paths.games.home },
  { label: "About", path: "/about" },
  { label: "Contact", path: "/contact" },
];

export default function Home() {
  const router = useRouter();

  return (
    <Box
      sx={{
        minHeight: "100vh",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <Box
        component="video"
        autoPlay
        muted
        loop
        playsInline
        src="/hero-background.mp4"
        sx={{
          position: "fixed",
          inset: 0,
          width: "100vw",
          height: "100vh",
          objectFit: "cover",
          zIndex: 0,
        }}
      />
      <Box
        sx={{
          position: "fixed",
          inset: 0,
          background:
            "linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.55) 100%)",
          zIndex: 1,
        }}
      />

      <Container
        maxWidth="lg"
        sx={{
          position: "relative",
          zIndex: 2,
          minHeight: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-end",
          py: { xs: 3, md: 6 },
        }}
      >
        <Card
          elevation={10}
          sx={{
            width: { xs: "100%", sm: 420 },
            borderRadius: 4,
            p: { xs: 2, sm: 3 },
            backdropFilter: "blur(10px)",
            backgroundColor: "rgba(255,255,255,0.10)",
            border: "1px solid rgba(255,255,255,0.18)",
            color: "white",
          }}
        >
          <Stack spacing={2}>
            <Box>
              <Typography variant="h5" fontWeight={700}>
                Greetings
              </Typography>
              <Typography variant="body2" sx={{ opacity: 0.85 }}>
                Choose a section to continue.
              </Typography>
            </Box>

            <List
              disablePadding
              sx={{
                display: "flex",
                flexDirection: "column",
                gap: 1,
              }}
            >
              {navItems.map((item) => (
                <ListItemButton
                  key={item.path}
                  onClick={() => router.push(item.path)}
                  sx={{
                    borderRadius: 2,
                    border: "1px solid rgba(255,255,255,0.16)",
                    backgroundColor: "rgba(0,0,0,0.18)",
                    transition: "transform 120ms ease, background-color 120ms ease",
                    "&:hover": {
                      backgroundColor: "rgba(255,255,255,0.12)",
                      transform: "translateX(-4px)",
                    },
                    "&:active": {
                      transform: "translateX(-2px) scale(0.99)",
                    },
                  }}
                >
                  <ListItemText
                    primary={item.label}
                    primaryTypographyProps={{
                      fontWeight: 600,
                    }}
                  />
                </ListItemButton>
              ))}
            </List>
          </Stack>
          <br />
        </Card>
      </Container>
    </Box>
  );
}

