import React from "react";
import { Box, Grid, Typography } from "@mui/material";
import { styled } from "@mui/system";

const Circle = styled(Box)(({ theme }) => ({
  width: 170, // Increased size
  height: 170,
  borderRadius: "50%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "5px solid",
  transition: "0.3s",
  [theme.breakpoints.down("sm")]: {
    width: 120, // Adjusting for mobile
    height: 120,
  },
}));

const items = [
  { text: "Partnerships", color: "#E3C34D" },
  { text: "Technology", color: "#90B5D4" },
  { text: "Professionalism", color: "#A2C08A" },
  { text: "Transparency", color: "#EDEAE3" },
];

const WhyChooseUs: React.FC = () => {
  return (
    <Box sx={{ textAlign: "center", mt: 5 }}>
     <Typography variant="h4" sx={{ fontWeight: "bold"  , color:'#333333' ,mb:4}}>
        Why Choose Us?
      </Typography>
      <Grid
        container
        spacing={1} 
        justifyContent="center"
        alignItems="center"
      >
        {items.map((item, index) => (
          <Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
            <Circle sx={{ borderColor: item.color }}>
              <Typography variant="body1" fontWeight="500">
                {item.text}
              </Typography>
            </Circle>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default WhyChooseUs;