import React from "react";
import {
  Box,
  Typography,
  Grid,
  Link,
  IconButton,
} from "@mui/material";
import {
  Facebook,
  Twitter,
  Instagram,
  LinkedIn,
} from "@mui/icons-material";

const Footer = () => {
  return (
    <Box
      sx={{
        backgroundColor: "#0e467f",
        color: "white",
        padding: "40px 20px",
      }}
    >
      <Grid
        container
        spacing={4}
        justifyContent="space-between"
        alignItems="flex-start"
      >
        {/* Section Informations */}
        <Grid item xs={12} sm={6} md={4}>
          <Typography
            variant="h6"
            component="h2"
            sx={{ fontWeight: "bold", textAlign: { xs: "center", md: "left" } }}
          >
            IN3 Intégrale Ingénierie Internationale
          </Typography>
          <Typography
            variant="body2"
            sx={{ marginTop: 1, textAlign: { xs: "center", md: "left" } }}
          >
            67 Boulevard Winston Churchill,
            <br />
            72100 Le Mans, France
          </Typography>
          <Typography
            variant="body2"
            sx={{ marginTop: 1, textAlign: { xs: "center", md: "left" } }}
          >
            <strong>Téléphone :</strong> 02.43.85.09.01
          </Typography>
          <Typography
            variant="body2"
            sx={{ marginTop: 1, textAlign: { xs: "center", md: "left" } }}
          >
            <strong>Email :</strong>{" "}
            <Link
              href="mailto:contact@be-in3.com"
              underline="hover"
              sx={{ color: "white" }}
            >
              contact@be-in3.com
            </Link>
          </Typography>
        </Grid>

        {/* Section Navigation */}
        <Grid item xs={12} sm={6} md={4}>
          <Typography
            variant="h6"
            component="h2"
            sx={{
              fontWeight: "bold",
              textAlign: "center",
            }}
          >
            Liens Utiles
          </Typography>
          <Box
            sx={{
              marginTop: 1,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <Link
              href="/expertises"
              underline="hover"
              sx={{
                color: "white",
                marginBottom: "8px",
                textAlign: "center",
              }}
            >
              Nos Expertises
            </Link>
            <Link
              href="/contact"
              underline="hover"
              sx={{
                color: "white",
                marginBottom: "8px",
                textAlign: "center",
              }}
            >
              Contactez-nous
            </Link>
            <Link
              href="/mentions-legales"
              underline="hover"
              sx={{
                color: "white",
                marginBottom: "8px",
                textAlign: "center",
              }}
            >
              Mentions Légales
            </Link>
          </Box>
        </Grid>

        {/* Section Réseaux Sociaux */}
        <Grid item xs={12} md={4}>
          <Typography
            variant="h6"
            component="h2"
            sx={{
              fontWeight: "bold",
              textAlign: { xs: "center", md: "right" },
            }}
          >
            Suivez-nous
          </Typography>
          <Box
            sx={{
              marginTop: 1,
              display: "flex",
              justifyContent: { xs: "center", md: "flex-end" },
              gap: 2,
            }}
          >
            <IconButton
              aria-label="Facebook"
              href="https://facebook.com"
              target="_blank"
              rel="noopener noreferrer"
              sx={{ color: "white" }}
            >
              <Facebook />
            </IconButton>
            <IconButton
              aria-label="Twitter"
              href="https://twitter.com"
              target="_blank"
              rel="noopener noreferrer"
              sx={{ color: "white" }}
            >
              <Twitter />
            </IconButton>
            <IconButton
              aria-label="Instagram"
              href="https://instagram.com"
              target="_blank"
              rel="noopener noreferrer"
              sx={{ color: "white" }}
            >
              <Instagram />
            </IconButton>
            <IconButton
              aria-label="LinkedIn"
              href="https://linkedin.com"
              target="_blank"
              rel="noopener noreferrer"
              sx={{ color: "white" }}
            >
              <LinkedIn />
            </IconButton>
          </Box>
        </Grid>
      </Grid>

      {/* Copyright */}
      <Box
        sx={{
          borderTop: "1px solid #ffffff",
          marginTop: "20px",
          paddingTop: "10px",
          textAlign: "center",
        }}
      >
        <Typography variant="body2">
          © {new Date().getFullYear()} IN3 Intégrale Ingénierie Internationale.
          Tous droits réservés.
        </Typography>
      </Box>
    </Box>
  );
};

export default Footer;