import React from "react";
import {
  Box,
  Container,
  Grid,
  Typography,
  Divider,
  Link as MuiLink,
  useTheme,
} from "@mui/material";
import { Link } from "react-router-dom";
import FacebookIcon from "@mui/icons-material/Facebook";
import TwitterIcon from "@mui/icons-material/Twitter";
import InstagramIcon from "@mui/icons-material/Instagram";
import PinterestIcon from "@mui/icons-material/Pinterest";

interface FooterLink {
  text: string;
  to: string;
}

const Footer: React.FC = () => {
  const theme = useTheme();

  const shopLinks: FooterLink[] = [
    { text: "Chairs", to: "/products/chairs" },
    { text: "Sofas", to: "/products/sofas" },
    { text: "Tables", to: "/products/tables" },
    { text: "Accessories", to: "/products/accessories" },
  ];

  const helpLinks: FooterLink[] = [
    { text: "Contact Us", to: "/contact" },
    { text: "Shipping Info", to: "/shipping" },
    { text: "Returns", to: "/returns" },
    { text: "FAQ", to: "/faq" },
  ];

  const companyLinks: FooterLink[] = [
    { text: "About Us", to: "/about" },
    { text: "Blog", to: "/blog" },
    { text: "Careers", to: "/careers" },
    { text: "Press", to: "/press" },
  ];

  const policyLinks: FooterLink[] = [
    { text: "Privacy Policy", to: "/privacy" },
    { text: "Terms of Service", to: "/terms" },
    { text: "Cookie Policy", to: "/cookies" },
  ];

  return (
    <Box
      component="footer"
      sx={{
        backgroundColor: theme.palette.background.paper,
        color: theme.palette.text.secondary,
        pt: 8,
        pb: 4,
        borderTop: `1px solid ${theme.palette.divider}`,
      }}
    >
      <Container maxWidth="lg">
        <Grid container spacing={6}>
          {/* About Column */}
          <Grid item xs={12} md={4}>
            <Typography
              variant="h6"
              sx={{ mb: 3, fontWeight: 700, color: theme.palette.text.primary }}
            >
              Comfort Haven
            </Typography>
            <Typography variant="body1" sx={{ mb: 3, lineHeight: 1.7 }}>
              Bringing you premium furniture that combines style, comfort, and
              functionality since 2010.
            </Typography>
            <Box sx={{ display: "flex", gap: 2 }}>
              <MuiLink
                href="#"
                sx={{
                  color: "inherit",
                  "&:hover": { color: "#FF6D00" },
                }}
              >
                <FacebookIcon />
              </MuiLink>
              <MuiLink
                href="#"
                sx={{
                  color: "inherit",
                  "&:hover": { color: "#FF6D00" },
                }}
              >
                <TwitterIcon />
              </MuiLink>
              <MuiLink
                href="#"
                sx={{
                  color: "inherit",
                  "&:hover": { color: "#FF6D00" },
                }}
              >
                <InstagramIcon />
              </MuiLink>
              <MuiLink
                href="#"
                sx={{
                  color: "inherit",
                  "&:hover": { color: "#FF6D00" },
                }}
              >
                <PinterestIcon />
              </MuiLink>
            </Box>
          </Grid>

          {/* Quick Links Column */}
          <Grid item xs={6} md={2}>
            <Typography
              variant="h6"
              sx={{ mb: 3, fontWeight: 700, color: theme.palette.text.primary }}
            >
              Shop
            </Typography>
            <Box component="ul" sx={{ listStyle: "none", p: 0, m: 0 }}>
              {shopLinks.map((link) => (
                <li key={link.to}>
                  <MuiLink
                    component={Link}
                    to={link.to}
                    sx={{
                      display: "block",
                      mb: 1.5,
                      color: "inherit",
                      textDecoration: "none",
                      "&:hover": { color: "#FF6D00" },
                    }}
                  >
                    {link.text}
                  </MuiLink>
                </li>
              ))}
            </Box>
          </Grid>

          {/* Customer Service Column */}
          <Grid item xs={6} md={2}>
            <Typography
              variant="h6"
              sx={{ mb: 3, fontWeight: 700, color: theme.palette.text.primary }}
            >
              Help
            </Typography>
            <Box component="ul" sx={{ listStyle: "none", p: 0, m: 0 }}>
              {helpLinks.map((link) => (
                <li key={link.to}>
                  <MuiLink
                    component={Link}
                    to={link.to}
                    sx={{
                      display: "block",
                      mb: 1.5,
                      color: "inherit",
                      textDecoration: "none",
                      "&:hover": { color: "#FF6D00" },
                    }}
                  >
                    {link.text}
                  </MuiLink>
                </li>
              ))}
            </Box>
          </Grid>

          {/* Company Column */}
          <Grid item xs={12} md={4}>
            <Typography
              variant="h6"
              sx={{ mb: 3, fontWeight: 700, color: theme.palette.text.primary }}
            >
              Company
            </Typography>
            <Box component="ul" sx={{ listStyle: "none", p: 0, m: 0 }}>
              {companyLinks.map((link) => (
                <li key={link.to}>
                  <MuiLink
                    component={Link}
                    to={link.to}
                    sx={{
                      display: "block",
                      mb: 1.5,
                      color: "inherit",
                      textDecoration: "none",
                      "&:hover": { color: "#FF6D00" },
                    }}
                  >
                    {link.text}
                  </MuiLink>
                </li>
              ))}
            </Box>

            {/* Newsletter */}
            <Box sx={{ mt: 4 }}>
              <Typography variant="body1" fontWeight={600} sx={{ mb: 2 }}>
                Subscribe to our newsletter
              </Typography>
              <Box component="form" sx={{ display: "flex" }}>
                <input
                  type="email"
                  placeholder="Your email"
                  style={{
                    flexGrow: 1,
                    padding: "10px 16px",
                    border: "1px solid #ddd",
                    borderRadius: "8px 0 0 8px",
                    fontSize: "1rem",
                    outline: "none",
                  }}
                />
                <button
                  type="submit"
                  style={{
                    backgroundColor: "#FF6D00",
                    color: "#fff",
                    border: "none",
                    borderRadius: "0 8px 8px 0",
                    padding: "0 16px",
                    cursor: "pointer",
                    fontWeight: 600,
                    transition: "background-color 0.3s",
                  }}
                  onMouseOver={(e) =>
                    (e.currentTarget.style.backgroundColor = "#FF5722")
                  }
                  onMouseOut={(e) =>
                    (e.currentTarget.style.backgroundColor = "#FF6D00")
                  }
                >
                  Join
                </button>
              </Box>
            </Box>
          </Grid>
        </Grid>

        <Divider sx={{ my: 4 }} />

        {/* Bottom Footer */}
        <Box
          sx={{
            display: "flex",
            flexDirection: { xs: "column", sm: "row" },
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Typography variant="body2">
            © {new Date().getFullYear()} Comfort Haven. All rights reserved.
          </Typography>
          <Box sx={{ display: "flex", gap: 3, mt: { xs: 2, sm: 0 } }}>
            {policyLinks.map((link) => (
              <MuiLink
                key={link.to}
                component={Link}
                to={link.to}
                sx={{
                  color: "inherit",
                  textDecoration: "none",
                  "&:hover": { color: "#FF6D00" },
                }}
              >
                {link.text}
              </MuiLink>
            ))}
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;
