import React from "react";
import { Box, Container, Grid, Typography, Link, IconButton, Divider } from "@mui/material";
import { LocationOn, Email, Phone } from "@mui/icons-material";
import InstagramIcon from "@mui/icons-material/Instagram";
import TwitterIcon from "@mui/icons-material/Twitter";
import FacebookIcon from "@mui/icons-material/Facebook";
import YouTubeIcon from "@mui/icons-material/YouTube";

const Footer: React.FC = () => {
  return (
    <Box component="footer" sx={{ bgcolor: "#f7f7f7", py: 6 }}>
      <Container maxWidth="lg">
        <Grid container spacing={4}>
          {/* Loop Sustainability */}
          <Grid item xs={12} md={4}>
            <Typography variant="h6" fontWeight="bold">
              Loop Sustainability
            </Typography>
            <Typography variant="body2" sx={{ mt: 1, color: "gray" }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            </Typography>
          </Grid>

          {/* Get in Touch */}
          <Grid item xs={12} md={4}>
            <Typography variant="h6" fontWeight="bold">
              Get in Touch
            </Typography>
            <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
              <LocationOn color="primary" />
              <Typography variant="body2" sx={{ ml: 1 }}>8819 Ohio St. South Gate, CA 90280</Typography>
            </Box>
            <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
              <Email color="primary" />
              <Typography variant="body2" sx={{ ml: 1 }}>Ourstudio@hello.com</Typography>
            </Box>
            <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
              <Phone color="primary" />
              <Typography variant="body2" sx={{ ml: 1 }}>+1 386-688-3295</Typography>
            </Box>
          </Grid>

          {/* Company Links */}
          <Grid item xs={12} md={4}>
            <Typography variant="h6" fontWeight="bold">
              Company
            </Typography>
            <Box sx={{ mt: 1 }}>
              {["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => (
                <Link href="#" key={text} variant="body2" display="block" sx={{ color: "gray", mt: 0.5, textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
                  {text}
                </Link>
              ))}
            </Box>
          </Grid>
        </Grid>

        {/* Social Media Icons */}
        <Box display="flex" justifyContent="flex-end" sx={{ mt: 4 }}>
          <IconButton color="default">
            <InstagramIcon />
          </IconButton>
          <IconButton color="default">
            <TwitterIcon />
          </IconButton>
          <IconButton color="default">
            <FacebookIcon />
          </IconButton>
          <IconButton color="default">
            <YouTubeIcon />
          </IconButton>
        </Box>

        {/* Footer Links */}
        <Divider sx={{ my: 4 }} />
        <Box textAlign="center">
          <Box display="flex" justifyContent="center" gap={3}>
            {["Privacy Policy", "Terms of Use", "Sales and Refunds", "Legal", "Site Map"].map((text) => (
              <Link href="#" key={text} variant="body2" sx={{ color: "gray", textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
                {text}
              </Link>
            ))}
          </Box>
          <Typography variant="body2" sx={{ mt: 2, color: "gray" }}>
            © 2021 All Rights Reserved
          </Typography>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;
