import React, { useEffect } from "react";
import {
  Box,
  Typography,
  Container,
  Grid,
  Divider,
  useTheme,
} from "@mui/material";
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";

// Team member interface
interface TeamMember {
  id: number;
  name: string;
  role: string;
  bio: string;
  image: string;
}

// Stats interface
interface StatItem {
  id: number;
  value: string;
  label: string;
}

// Fallback images from reliable sources
const FALLBACK_IMAGES = {
  heroBg:
    "https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80",
  aboutImg:
    "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80",
  team: [
    "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
    "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
  ],
};

const AboutUsPagesssssssss: React.FC = () => {
  const theme = useTheme();
  const controls = useAnimation();
  const [ref, inView] = useInView({ threshold: 0.1 });

  useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
  }, [controls, inView]);

  // Team data with fallback images
  const teamMembers: TeamMember[] = [
    {
      id: 1,
      name: "Alex Johnson",
      role: "CEO & Founder",
      bio: "Visionary leader with 15+ years of industry experience driving innovation and growth.",
      image: FALLBACK_IMAGES.team[0],
    },
    {
      id: 2,
      name: "Sarah Williams",
      role: "CTO",
      bio: "Tech enthusiast who transforms complex problems into elegant solutions.",
      image: FALLBACK_IMAGES.team[1],
    },
    {
      id: 3,
      name: "Michael Chen",
      role: "Lead Designer",
      bio: "Creativity meets functionality in every pixel Michael touches.",
      image: FALLBACK_IMAGES.team[2],
    },
    {
      id: 4,
      name: "Emily Rodriguez",
      role: "Marketing Director",
      bio: "Storyteller who connects brands with their perfect audiences.",
      image: FALLBACK_IMAGES.team[3],
    },
  ];

  // Stats data
  const stats: StatItem[] = [
    { id: 1, value: "10+", label: "Years Experience" },
    { id: 2, value: "200+", label: "Clients Worldwide" },
    { id: 3, value: "50+", label: "Awards Won" },
    { id: 4, value: "99%", label: "Client Satisfaction" },
  ];

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

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.6,
      },
    },
  };

  const fadeInVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        duration: 1,
      },
    },
  };

  const scaleVariants = {
    hidden: { scale: 0.9, opacity: 0 },
    visible: {
      scale: 1,
      opacity: 1,
      transition: {
        duration: 0.5,
      },
    },
  };

  return (
    <Box
      sx={{
        backgroundColor: "#ffffff",
        color: "#1a1a1a",
        "& .accent-brown": {
          color: "#8B4513", // Classic brown
        },
        "& .accent-yellow": {
          color: "#FFD700", // Gold yellow
        },
      }}
    >
      {/* Hero Section */}
      <Box
        sx={{
          height: "80vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          position: "relative",
          overflow: "hidden",
          bgcolor: "black",
          color: "white",
        }}
      >
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 0.7 }}
          transition={{ duration: 1.5 }}
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            background: "linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7))",
            zIndex: 1,
          }}
        />
        <motion.div
          initial={{ scale: 1.2 }}
          animate={{ scale: 1 }}
          transition={{ duration: 3 }}
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            backgroundImage: `url(${FALLBACK_IMAGES.heroBg})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <Container maxWidth="lg" sx={{ position: "relative", zIndex: 2 }}>
          <motion.div
            initial={{ y: -50, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.8 }}
          >
            <Typography
              variant="h1"
              component="h1"
              sx={{
                fontSize: { xs: "3rem", md: "4.5rem" },
                fontWeight: 700,
                textAlign: "center",
                mb: 2,
                textTransform: "uppercase",
                "& span": {
                  color: "#FFD700", // Yellow accent
                },
              }}
            >
              Our <span>Story</span>
            </Typography>
            <Typography
              variant="h5"
              component="p"
              sx={{
                maxWidth: "800px",
                mx: "auto",
                textAlign: "center",
                fontWeight: 300,
                letterSpacing: "1px",
              }}
            >
              Pioneering excellence since 2010. We blend innovation with passion
              to create extraordinary digital experiences.
            </Typography>
          </motion.div>
        </Container>
      </Box>

      {/* About Section */}
      <Container maxWidth="lg" sx={{ py: 10 }}>
        <Grid container spacing={6} alignItems="center">
          <Grid item xs={12} md={6}>
            <motion.div
              initial="hidden"
              animate="visible"
              variants={containerVariants}
            >
              <motion.div variants={itemVariants}>
                <Typography
                  variant="h3"
                  component="h2"
                  sx={{
                    fontWeight: 700,
                    mb: 3,
                    position: "relative",
                    "&:after": {
                      content: '""',
                      position: "absolute",
                      bottom: -10,
                      left: 0,
                      width: "80px",
                      height: "4px",
                      backgroundColor: "#8B4513", // Brown accent
                    },
                  }}
                >
                  Who We Are
                </Typography>
              </motion.div>
              <motion.div variants={itemVariants}>
                <Typography
                  variant="body1"
                  sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
                >
                  Founded in 2010, we are a passionate team of designers,
                  developers, and strategists dedicated to pushing the
                  boundaries of digital innovation. Our{" "}
                  <span className="accent-brown">black and white</span>
                  philosophy reflects our commitment to clarity, simplicity, and
                  timeless design.
                </Typography>
              </motion.div>
              <motion.div variants={itemVariants}>
                <Typography
                  variant="body1"
                  sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
                >
                  We believe in the power of contrast - where bold ideas meet
                  meticulous execution. Our{" "}
                  <span className="accent-yellow">monochromatic approach</span>{" "}
                  isn't just aesthetic; it's a metaphor for how we distill
                  complex problems into elegant solutions.
                </Typography>
              </motion.div>
            </motion.div>
          </Grid>
          <Grid item xs={12} md={6}>
            <motion.div
              initial={{ x: 100, opacity: 0 }}
              whileInView={{ x: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              style={{ overflow: "hidden", borderRadius: "8px" }}
            >
              <Box
                component="img"
                src={FALLBACK_IMAGES.aboutImg}
                alt="Our team"
                sx={{
                  width: "100%",
                  height: "auto",
                  objectFit: "cover",
                  filter: "grayscale(100%) contrast(120%)",
                  transition: "filter 0.5s ease",
                  "&:hover": {
                    filter: "grayscale(50%) contrast(110%) sepia(30%)",
                  },
                }}
                onError={(e) => {
                  const target = e.target as HTMLImageElement;
                  target.src = FALLBACK_IMAGES.aboutImg;
                }}
              />
            </motion.div>
          </Grid>
        </Grid>
      </Container>

      {/* Stats Section */}
      <Box
        sx={{
          py: 10,
          backgroundColor: "#f5f5f5",
          "& .stat-item": {
            borderRight: "1px solid #8B4513",
            "&:last-child": {
              borderRight: "none",
            },
            [theme.breakpoints.down("sm")]: {
              borderRight: "none",
              borderBottom: "1px solid #8B4513",
              paddingBottom: "20px",
              marginBottom: "20px",
              "&:last-child": {
                borderBottom: "none",
                marginBottom: 0,
                paddingBottom: 0,
              },
            },
          },
        }}
      >
        <Container maxWidth="lg">
          <motion.div
            ref={ref}
            initial="hidden"
            animate={controls}
            variants={containerVariants}
          >
            <Grid container spacing={4}>
              {stats.map((stat) => (
                <Grid item xs={6} sm={3} key={stat.id} className="stat-item">
                  <motion.div variants={itemVariants}>
                    <Box sx={{ textAlign: "center" }}>
                      <Typography
                        variant="h2"
                        component="div"
                        sx={{
                          fontWeight: 700,
                          mb: 1,
                          color: "#8B4513", // Brown
                          fontSize: { xs: "2.5rem", sm: "3rem" },
                        }}
                      >
                        {stat.value}
                      </Typography>
                      <Typography variant="h6" sx={{ fontWeight: 500 }}>
                        {stat.label}
                      </Typography>
                    </Box>
                  </motion.div>
                </Grid>
              ))}
            </Grid>
          </motion.div>
        </Container>
      </Box>

      {/* Team Section */}
      <Container maxWidth="lg" sx={{ py: 10 }}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          <Typography
            variant="h3"
            component="h2"
            sx={{
              fontWeight: 700,
              mb: 6,
              textAlign: "center",
              position: "relative",
              "&:after": {
                content: '""',
                position: "absolute",
                bottom: -10,
                left: "50%",
                transform: "translateX(-50%)",
                width: "80px",
                height: "4px",
                backgroundColor: "#8B4513", // Brown
              },
            }}
          >
            Meet The <span className="accent-yellow">Team</span>
          </Typography>
        </motion.div>

        <Grid container spacing={6}>
          {teamMembers.map((member, index) => (
            <Grid item xs={12} sm={6} md={3} key={member.id}>
              <motion.div
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                whileHover={{ y: -10 }}
                style={{ height: "100%" }}
              >
                <Box
                  sx={{
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    textAlign: "center",
                    p: 3,
                    borderRadius: "8px",
                    boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
                    transition: "all 0.3s ease",
                    backgroundColor: "#ffffff",
                    border: "1px solid #e0e0e0",
                    "&:hover": {
                      boxShadow: "0 8px 30px rgba(0,0,0,0.15)",
                      transform: "translateY(-5px)",
                    },
                  }}
                >
                  <Box
                    component="img"
                    src={member.image}
                    alt={member.name}
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      target.src = FALLBACK_IMAGES.team[index];
                    }}
                    sx={{
                      width: "150px",
                      height: "150px",
                      borderRadius: "50%",
                      objectFit: "cover",
                      mb: 3,
                      filter: "grayscale(100%)",
                      transition: "filter 0.5s ease",
                      border: "3px solid #8B4513",
                      "&:hover": {
                        filter: "grayscale(0%)",
                      },
                    }}
                  />
                  <Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
                    {member.name}
                  </Typography>
                  <Typography
                    variant="subtitle1"
                    sx={{
                      color: "#FFD700", // Yellow
                      mb: 2,
                      fontWeight: 500,
                    }}
                  >
                    {member.role}
                  </Typography>
                  <Typography variant="body2" sx={{ mb: 2, color: "#555555" }}>
                    {member.bio}
                  </Typography>
                </Box>
              </motion.div>
            </Grid>
          ))}
        </Grid>
      </Container>

      {/* Mission Section */}
      <Box
        sx={{
          py: 10,
          backgroundColor: "#1a1a1a",
          color: "#ffffff",
        }}
      >
        <Container maxWidth="lg">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={containerVariants}
          >
            <motion.div variants={itemVariants}>
              <Typography
                variant="h3"
                component="h2"
                sx={{
                  fontWeight: 700,
                  mb: 6,
                  textAlign: "center",
                  position: "relative",
                  "&:after": {
                    content: '""',
                    position: "absolute",
                    bottom: -10,
                    left: "50%",
                    transform: "translateX(-50%)",
                    width: "80px",
                    height: "4px",
                    backgroundColor: "#FFD700", // Yellow
                  },
                }}
              >
                Our <span className="accent-yellow">Mission</span>
              </Typography>
            </motion.div>
            <Grid container spacing={6}>
              <Grid item xs={12} md={6}>
                <motion.div variants={fadeInVariants}>
                  <Box
                    sx={{
                      p: 4,
                      borderLeft: `4px solid #FFD700`,
                      backgroundColor: "#2a2a2a",
                      boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
                      height: "100%",
                    }}
                  >
                    <Typography
                      variant="h5"
                      sx={{ fontWeight: 600, mb: 2, color: "#FFD700" }}
                    >
                      Vision
                    </Typography>
                    <Typography variant="body1" sx={{ lineHeight: 1.8 }}>
                      To redefine digital experiences through innovative
                      solutions that stand the test of time. We envision a world
                      where technology enhances human connection without
                      unnecessary complexity.
                    </Typography>
                  </Box>
                </motion.div>
              </Grid>
              <Grid item xs={12} md={6}>
                <motion.div variants={fadeInVariants}>
                  <Box
                    sx={{
                      p: 4,
                      borderLeft: `4px solid #8B4513`,
                      backgroundColor: "#2a2a2a",
                      boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
                      height: "100%",
                    }}
                  >
                    <Typography
                      variant="h5"
                      sx={{ fontWeight: 600, mb: 2, color: "#8B4513" }}
                    >
                      Values
                    </Typography>
                    <Typography variant="body1" sx={{ lineHeight: 1.8 }}>
                      Integrity, innovation, and impact guide everything we do.
                      We believe in transparency, pushing boundaries, and
                      creating work that makes a meaningful difference in
                      people's lives.
                    </Typography>
                  </Box>
                </motion.div>
              </Grid>
            </Grid>
          </motion.div>
        </Container>
      </Box>

      {/* CTA Section */}
      <Container maxWidth="lg" sx={{ py: 10 }}>
        <motion.div
          initial={{ scale: 0.95, opacity: 0 }}
          whileInView={{ scale: 1, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <Box
            sx={{
              p: 6,
              borderRadius: "8px",
              background: "linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)",
              color: "white",
              textAlign: "center",
              border: "1px solid #8B4513",
              boxShadow: "0 8px 30px rgba(139, 69, 19, 0.3)",
            }}
          >
            <Typography variant="h3" sx={{ fontWeight: 700, mb: 3 }}>
              Ready to work with us?
            </Typography>
            <Typography
              variant="h6"
              sx={{ mb: 4, maxWidth: "700px", mx: "auto" }}
            >
              Let's create something extraordinary together. Our team is ready
              to bring your vision to life with our signature{" "}
              <span className="accent-yellow">black and white</span> approach.
            </Typography>
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Box
                component="button"
                sx={{
                  px: 6,
                  py: 2,
                  fontSize: "1rem",
                  fontWeight: 600,
                  backgroundColor: "#FFD700",
                  color: "#1a1a1a",
                  border: "none",
                  borderRadius: "4px",
                  cursor: "pointer",
                  transition: "all 0.3s ease",
                  "&:hover": {
                    backgroundColor: "#ffffff",
                    color: "#1a1a1a",
                  },
                }}
              >
                Get in Touch
              </Box>
            </motion.div>
          </Box>
        </motion.div>
      </Container>
    </Box>
  );
};

export default AboutUsPagesssssssss;
