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",
  textAlign: "center",
  padding: "10px",
  [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={{
         
          color: "#333333",
          mb: 4,
          fontSize: { xs: "20px", sm: "48px" },
          fontFamily: "SF Pro Rounded, sans-serif",
        }}
      >
        Why Choose Us?
      </Typography>
      <Grid container spacing={2} 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="400"
                sx={{
                  fontSize: { xs: "12px", sm: "20px" },
                  fontFamily: "Roboto, sans-serif",
                  textAlign: "center",
                }}
              >
                {item.text}
              </Typography>
            </Circle>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default WhyChooseUs;
