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

import React, { useState } from "react";
import {
  Box,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
  Modal,
  Fade,
  Backdrop,
} from "@mui/material";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const ServicePageTemplate = ({
  title,
  subtitle,
  description,
  features,
  image,
  ctaText,
  ctaLink,
  carouselItems,
}) => {
  const [openModal, setOpenModal] = useState(false);
  const [modalContent, setModalContent] = useState({});

  const handleCardClick = (feature) => {
    setModalContent({
      title: feature.title,
      text: feature.modalText || "Texte non disponible.",
      image: feature.modalImage || "https://picsum.photos/id/43/800/400.webp", // Image par défaut
    });
    setOpenModal(true);
  };

  const handleCloseModal = () => {
    setOpenModal(false);
  };

  return (
    <Box
      sx={{
        backgroundColor: "#f5f5f5",
        color: "#333",
        fontFamily: "Arial, sans-serif",
      }}
    >
      {/* Section Attention */}
      <Box
        sx={{
          backgroundImage: `url(${image})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          minHeight: "70vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          color: "white",
          padding: "20px",
        }}
      >
        <Box sx={{ maxWidth: "800px" }}>
          <Typography 
            variant="h1" 
            sx={{ 
              fontWeight: "bold", 
              mb: 2, 
              fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
            }}
          >
            {title}

          </Typography>
          <Typography 
            variant="body1" 
            sx={{ 
              mb: 4 
            }}
          >
            {subtitle}

          </Typography>
          <Button
            href={ctaLink}
            variant="contained"
            color="secondary"
            size="large"
            sx={{
              textTransform: "none",
              fontWeight: "bold",
              backgroundColor: " #0e467f",
              "&:hover": { backgroundColor: "#00bcd4" },
            }}
          >
            {ctaText}
          </Button>
        </Box>
      </Box>

      {/* Section Interest */}
      <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
        <Typography variant="h2" 
          sx={{ 
            fontWeight: "bold", 
            mb: 2,
            fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
          }}
        >
          Pourquoi choisir notre formation ?
        </Typography>

        <Typography
          variant="body1"
          sx={{ maxWidth: "800px", margin: "0 auto", mb: 4 }}
        >
          {description}
        </Typography>
      </Box>

      {/* Section Desire */}
      <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
        <Typography
          variant="h2"
            sx={{ 
              fontWeight: "bold", 
              textAlign: "center", 
              mb: 4,
              fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
 
            }}
        >
          Ce que nous offrons
        </Typography>

        <Grid container spacing={4} justifyContent="center">
          {features.map((feature, index) => (
            <Grid item xs={12} md={4} key={index}>
              <Card
                sx={{
                  boxShadow: 2,
                  borderRadius: 2,
                  textAlign: "center",
                  padding: "20px",
                  backgroundColor: "#f9f9f9",
                  cursor: "pointer",
                  transition: "transform 0.3s ease, box-shadow 0.3s ease",
                  "&:hover": {
                    transform: {
                      xs: "none", // Pas d'hover sur mobile
                      md: "scale(1.05)", // Hover sur desktop uniquement
                    },
                    boxShadow: {
                      xs: 2, // Pas d'effet de hover sur mobile
                      md: 5, // Augmentation de l'ombre sur desktop
                    },
                  },
                  "&:active": {
                    transform: "scale(0.98)", // Effet de clic pour le tactile
                    boxShadow: 3,
                  },
                }}
                onClick={() => handleCardClick(feature)}
              >
                <CardContent>
                  <Typography
                    variant="h3"
                    sx={{
                      fontWeight: "bold",
                      mb: 2,
                      fontSize: 26,
                    }}
                  >
                    {feature.title}
                  </Typography>
                  <Typography variant="body2" sx={{ color: "#555" }}>
                    {feature.description}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Box>

      {/* Modal */}
      <Modal
        open={openModal}
        onClose={handleCloseModal}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={openModal}>
          <Box
            sx={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              width: "90%",
              maxWidth: "600px",
              p: 4,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              textAlign: "center",
              background: "rgb(255, 255, 255)",
              boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
              backdropFilter: "blur(10px)",
              borderRadius: 2,
              border: "1px solid rgba(255, 255, 255, 0.3)",
              color: "rgb(0, 0, 0)",
            }}
          >
            <img
              src={modalContent.image}
              alt={modalContent.title}
              style={{
                width: "100%",
                borderRadius: "8px",
                marginBottom: "20px",
              }}
            />
            <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
              {modalContent.title}
            </Typography>
            <Typography variant="body1" sx={{ mb: 4 }}>
              {modalContent.text}
            </Typography>
            <Button
              onClick={handleCloseModal}
              variant="contained"
              color="secondary"
              sx={{
                textTransform: "none",
                fontWeight: "bold",
                backgroundColor: "#f44336",
                "&:hover": { backgroundColor: "#d32f2f" },
              }}
            >
              Quitter
            </Button>
          </Box>
        </Fade>
      </Modal>

      {/* Carousel Section */}
      {carouselItems && carouselItems.length > 0 && (
        <Box
          sx={{
            padding: "40px 20px",
            textAlign: "center",
            backgroundColor: "#f9f9f9",
          }}
        >
          <Typography variant="h2" 
            sx={{ 
              marginBottom: 4,
              fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
 
            }}
          >
            Découvrez nos réalisations
          </Typography>

          <Swiper
            modules={[Navigation, Pagination, Autoplay]}
            spaceBetween={20}
            slidesPerView={1}
            navigation
            pagination={{ clickable: true }}
            autoplay={{ delay: 3000 }}
            loop
          >
            {carouselItems.map((item, index) => (
              <SwiperSlide key={index}>
                <Card
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    padding: "20px",
                    boxShadow: 3,
                  }}
                >
                  <img
                    src={item.image}
                    alt={item.title}
                    style={{
                      width: "40%",
                      height: "auto",
                      objectFit: "cover",
                      borderRadius: "8px",
                      marginRight: "20px",
                    }}
                  />
                  <CardContent>
                    <Typography variant="h3" 
                      sx={{ 
                        fontWeight: "bold",
                        fontSize: { xs: '1.2rem', md: '2rem', lg: '2.5rem' }, // Responsive 
                      }}
                    >
                      {item.title}
                    </Typography>
                    <Typography variant="body2">{item.description}</Typography>
                  </CardContent>
                </Card>
              </SwiperSlide>
            ))}
          </Swiper>
        </Box>
      )}

      {/* Section Action */}
      <Box
        sx={{
          backgroundColor: "#0e467f",
          color: "white",
          textAlign: "center",
          padding: "40px 20px",
        }}
      >
        <Typography variant="h2" 
          sx={{ 
            fontWeight: "bold", 
            mb: 2,
            fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
 
          }}
        >
          Prêt à démarrer ?
        </Typography>

        <Typography variant="body1" sx={{ mb: 4 }}>
          Rejoignez-nous dès aujourd’hui et profitez de nos services pour
          booster votre activité.
        </Typography>
        <Button
          href={ctaLink}
          variant="contained"
          color="secondary"
          size="large"
          sx={{
            textTransform: "none",
            fontWeight: "bold",
            backgroundColor: "#00bcd4",
            "&:hover": { backgroundColor: "#0288d1" },
          }}
        >
          {ctaText}
        </Button>
      </Box>
    </Box>
  );
};

export default ServicePageTemplate;