Octopus-React-Wp/frontend/src/components/Expertises.jsx

import { useState } from "react";
import { Box, Grid, Typography, Card, CardContent, Modal } from "@mui/material";
import pictoMaitriseOeuvre from "../assets/picto-maitrise-oeuvre.avif";
import pictoStructure from "../assets/picto-structure.avif";
import pictoElectricite from "../assets/picto-electricite.avif";
import PropTypes from "prop-types";

// Style commun pour le contenu du modal
const modalStyle = {
  padding: 4,
  borderRadius: "20px",
  background: "rgba(255, 255, 255, 0.9)",
  boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
  backdropFilter: "blur(10px)",
  maxWidth: 600,
  margin: "auto",
  mt: 4,
  position: "relative",
};

// Style commun pour l'icône affichée en haut à droite dans le modal
const iconStyle = {
  position: "absolute",
  top: 16,
  right: 16,
  width: 80,
  height: 80,
  backgroundSize: "cover",
  backgroundPosition: "center",
  borderRadius: "50%",
};

// Style commun pour les boutons "En savoir plus" et "Retour"
const buttonStyle = {
  marginTop: "16px",
  padding: "8px 16px",
  backgroundColor: "#0e467f",
  color: "#fff",
  border: "none",
  borderRadius: "4px",
  cursor: "pointer",
  textTransform: "none",
};

// Fonction pour générer le style de la carte en fonction de l'image de fond
const cardStyle = (image) => ({
  boxShadow: 3,
  padding: 2,
  textAlign: "center",
  backgroundColor: "#fff",
  backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(${image})`,
  backgroundSize: "40%",
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center left",
});

// Composant Modal réutilisable
const ExpertiseModal = ({ modalId, image, title, text, openModal, handleClose }) => (
  <Modal open={openModal === modalId} onClose={handleClose}>
    <Box sx={modalStyle}>
      <Box sx={{ ...iconStyle, backgroundImage: `url(${image})` }} />
      <Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
        {title}
      </Typography>
      <Typography
        variant="body1"
        sx={{ color: "#333", lineHeight: 1.6 }}
        dangerouslySetInnerHTML={{ __html: text }}
      />
      <button onClick={handleClose} style={buttonStyle}>
        Retour
      </button>
    </Box>
  </Modal>
);

const Expertices = ({
  expertiseTitle,
  expertise1Title,
  expertise1Text,
  expertise2Title,
  expertise2Text,
  expertise3Title,
  expertise3Text,
}) => {
  const [openModal, setOpenModal] = useState(null);

  const handleOpenModal = (modalId) => setOpenModal(modalId);
  const handleCloseModal = () => setOpenModal(null);

  // Fonction qui supprime les balises HTML et tronque le texte s'il est trop long
  const truncateText = (text, maxLength) => {
    const plainText = text.replace(/<[^>]+>/g, "");
    return plainText.length > maxLength
      ? `${plainText.substring(0, maxLength)}...`
      : plainText;
  };

  return (
    <Box sx={{ py: 6, px: 4, backgroundColor: "#f9f9f9" }}>
      <Typography
        variant="h2"
        align="center"
        gutterBottom
        sx={{
          fontWeight: "bold",
          mb: 4,
          fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" },
        }}
      >
        {expertiseTitle}
      </Typography>
      <Grid container spacing={4}>
        {/* Expertise 1 */}
        <Grid item xs={12} md={4}>
          <Card sx={cardStyle(pictoMaitriseOeuvre)}>
            <CardContent>
              <Typography
                variant="h3"
                sx={{
                  fontWeight: "bold",
                  mb: 2,
                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
                }}
              >
                {expertise1Title}
              </Typography>
              <Typography variant="body1">
                {truncateText(expertise1Text, 70)}
              </Typography>
              <button
                onClick={() => handleOpenModal("maitrise_oeuvre")}
                style={buttonStyle}
              >
                En savoir plus
              </button>
            </CardContent>
          </Card>
        </Grid>

        {/* Expertise 2 */}
        <Grid item xs={12} md={4}>
          <Card sx={cardStyle(pictoStructure)}>
            <CardContent>
              <Typography
                variant="h3"
                sx={{
                  fontWeight: "bold",
                  mb: 2,
                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
                }}
              >
                {expertise2Title}
              </Typography>
              <Typography variant="body1">
                {truncateText(expertise2Text, 70)}
              </Typography>
              <button
                onClick={() => handleOpenModal("structure")}
                style={buttonStyle}
              >
                En savoir plus
              </button>
            </CardContent>
          </Card>
        </Grid>

        {/* Expertise 3 */}
        <Grid item xs={12} md={4}>
          <Card sx={cardStyle(pictoElectricite)}>
            <CardContent>
              <Typography
                variant="h3"
                sx={{
                  fontWeight: "bold",
                  mb: 2,
                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
                }}
              >
                {expertise3Title}
              </Typography>
              <Typography variant="body1">
                {truncateText(expertise3Text, 70)}
              </Typography>
              <button
                onClick={() => handleOpenModal("electricite")}
                style={buttonStyle}
              >
                En savoir plus
              </button>
            </CardContent>
          </Card>
        </Grid>
      </Grid>

      {/* Modaux */}
      <ExpertiseModal
        modalId="maitrise_oeuvre"
        image={pictoMaitriseOeuvre}
        title={expertise1Title}
        text={expertise1Text}
        openModal={openModal}
        handleClose={handleCloseModal}
      />
      <ExpertiseModal
        modalId="structure"
        image={pictoStructure}
        title={expertise2Title}
        text={expertise2Text}
        openModal={openModal}
        handleClose={handleCloseModal}
      />
      <ExpertiseModal
        modalId="electricite"
        image={pictoElectricite}
        title={expertise3Title}
        text={expertise3Text}
        openModal={openModal}
        handleClose={handleCloseModal}
      />
    </Box>
  );
};

Expertices.propTypes = {
  expertiseTitle: PropTypes.string.isRequired,
  expertise1Title: PropTypes.string.isRequired,
  expertise1Text: PropTypes.string.isRequired,
  expertise2Title: PropTypes.string.isRequired,
  expertise2Text: PropTypes.string.isRequired,
  expertise3Title: PropTypes.string.isRequired,
  expertise3Text: PropTypes.string.isRequired,
  
};

export default Expertices;