import {
  Avatar,
  Box,
  Card,
  CardContent,
  Grid,
  Typography,
} from "@mui/material";
import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";

const testimonials = [
  {
    name: "Name",
    role: "Role",
    company: "Company Name & Logo",
    feedback:
      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
    rating: 5,
  },
  {
    name: "John Dae",
    role: "Sr Manager",
    company: "Wells Fargo",
    feedback:
      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
    rating: 5,
  },
  {
    name: "Name",
    role: "Role",
    company: "Company Name & Logo",
    feedback:
      "Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
    rating: 4,
  },
];

const Testimonials = () => {
  return (
    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
      <Box textAlign="center" mb={6}>
        <Typography variant="h4" fontWeight="bold" gutterBottom>
          Testimonials
        </Typography>
        <Typography variant="subtitle1">
          Don’t just take our word for it -- hear directly from our clients
        </Typography>
      </Box>

      <Grid container spacing={4} justifyContent="center">
        {testimonials.map((t, idx) => (
          <Grid item xs={12} sm={6} md={4} key={idx}>
            <Card
              sx={{
                borderRadius: 3,
                maxWidth: 320,
                margin: "0 auto",
                textAlign: "center",
                py: 3,
              }}
            >
              <Avatar
                src={testimonialImg}
                alt={t.name}
                sx={{ width: 100, height: 100, margin: "0 auto", mb: 2 }}
              />
              <CardContent>
                <Typography variant="subtitle1" fontWeight="bold">
                  {t.name} ,{" "}
                  <span style={{ fontWeight: "normal" }}>{t.role}</span>
                </Typography>
                <Typography variant="body2" color="text.secondary" mb={1}>
                  {t.company}
                </Typography>
                <Typography variant="body2" color="text.secondary" mb={2}>
                  {t.feedback}
                </Typography>
                <Box>
                  {Array.from({ length: 5 }).map((_, i) => (
                    <span
                      key={i}
                      style={{
                        color: i < t.rating ? "#00FFD1" : "#ccc",
                        fontSize: "1.2rem",
                      }}
                    >
                      ★
                    </span>
                  ))}
                </Box>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default Testimonials;