import React from "react";
import {
  Box,
  Container,
  Grid,
  Typography,
  Link,
  Divider,
  Stack,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { Instagram, YouTube, Facebook, LinkedIn } from "@mui/icons-material";
import { motion, Variants } from "framer-motion";

export default function Footer() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));

  // Animation variants
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        when: "beforeChildren",
      },
    },
  };

  const itemVariants: Variants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
    hover: {
      scale: 1.05,
      color: "#00E0FF",
      transition: { duration: 0.2 },
    },
  };

  const socialIconVariants: Variants = {
    hidden: { scale: 0 },
    visible: {
      scale: 1,
      transition: {
        type: "spring",
        stiffness: 500,
        damping: 15,
      },
    },
    hover: {
      scale: 1.2,
      transition: { duration: 0.2 },
    },
  };

  return (
    <Box
      component="footer"
      sx={{
        backgroundColor: "#0F111A",
        color: "#fff",
        pt: 8,
        pb: 4,
        overflow: "hidden",
      }}
    >
      <Container maxWidth="lg">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          variants={containerVariants}
        >
          <Grid container spacing={isMobile ? 3 : 4}>
            {/* Column 1: Explore Links */}
            <Grid item xs={12} sm={6} md={3}>
              <Typography
                component={motion.div}
                variants={itemVariants}
                variant="h6"
                fontWeight={600}
                gutterBottom
                sx={{ color: "#00E0FF" }}
              >
                Explore
              </Typography>
              <Stack spacing={1}>
                {["About Us", "Portfolio", "Blogs", "Services"].map((item) => (
                  <Link
                    key={item}
                    component={motion.a}
                    variants={itemVariants}
                    whileHover="hover"
                    href="#"
                    color="inherit"
                    underline="hover"
                    sx={{
                      display: "inline-block",
                      transition: "color 0.2s ease",
                    }}
                  >
                    {item}
                  </Link>
                ))}
              </Stack>
            </Grid>

            {/* Column 2: Support Links */}
            <Grid item xs={12} sm={6} md={3}>
              <Typography
                component={motion.div}
                variants={itemVariants}
                variant="h6"
                fontWeight={600}
                gutterBottom
                sx={{ color: "#00E0FF" }}
              >
                Support
              </Typography>
              <Stack spacing={1}>
                {["FAQ’s", "Terms & Conditions", "Privacy Policy"].map(
                  (item) => (
                    <Link
                      key={item}
                      component={motion.a}
                      variants={itemVariants}
                      whileHover="hover"
                      href="#"
                      color="inherit"
                      underline="hover"
                      sx={{
                        display: "inline-block",
                        transition: "color 0.2s ease",
                      }}
                    >
                      {item}
                    </Link>
                  )
                )}
              </Stack>
            </Grid>

            {/* Column 3: Logo */}
            <Grid item xs={12} sm={6} md={3}>
              <Box
                component={motion.div}
                variants={itemVariants}
                sx={{
                  display: "flex",
                  justifyContent: isMobile
                    ? "flex-start"
                    : isTablet
                    ? "center"
                    : "flex-end",
                  mb: 2,
                  height: "100%",
                  alignItems: isMobile ? "flex-start" : "center",
                }}
              >
                <motion.img
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  transition={{
                    type: "spring",
                    stiffness: 300,
                    damping: 15,
                    delay: 0.2,
                  }}
                  src="/logo.png"
                  alt="Quadra Edge"
                  style={{
                    maxWidth: isMobile ? "140px" : "180px",
                    height: "auto",
                    filter: "drop-shadow(0 0 8px rgba(0, 224, 255, 0.4))",
                  }}
                />
              </Box>
            </Grid>

            {/* Column 4: Contact Info + Socials */}
            <Grid item xs={12} sm={6} md={3}>
              <Typography
                component={motion.div}
                variants={itemVariants}
                variant="h6"
                fontWeight={600}
                gutterBottom
                sx={{ color: "#00E0FF" }}
              >
                Contact Us
              </Typography>

              <Typography
                component={motion.div}
                variants={itemVariants}
                variant="body2"
                mb={1}
              >
                +1 (123) 456-7890
              </Typography>

              <Typography
                component={motion.div}
                variants={itemVariants}
                variant="body2"
              >
                123 Business Ave, Suite 100
                <br />
                New York, NY 10001
              </Typography>

              <Stack
                direction="row"
                spacing={2}
                sx={{ mt: 3 }}
                component={motion.div}
                variants={containerVariants}
              >
                {[
                  { icon: <Instagram />, name: "Instagram" },
                  { icon: <YouTube />, name: "YouTube" },
                  { icon: <Facebook />, name: "Facebook" },
                  { icon: <LinkedIn />, name: "LinkedIn" },
                ].map((social, index) => (
                  <Link
                    key={social.name}
                    component={motion.a}
                    variants={socialIconVariants}
                    whileHover="hover"
                    href="#"
                    sx={{
                      color: "#00E0FF",
                      display: "flex",
                      alignItems: "center",
                    }}
                    aria-label={social.name}
                  >
                    {React.cloneElement(social.icon, {
                      sx: {
                        fontSize: isMobile ? "1.8rem" : "2rem",
                        transition: "transform 0.2s ease",
                      },
                    })}
                  </Link>
                ))}
              </Stack>
            </Grid>
          </Grid>

          <Divider
            component={motion.hr}
            initial={{ scaleX: 0 }}
            whileInView={{ scaleX: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.2 }}
            sx={{
              my: 4,
              borderColor: "#00E0FF",
              borderBottomWidth: 2,
              opacity: 0.6,
            }}
          />

          <Box
            component={motion.div}
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.4 }}
            textAlign="center"
          >
            <Typography
              variant="body2"
              sx={{
                color: "#00E0FF",
                fontSize: isMobile ? "0.8rem" : "0.9rem",
                letterSpacing: "0.5px",
              }}
            >
              Copyright © {new Date().getFullYear()} QuadraEdge. All rights
              reserved.
            </Typography>
          </Box>
        </motion.div>
      </Container>
    </Box>
  );
}
