import React from "react";
import {
  Box,
  Typography,
  Button,
  Grid,
  Container,
  Stack,
  Avatar,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { motion, Variants } from "framer-motion";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";

const AboutUsPageTwo = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  // Placeholder image URLs (replace with your actual images later)
  const images = {
    hero: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
    team1: "https://randomuser.me/api/portraits/women/44.jpg",
    team2: "https://randomuser.me/api/portraits/men/32.jpg",
    team3: "https://randomuser.me/api/portraits/women/68.jpg",
    office:
      "https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80",
    values:
      "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
  };

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

  const fadeUpVariants: Variants = {
    hidden: { y: 50, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.8,
        ease: "easeOut",
      },
    },
  };

  const leftSlideVariants: Variants = {
    hidden: { x: -100, opacity: 0 },
    visible: {
      x: 0,
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 100,
        damping: 20,
        duration: 0.8,
      },
    },
  };

  const rightSlideVariants: Variants = {
    hidden: { x: 100, opacity: 0 },
    visible: {
      x: 0,
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 100,
        damping: 20,
        duration: 0.8,
      },
    },
  };

  const scaleUpVariants: Variants = {
    hidden: { scale: 0.8, opacity: 0 },
    visible: {
      scale: 1,
      opacity: 1,
      transition: {
        duration: 0.6,
        ease: "easeOut",
      },
    },
  };

  const teamMembers = [
    {
      name: "Alex Johnson",
      role: "CEO & Founder",
      image: images.team1,
      bio: "Visionary leader with 15+ years in digital transformation.",
    },
    {
      name: "Maria Garcia",
      role: "Creative Director",
      image: images.team2,
      bio: "Design expert passionate about user-centered experiences.",
    },
    {
      name: "James Wilson",
      role: "CTO",
      image: images.team3,
      bio: "Tech innovator specializing in scalable architectures.",
    },
  ];

  const milestones = [
    {
      year: "2012",
      event: "Company Founded",
      description: "Started with a small team of 5 people",
    },
    {
      year: "2015",
      event: "First Major Client",
      description: "Landed Fortune 500 company as client",
    },
    {
      year: "2018",
      event: "Expanded Globally",
      description: "Opened offices in 3 countries",
    },
    {
      year: "2022",
      event: "Award Winning",
      description: "Recognized as Top Innovators",
    },
  ];

  return (
    <Box sx={{ backgroundColor: "#0F111A", color: "#fff" }}>
      {/* Hero Section */}
      <Box
        sx={{
          pt: { xs: 8, md: 12 },
          pb: { xs: 6, md: 10 },
          position: "relative",
          overflow: "hidden",
        }}
      >
        <Container maxWidth="lg">
          <Grid container spacing={6} alignItems="center">
            <Grid item xs={12} md={6}>
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, margin: "-100px" }}
                variants={containerVariants}
              >
                <Typography
                  component={motion.div}
                  variants={fadeUpVariants}
                  variant="h1"
                  sx={{
                    fontFamily: "'Cormorant Garamond', serif",
                    fontWeight: 700,
                    fontSize: { xs: "2.5rem", md: "3.5rem" },
                    lineHeight: 1.2,
                    mb: 3,
                  }}
                >
                  Crafting Digital Excellence Since 2012
                </Typography>
                <Typography
                  component={motion.div}
                  variants={leftSlideVariants}
                  sx={{
                    fontFamily: "'Montserrat', sans-serif",
                    fontSize: { xs: "1rem", md: "1.1rem" },
                    lineHeight: 1.8,
                    mb: 4,
                    color: "rgba(255,255,255,0.85)",
                  }}
                >
                  We're a passionate team of designers, developers, and
                  strategists dedicated to creating digital experiences that
                  matter.
                </Typography>
                <Button
                  component={motion.a}
                  variants={fadeUpVariants}
                  whileHover={{
                    scale: 1.05,
                    boxShadow: "0 0 20px rgba(0, 224, 255, 0.4)",
                  }}
                  href="#our-team"
                  variant="outlined"
                  endIcon={<ArrowOutwardIcon />}
                  sx={{
                    borderColor: "#00E0FF",
                    color: "#00E0FF",
                    borderRadius: "30px",
                    fontWeight: 600,
                    px: 4,
                    py: 1.5,
                    "&:hover": {
                      backgroundColor: "rgba(0, 224, 255, 0.1)",
                    },
                  }}
                >
                  Meet Our Team
                </Button>
              </motion.div>
            </Grid>
            <Grid item xs={12} md={6}>
              <Box
                component={motion.div}
                initial={{ scale: 0.9, opacity: 0 }}
                whileInView={{ scale: 1, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
                sx={{
                  borderRadius: "16px",
                  overflow: "hidden",
                  boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
                  position: "relative",
                  "&:before": {
                    content: '""',
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%",
                    background:
                      "linear-gradient(135deg, rgba(0, 224, 255, 0.2) 0%, rgba(15, 17, 26, 0.5) 100%)",
                    zIndex: 1,
                  },
                }}
              >
                <Box
                  component="img"
                  src={images.hero}
                  alt="Our team collaborating"
                  sx={{
                    width: "100%",
                    height: { xs: "300px", md: "500px" },
                    objectFit: "cover",
                  }}
                />
              </Box>
            </Grid>
          </Grid>
        </Container>
      </Box>

      {/* Values Section */}
      <Box
        sx={{
          py: { xs: 8, md: 10 },
          backgroundColor: "rgba(0, 224, 255, 0.03)",
        }}
      >
        <Container maxWidth="lg">
          <Typography
            component={motion.div}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            variant="h2"
            sx={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 700,
              fontSize: { xs: "2rem", md: "2.5rem" },
              textAlign: "center",
              mb: 6,
              "&:after": {
                content: '""',
                display: "block",
                width: "80px",
                height: "4px",
                background: "#00E0FF",
                margin: "20px auto",
                borderRadius: "2px",
              },
            }}
          >
            Our Core Values
          </Typography>
          <Grid container spacing={4}>
            {[
              {
                title: "Innovation",
                description:
                  "We push boundaries to deliver cutting-edge solutions.",
              },
              {
                title: "Integrity",
                description: "Honest and transparent in all our dealings.",
              },
              {
                title: "Excellence",
                description: "Committed to the highest quality standards.",
              },
              {
                title: "Collaboration",
                description: "We believe great things happen together.",
              },
            ].map((value, index) => (
              <Grid item xs={12} sm={6} md={3} key={index}>
                <Box
                  component={motion.div}
                  initial={{ opacity: 0, y: 50 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  sx={{
                    backgroundColor: "#0F111A",
                    borderRadius: "8px",
                    p: 4,
                    height: "100%",
                    border: "1px solid rgba(0, 224, 255, 0.1)",
                    boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
                    transition: "all 0.3s ease",
                    "&:hover": {
                      transform: "translateY(-5px)",
                      boxShadow: "0 12px 24px rgba(0, 224, 255, 0.1)",
                      borderColor: "rgba(0, 224, 255, 0.3)",
                    },
                  }}
                >
                  <Typography
                    variant="h4"
                    sx={{
                      color: "#00E0FF",
                      mb: 2,
                      fontFamily: "'Cormorant Garamond', serif",
                    }}
                  >
                    {value.title}
                  </Typography>
                  <Typography
                    variant="body1"
                    sx={{ color: "rgba(255,255,255,0.8)" }}
                  >
                    {value.description}
                  </Typography>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Box>

      {/* Team Section */}
      <Box id="our-team" sx={{ py: { xs: 8, md: 10 } }}>
        <Container maxWidth="lg">
          <Typography
            component={motion.div}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            variant="h2"
            sx={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 700,
              fontSize: { xs: "2rem", md: "2.5rem" },
              textAlign: "center",
              mb: 6,
              "&:after": {
                content: '""',
                display: "block",
                width: "80px",
                height: "4px",
                background: "#00E0FF",
                margin: "20px auto",
                borderRadius: "2px",
              },
            }}
          >
            Meet The Team
          </Typography>
          <Grid container spacing={4} justifyContent="center">
            {teamMembers.map((member, index) => (
              <Grid item xs={12} sm={6} md={4} key={index}>
                <Box
                  component={motion.div}
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  sx={{
                    textAlign: "center",
                    "&:hover .team-image": {
                      transform: "scale(1.05)",
                      boxShadow: "0 0 30px rgba(0, 224, 255, 0.4)",
                    },
                  }}
                >
                  <Avatar
                    src={member.image}
                    alt={member.name}
                    className="team-image"
                    sx={{
                      width: 200,
                      height: 200,
                      mx: "auto",
                      mb: 3,
                      border: "3px solid #00E0FF",
                      transition: "all 0.3s ease",
                    }}
                  />
                  <Typography variant="h5" sx={{ color: "#00E0FF", mb: 1 }}>
                    {member.name}
                  </Typography>
                  <Typography
                    variant="subtitle1"
                    sx={{ color: "rgba(255,255,255,0.7)", mb: 2 }}
                  >
                    {member.role}
                  </Typography>
                  <Typography
                    variant="body1"
                    sx={{ color: "rgba(255,255,255,0.8)" }}
                  >
                    {member.bio}
                  </Typography>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Box>

      {/* Milestones Section */}
      <Box
        sx={{
          py: { xs: 8, md: 10 },
          backgroundColor: "rgba(0, 224, 255, 0.03)",
        }}
      >
        <Container maxWidth="lg">
          <Typography
            component={motion.div}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            variant="h2"
            sx={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 700,
              fontSize: { xs: "2rem", md: "2.5rem" },
              textAlign: "center",
              mb: 6,
              "&:after": {
                content: '""',
                display: "block",
                width: "80px",
                height: "4px",
                background: "#00E0FF",
                margin: "20px auto",
                borderRadius: "2px",
              },
            }}
          >
            Our Journey
          </Typography>
          <Box
            component={motion.div}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={containerVariants}
            sx={{
              position: "relative",
              "&:before": {
                content: '""',
                position: "absolute",
                top: 0,
                left: "50%",
                transform: "translateX(-50%)",
                width: "2px",
                height: "100%",
                background: "linear-gradient(to bottom, #00E0FF, transparent)",
                [theme.breakpoints.down("sm")]: {
                  left: "30px",
                },
              },
            }}
          >
            {milestones.map((milestone, index) => (
              <Box
                key={index}
                component={motion.div}
                variants={
                  index % 2 === 0 ? leftSlideVariants : rightSlideVariants
                }
                sx={{
                  display: "flex",
                  justifyContent: {
                    xs: "flex-start",
                    sm: index % 2 === 0 ? "flex-start" : "flex-end",
                  },
                  mb: 6,
                  position: "relative",
                  pl: { xs: "60px", sm: 0 },
                  pr: { sm: index % 2 === 0 ? 0 : "60px" },
                }}
              >
                <Box
                  sx={{
                    width: { xs: "100%", sm: "45%" },
                    backgroundColor: "#0F111A",
                    borderRadius: "8px",
                    p: 4,
                    border: "1px solid rgba(0, 224, 255, 0.1)",
                    boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
                    position: "relative",
                    "&:before": {
                      content: '""',
                      position: "absolute",
                      top: "30px",
                      left: {
                        xs: "-10px",
                        sm: index % 2 === 0 ? "-10px" : "auto",
                      },
                      right: { sm: index % 2 === 0 ? "auto" : "-10px" },
                      width: "20px",
                      height: "20px",
                      borderRadius: "50%",
                      backgroundColor: "#00E0FF",
                      [theme.breakpoints.down("sm")]: {
                        left: "20px",
                      },
                    },
                  }}
                >
                  <Typography variant="h4" sx={{ color: "#00E0FF", mb: 1 }}>
                    {milestone.year}
                  </Typography>
                  <Typography variant="h5" sx={{ mb: 1 }}>
                    {milestone.event}
                  </Typography>
                  <Typography
                    variant="body1"
                    sx={{ color: "rgba(255,255,255,0.8)" }}
                  >
                    {milestone.description}
                  </Typography>
                </Box>
              </Box>
            ))}
          </Box>
        </Container>
      </Box>

      {/* Office Tour Section */}
      <Box sx={{ py: { xs: 8, md: 10 } }}>
        <Container maxWidth="lg">
          <Typography
            component={motion.div}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            variant="h2"
            sx={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 700,
              fontSize: { xs: "2rem", md: "2.5rem" },
              textAlign: "center",
              mb: 6,
              "&:after": {
                content: '""',
                display: "block",
                width: "80px",
                height: "4px",
                background: "#00E0FF",
                margin: "20px auto",
                borderRadius: "2px",
              },
            }}
          >
            Our Workspace
          </Typography>
          <Box
            component={motion.div}
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            sx={{
              borderRadius: "16px",
              overflow: "hidden",
              boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
              position: "relative",
              height: { xs: "300px", md: "500px" },
              "&:before": {
                content: '""',
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                background:
                  "linear-gradient(135deg, rgba(0, 224, 255, 0.1) 0%, rgba(15, 17, 26, 0.3) 100%)",
                zIndex: 1,
              },
            }}
          >
            <Box
              component="img"
              src={images.office}
              alt="Our office space"
              sx={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
              }}
            />
            <Box
              component={motion.div}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.4 }}
              sx={{
                position: "absolute",
                bottom: 0,
                left: 0,
                width: "100%",
                backgroundColor: "rgba(0, 224, 255, 0.8)",
                color: "#0F111A",
                p: 3,
                zIndex: 2,
                textAlign: "center",
              }}
            >
              <Typography variant="h5" sx={{ fontWeight: 700 }}>
                Where Creativity Happens
              </Typography>
              <Typography variant="body1">
                Our inspiring workspace designed for collaboration and
                innovation
              </Typography>
            </Box>
          </Box>
        </Container>
      </Box>

      {/* CTA Section */}
      <Box sx={{ py: { xs: 8, md: 10 } }}>
        <Container maxWidth="md">
          <Box
            component={motion.div}
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            sx={{
              backgroundColor: "rgba(0, 224, 255, 0.1)",
              borderRadius: "16px",
              p: { xs: 4, md: 6 },
              textAlign: "center",
              border: "1px solid rgba(0, 224, 255, 0.2)",
              boxShadow: "0 8px 32px rgba(0, 224, 255, 0.1)",
            }}
          >
            <Typography
              variant="h3"
              sx={{
                fontFamily: "'Cormorant Garamond', serif",
                fontWeight: 700,
                fontSize: { xs: "2rem", md: "2.5rem" },
                mb: 3,
              }}
            >
              Ready to Start Your Project?
            </Typography>
            <Typography
              variant="body1"
              sx={{
                fontSize: { xs: "1rem", md: "1.1rem" },
                mb: 4,
                color: "rgba(255,255,255,0.85)",
              }}
            >
              Let's create something amazing together. Get in touch with our
              team today.
            </Typography>
            <Button
              component={motion.a}
              whileHover={{
                scale: 1.05,
                boxShadow: "0 0 30px rgba(0, 224, 255, 0.5)",
              }}
              whileTap={{ scale: 0.95 }}
              href="/contact"
              variant="contained"
              endIcon={<ArrowOutwardIcon />}
              sx={{
                backgroundColor: "#00E0FF",
                color: "#0F111A",
                borderRadius: "30px",
                fontWeight: 600,
                px: 4,
                py: 1.5,
                fontSize: "1rem",
                "&:hover": {
                  backgroundColor: "#00c7e6",
                },
              }}
            >
              Contact Us
            </Button>
          </Box>
        </Container>
      </Box>
    </Box>
  );
};

export default AboutUsPageTwo;
