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

const TestimonialSection = () => {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "50px 20px",
      }}
    >
      {/* Image à gauche */}
      <Grid item xs={12} md={6}>
        <Box
          component="img"
          src="https://picsum.photos/600/600.webp"
          alt="Bureau d'études & Maîtrise d'oeuvre"
          sx={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            borderRadius: { xs: "15px 15px 0 0", md: "15px 0 0 15px" },
          }}
        />
      </Grid>

      {/* Contenu Témoignage */}
      <Grid
        item
        xs={12}
        md={6}
        sx={{
          background: "linear-gradient(to right, #002F6C, #0E467F)",
          color: "white",
          padding: "40px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        <Typography
          variant="h3"
          sx={{
            fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
            fontWeight: "bold",
            mb: 2,
            fontStyle: "italic",
            position: "relative",
            "&::before": {
              content: '"“"',
              fontSize: "50px",
              position: "absolute",
              top: "-10px",
              left: "-5px",
              opacity: 0.3,
            },
          }}
        >
          In3 a transformé notre vision en réalité avec une approche passionnée
          et professionnelle.
        </Typography>

        <Box sx={{ display: "flex", alignItems: "center", mt: 3 }}>
          <Avatar
            alt="client bureau d'étude be-in3 le Mans(72)"
            src="https://picsum.photos/100.webp"
            sx={{ width: 56, height: 56, marginRight: 2 }}
          />
          <Box>
            <Typography
              variant="span"
              sx={{
                fontWeight: "bold",
                
              }}
            >
              Marie Dupont
            </Typography>
            <Typography variant="body2">
              Directrice Créative chez TechVision
            </Typography>
          </Box>
        </Box>
      </Grid>
    </Box>
  );
};

export default TestimonialSection;
