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={3}>
            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
              Loop Sustainability
            </Typography>
            <Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
              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={7} md={3}>
            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
              Get in Touch
            </Typography>
            <Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}>
              <LocationOn color="primary" sx={{ mt: 0.5 }} />
              <Typography variant="body2" sx={{ ml: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
                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, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
                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, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
                reach@letsloop.in
              </Typography>
            </Box>
          </Grid>

          {/* Company Links */}
          <Grid item xs={5} md={3} textAlign="center">
            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
              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: "#77808B",
                    mt: 0.5,
                    textDecoration: "none",
                    fontFamily: "Helvetica, Arial, sans-serif",
                    "&:hover": { textDecoration: "underline" },
                  }}
                >
                  {text}
                </Link>
              ))}
            </Box>
          </Grid>

          {/* Social Media Icons */}
          <Grid item xs={12} md={3} textAlign="center">
            <Box display="flex" justifyContent="center" 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",
                  fontFamily: "Helvetica, Arial, sans-serif",
                  "&:hover": { textDecoration: "underline" },
                }}
              >
                {text}
              </Link>
            ))}
          </Box>
          <Typography variant="body2" sx={{ mt: 2, color: "gray", fontFamily: "Helvetica, Arial, sans-serif" }}>
            © 2021 All Rights Reserved
          </Typography>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;
