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="Illustration"
            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="h4"
            sx={{
              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="Marie Dupont"
              src="https://picsum.photos/100.webp"
              sx={{ width: 56, height: 56, marginRight: 2 }}
            />
            <Box>
              <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                Marie Dupont
              </Typography>
              <Typography variant="body2">
                Directrice Créative chez TechVision
              </Typography>
            </Box>
          </Box>
        </Grid>
    </Box>
  );
};

export default TestimonialSection;