import React from "react";
import { Box, Container, Grid, Typography, Link, IconButton, Divider } from "@mui/material";
import { LocationOn, Email } 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" }}>
              Loop Sustainability helps businesses responsibly recycle used electronic items through advanced refining and disintegration processes. We ensure compliance, sustainability, and a circular economy approach to e-waste management.
            </Typography>
          </Grid>

          {/* Get in Touch */}
          <Grid item xs={12} md={4}>
            <Typography variant="h6" fontWeight="bold">
              Get in Touch
            </Typography>
            <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
              <LocationOn color="primary" sx={{ mt: 0.5 }} />
              <Typography variant="body2" sx={{ ml: 1 }}>
                Hyderabad Office: 3rd Floor, Plot No: 1303 and 1304, Ayyappa Society, Khanamet, Madhapur, Hyderabad 500081, Telangana, India.
              </Typography>
            </Box>
            <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
              <LocationOn color="primary" sx={{ mt: 0.5 }} />
              <Typography variant="body2" sx={{ ml: 1 }}>
                Chennai Office: Plot No 1, Kundrathur Main Road, Sri Guruvayurappan Nagar, Manancherry, Chengalpattu, Chennai 600069, Tamil Nadu, India.
              </Typography>
            </Box>
            <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
              <Email color="primary" />
              <Typography variant="body2" sx={{ ml: 1 }}>reach@letsloop.in</Typography>
            </Box>
          </Grid>

          {/* Company Links */}
          <Grid item xs={12} md={4} textAlign="right">
            <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>

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

        {/* 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;