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

const works = [
  {
    title: "Project Name",
    image: portfolioImg,
  },
  {
    title: "Project Name",
    image: portfolioImg,
  },
  {
    title: "Project Name",
    image: portfolioImg,
  },
];

const OurWorks = () => {
  return (
    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8, px: 2 }}>
      <Typography variant="h4" align="center" fontWeight="bold" gutterBottom>
        Our Works
      </Typography>
      <Typography variant="subtitle1" align="center" mb={6}>
        We’ve helped brands grow through bold strategy and creative execution.
        Explore our recent success stories.
      </Typography>

      <Grid container spacing={4} justifyContent="center">
        {works.map((work, index) => (
          <Grid item xs={12} sm={6} md={4} key={index}>
            <Card
              sx={{
                borderRadius: 3,
                overflow: "hidden",
                bgcolor: "#fff",
                maxWidth: 320,
                margin: "0 auto",
              }}
              elevation={3}
            >
              <CardContent>
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  color="Black"
                  gutterBottom
                >
                  {work.title}
                </Typography>
              </CardContent>
              <CardMedia
                component="img"
                image={work.image}
                alt={work.title}
                sx={{
                  objectFit: "contain",
                  height: 250,
                  px: 2,
                }}
              />
              <CardContent>
                <Button
                  variant="contained"
                  fullWidth
                  sx={{
                    backgroundColor: "#000",
                    color: "#00FFD1",
                    fontWeight: "bold",
                    "&:hover": {
                      backgroundColor: "#333",
                    },
                    borderRadius: "30px",
                  }}
                >
                  VIEW DEMO
                </Button>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>

      <Box mt={6} display="flex" justifyContent="center">
        <Button
          variant="outlined"
          sx={{
            borderRadius: "30px",
            borderColor: "#00FFD1",
            color: "#00FFD1",
            px: 4,
            py: 1.5,
            fontWeight: "bold",
            "&:hover": {
              backgroundColor: "#00FFD1",
              color: "#000",
            },
          }}
        >
          VIEW FULL PORTFOLIO →
        </Button>
      </Box>
    </Box>
  );
};

export default OurWorks;
