import React from "react";
import {
  Box,
  Typography,
  Grid,
  Avatar,
  Rating,
  keyframes,
  useTheme,
} from "@mui/material";

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
`;

const Testimonials: React.FC = () => {
  const theme = useTheme();

  const testimonials = [
    {
      name: "Bunga Utami",
      initials: "BU",
      quote:
        "Terimakasih banyak, kini ruanganku menjadi lebih menarik dan terlihat lebih hidup.",
      rating: 4.5,
      delay: "0.2s",
    },
    {
      name: "Ibnu Sukijan",
      initials: "IS",
      quote:
        "Makasih Panto, aku sekarang berasa tinggal di apartemen yang kerenan bareng-bareng yang terlihat mewah!",
      rating: 5,
      delay: "0.4s",
    },
    {
      name: "Mpok Ina",
      initials: "MI",
      quote: "Sopir terjangkau untung banyak",
      rating: 4,
      delay: "0.6s",
    },
  ];

  return (
    <Box
      sx={{
        py: 10,
        px: { xs: 4, md: 8 },
        backgroundColor: "#fff",
        textAlign: "center",
        maxWidth: "1400px",
        margin: "0 auto",
      }}
    >
      {/* Section Header */}
      <Box sx={{ mb: 6 }}>
        <Typography
          variant="subtitle1"
          sx={{
            color: "#f4a261",
            fontWeight: 600,
            letterSpacing: 2,
            mb: 1,
            animation: `${fadeIn} 0.6s ease-out`,
          }}
        >
          TESTIMONIALS
        </Typography>
        <Typography
          variant="h3"
          sx={{
            fontWeight: 700,
            color: "#000",
            fontSize: { xs: "2rem", md: "2.5rem" },
            animation: `${fadeIn} 0.6s ease-out 0.1s forwards`,
            opacity: 0,
          }}
        >
          Our Client Reviews
        </Typography>
      </Box>

      {/* Testimonial Cards */}
      <Grid container spacing={4} justifyContent="center">
        {testimonials.map((testimonial, index) => (
          <Grid item xs={12} md={4} key={index}>
            <Box
              sx={{
                backgroundColor: "#f9f9f9",
                padding: "30px",
                borderRadius: "8px",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                borderLeft: "4px solid #f4a261",
                boxShadow: "0 5px 15px rgba(0,0,0,0.05)",
                transition: "transform 0.3s ease",
                animation: `${fadeIn} 0.6s ease-out ${testimonial.delay} forwards`,
                opacity: 0,
                "&:hover": {
                  transform: "translateY(-5px)",
                  boxShadow: "0 8px 25px rgba(0,0,0,0.1)",
                },
              }}
            >
              <Rating
                value={testimonial.rating}
                precision={0.5}
                readOnly
                sx={{
                  mb: 2,
                  "& .MuiRating-icon": {
                    color: "#f4a261",
                  },
                }}
              />
              <Typography
                variant="body1"
                sx={{
                  color: "#333",
                  lineHeight: 1.7,
                  mb: 3,
                  flexGrow: 1,
                  fontStyle: "italic",
                  position: "relative",
                  pl: 2,
                  "&::before": {
                    content: '"\\201C"',
                    position: "absolute",
                    left: -5,
                    top: -15,
                    fontSize: "3rem",
                    color: "#f4a261",
                    opacity: 0.3,
                    lineHeight: 1,
                  },
                }}
              >
                {testimonial.quote}
              </Typography>
              <Box sx={{ display: "flex", alignItems: "center" }}>
                <Avatar
                  sx={{
                    width: 50,
                    height: 50,
                    mr: 2,
                    bgcolor: "#333",
                    color: "#fff",
                    fontWeight: 600,
                  }}
                >
                  {testimonial.initials}
                </Avatar>
                <Typography
                  variant="subtitle1"
                  sx={{ fontWeight: 600, color: "#000" }}
                >
                  {testimonial.name}
                </Typography>
              </Box>
            </Box>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default Testimonials;
