import { Box, Typography, Button } from "@mui/material";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
import { motion, Variants, Transition } from "framer-motion";

const AboutUs = () => {
  // Type-safe animation variants
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.3,
        duration: 0.8,
      },
    },
  };

  const itemVariants: Variants = {
    hidden: { y: 30, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.8,
        ease: [0.16, 1, 0.3, 1], // Cubic bezier curve for easeOut
      },
    },
  };

  const titleVariants: Variants = {
    ...itemVariants,
    hover: {
      scale: 1.02,
      transition: {
        repeat: Infinity,
        repeatType: "reverse",
        duration: 1.5,
      } as Transition,
    },
  };

  const underlineVariants: Variants = {
    hidden: { width: 0 },
    visible: {
      width: "80px",
      transition: {
        delay: 0.5,
        duration: 0.8,
      },
    },
    hover: {
      width: "120px",
      backgroundColor: "#00e1ff",
    },
  };

  const buttonContainerVariants: Variants = {
    ...itemVariants,
    hover: {
      scale: 1.05,
      transition: {
        type: "spring",
        stiffness: 400,
      },
    },
  };

  return (
    <Box
      component={motion.div}
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, margin: "-100px" }}
      sx={{
        backgroundColor: "#1d2733",
        color: "#fff",
        py: { xs: 8, md: 12 },
        px: 3,
      }}
    >
      <Box
        component={motion.div}
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        viewport={{ once: true }}
        sx={{
          textAlign: "center",
          maxWidth: 800,
          mx: "auto",
        }}
      >
        {/* Title Section */}
        <Box
          component={motion.div}
          variants={titleVariants}
          whileHover="hover"
          sx={{ mb: 4 }}
        >
          <Typography
            variant="h2"
            sx={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 600,
              fontSize: { xs: "2.5rem", md: "3rem" },
              letterSpacing: "1px",
              position: "relative",
              textShadow: "0 0 8px rgba(0, 225, 255, 0.3)",
            }}
          >
            About Us
            <Box
              component={motion.div}
              variants={underlineVariants}
              initial="hidden"
              animate="visible"
              whileHover="hover"
              sx={{
                height: "3px",
                background: "linear-gradient(90deg, #00e1ff, transparent)",
                margin: "20px auto 0",
                borderRadius: "2px",
              }}
            />
          </Typography>
        </Box>

        {/* Content Section */}
        <Box component={motion.div} variants={itemVariants} sx={{ mb: 4 }}>
          <Typography
            paragraph
            sx={{
              fontFamily: "'Montserrat', sans-serif",
              fontSize: { xs: "1rem", md: "1.1rem" },
              lineHeight: 1.9,
              fontWeight: 300,
              color: "rgba(255,255,255,0.85)",
            }}
          >
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum
            repellendus aperiam, nobis debitis nam nemo dolorum! Suscipit
            voluptatibus eum tenetur accusantium eveniet iure, optio illum
            minima, quo mollitia vitae dolorem.
          </Typography>
        </Box>

        {/* Button Section */}
        <Box
          component={motion.div}
          variants={buttonContainerVariants}
          whileHover="hover"
        >
          <Button
            variant="outlined"
            endIcon={
              <motion.div
                animate={{ x: [0, 5, 0] }}
                transition={{
                  duration: 1.5,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
              >
                <ArrowOutwardIcon />
              </motion.div>
            }
            sx={{
              borderColor: "#00e1ff",
              color: "#00e1ff",
              borderRadius: "30px",
              fontWeight: 500,
              px: 3,
              py: 1.1,
              fontFamily: "'Montserrat', sans-serif",
              letterSpacing: "1px",
              fontSize: "0.9rem",
              textTransform: "uppercase",
              position: "relative",
              overflow: "hidden",
              "&:hover": {
                backgroundColor: "rgba(0, 225, 255, 0.1)",
                boxShadow: "0 0 15px rgba(0, 225, 255, 0.4)",
                "&::before": {
                  transform: "translateX(0)",
                },
              },
              "&::before": {
                content: '""',
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                background:
                  "linear-gradient(90deg, transparent, rgba(0, 225, 255, 0.2), transparent)",
                transform: "translateX(-100%)",
                transition: "transform 0.6s ease",
              },
            }}
          >
            GET IN TOUCH
          </Button>
        </Box>
      </Box>
    </Box>
  );
};

export default AboutUs;
