import {
  Box,
  Card,
  CardContent,
  CardMedia,
  Grid,
  Typography,
  Button,
  Container,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { motion } from "framer-motion";
import portfolioImg from "../ourwork/Rectangle 6.png";

const works = [
  {
    title: "Project Aurora",
    image: portfolioImg,
    description: "Modern web design with seamless user experience",
  },
  {
    title: "Project Nexus",
    image: portfolioImg,
    description: "Mobile application development for enterprise",
  },
  {
    title: "Project Horizon",
    image: portfolioImg,
    description: "Brand identity and marketing campaign",
  },
];

const OurWorks = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <Box
      sx={{
        backgroundColor: "#1d2733",
        color: "#fff",
        py: 8,
        px: { xs: 2, sm: 4 },
      }}
    >
      <Container maxWidth="md">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
        >
          <Typography
            variant="h4"
            align="center"
            fontWeight={700}
            gutterBottom
            sx={{
              mb: 2,
              fontFamily: "'Montserrat', sans-serif",
              letterSpacing: 0.5,
            }}
          >
            Our Portfolio
          </Typography>
          <Typography
            variant="subtitle1"
            align="center"
            mb={6}
            sx={{
              maxWidth: 600,
              mx: "auto",
              color: "rgba(255,255,255,0.8)",
              fontFamily: "'Open Sans', sans-serif",
            }}
          >
            We craft digital experiences that drive results
          </Typography>
        </motion.div>

        <Grid container spacing={isMobile ? 3 : 4} justifyContent="center">
          {works.map((work, index) => (
            <Grid item xs={12} sm={6} md={4} key={index}>
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
              >
                <Card
                  sx={{
                    borderRadius: 2,
                    overflow: "hidden",
                    bgcolor: "#fff",
                    maxWidth: 320,
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
                    transition: "all 0.3s ease",
                    "&:hover": {
                      boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
                    },
                  }}
                >
                  <Box
                    sx={{
                      height: 180,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      bgcolor: "#f8f9fa",
                      overflow: "hidden",
                    }}
                  >
                    <CardMedia
                      component="img"
                      image={work.image}
                      alt={work.title}
                      sx={{
                        width: "90%",
                        height: "90%",
                        objectFit: "contain",
                        transition: "transform 0.3s ease",
                        "&:hover": {
                          transform: "scale(1.05)",
                        },
                      }}
                    />
                  </Box>
                  <CardContent sx={{ flexGrow: 1, px: 3, py: 2 }}>
                    <Typography
                      variant="h6"
                      fontWeight={600}
                      color="#000"
                      gutterBottom
                      sx={{
                        fontFamily: "'Montserrat', sans-serif",
                        fontSize: "1.1rem",
                      }}
                    >
                      {work.title}
                    </Typography>
                    <Typography
                      variant="body2"
                      color="#000"
                      sx={{
                        mb: 2,
                        fontFamily: "'Open Sans', sans-serif",
                        fontSize: "0.875rem",
                      }}
                    >
                      {work.description}
                    </Typography>
                  </CardContent>
                  <CardContent sx={{ px: 3, py: 0, pb: 3 }}>
                    <Button
                      variant="outlined"
                      fullWidth
                      sx={{
                        borderRadius: "20px",
                        border: "1px solid #000",
                        color: "#000",
                        fontWeight: 600,
                        py: 1,
                        fontSize: "0.8rem",
                        textTransform: "none",
                        letterSpacing: 0.5,
                        fontFamily: "'Montserrat', sans-serif",
                        "&:hover": {
                          backgroundColor: "#000",
                          color: "#fff",
                          border: "1px solid #000",
                        },
                        transition: "all 0.3s ease",
                      }}
                    >
                      View Case Study
                    </Button>
                  </CardContent>
                </Card>
              </motion.div>
            </Grid>
          ))}
        </Grid>

        <Box mt={6} display="flex" justifyContent="center">
          <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
            <Button
              variant="outlined"
              sx={{
                borderRadius: "20px",
                border: "1px solid #00E0FF",
                color: "#00E0FF",
                px: 4,
                py: 1,
                fontWeight: 600,
                fontSize: "0.9rem",
                textTransform: "none",
                letterSpacing: 0.5,
                fontFamily: "'Montserrat', sans-serif",
                "&:hover": {
                  backgroundColor: "rgba(0, 225, 255, 0.19)",
                  border: "1px solid #00e1ff",
                },
                transition: "all 0.3s ease",
              }}
            >
              Explore Full Portfolio
            </Button>
          </motion.div>
        </Box>
      </Container>
    </Box>
  );
};

export default OurWorks;