import React, { useState } from "react";
import {
    Grid,
    Typography,
    Card,
    CardContent,
    CardMedia,
    Divider,
    IconButton,
    Box,
} from "@mui/material";
import { motion } from "framer-motion";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";

import robert from "../components/imageandgif/robert.png";
import RamanaReddy from "../components/imageandgif/RamanaReddy.png";
import MukeshLamba from "../components/imageandgif/MukeshLamba.png";
import RamaKrishnan from "../components/imageandgif/RamaKrishnan.png";
import KartikReddy from "../components/imageandgif/KartikReddy.png";
import Suresh from "../components/imageandgif/Suresh.png";
import Palani from "../components/imageandgif/Palani.png";
interface TeamMember {
    name: string;
    role: string;
    image: string;
}

const teamMembers: TeamMember[] = [
    { name: "Ramana Reddy", role: "Software Engineer", image: RamanaReddy },
    { name: "Mukesh Lamba", role: "UI/UX Designer", image: MukeshLamba },
    { name: "Rama Krishnan", role: "Project Manager", image: RamaKrishnan },
    { name: "Kartik Reddy", role: "Marketing Lead", image: KartikReddy },
    { name: "Suresh", role: "Backend Developer", image: Suresh },
    { name: "Palani", role: "Data Analyst", image: Palani },
];

const OurTeam: React.FC = () => {
    const [showTeam, setShowTeam] = useState(false);

    return (
        <Grid
            container
            direction="column"
            justifyContent="center"
            alignItems="center"
            sx={{
                minHeight: showTeam ? "100vh" : "auto",
                background: "white",
                textAlign: "center",
                padding: "40px 20px",
            }}
        >
            {/* Title with Expand Icon */}
            <Box
                display="flex"
                alignItems="center"
                gap={1}
                sx={{ cursor: "pointer", marginBottom: 10 }}
                onClick={() => setShowTeam(!showTeam)}
            >
                <Typography variant="h4" sx={{ fontWeight: "bold"  , color:'#333333'}}>
                    Our Team
                </Typography>

                <IconButton sx={{ color: "black" }}>
                    {showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                </IconButton>
            </Box>
            <Typography variant="body2" sx={{color:'#4D4D4D'}}>For over a decade, our team members have been actively involved in institutional reuse and recycling across various organizations and projects in India. We take pride in our leadership, strong industry relationships, regulatory expertise, process efficiency, and technical proficiency.</Typography>
            {/* Expanding Team Section */}
            <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
                transition={{ duration: 0.5, ease: "easeInOut" }}
                style={{ overflow: "hidden", width: "100%" }}
            >
                <Grid
                    container
                    columnSpacing={1} 
                    rowSpacing={3}     
                    justifyContent="center"
                    sx={{ marginTop: "20px" }}
                >
                    {teamMembers.map((member, index) => (
                        <Grid item xs={12} sm={6} md={4} key={index}>
                            <Card
                                sx={{
                                    boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
                                    borderRadius: "8px",
                                    textAlign: "center",
                                    transition: "transform 0.3s",
                                    "&:hover": { transform: "translateY(-5px)" },
                                    backgroundColor: "white",
                                    maxWidth: "200px",
                                    margin: "0 auto",
                                    position: "relative",
                                    "&::before, &::after": {
                                        content: '""',
                                        position: "absolute",
                                        width: "10px",
                                        height: "10px",
                                        border: "2px solid black",
                                    },
                                    "&::before": {
                                        top: 0,
                                        left: 0,
                                        borderRight: "none",
                                        borderBottom: "none",
                                    },
                                    "&::after": {
                                        top: 0,
                                        right: 0,
                                        borderLeft: "none",
                                        borderBottom: "none",
                                    },
                                    "& .bottom-left": {
                                        content: '""',
                                        position: "absolute",
                                        bottom: 0,
                                        left: 0,
                                        width: "10px",
                                        height: "10px",
                                        border: "2px solid black",
                                        borderTop: "none",
                                        borderRight: "none",
                                    },
                                    "& .bottom-right": {
                                        content: '""',
                                        position: "absolute",
                                        bottom: 0,
                                        right: 0,
                                        width: "10px",
                                        height: "10px",
                                        border: "2px solid black",
                                        borderTop: "none",
                                        borderLeft: "none",
                                    },
                                }}
                            >
                                <Box className="bottom-left" />
                                <Box className="bottom-right" />
                                <CardContent sx={{ paddingBottom: 1 }}>
                                    <Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
                                        {member.name}
                                    </Typography>
                                    
                                </CardContent>
                                <CardMedia
                                    component="img"
                                    height="140"
                                    image={member.image}
                                    alt={member.name}
                                    sx={{
                                        objectFit: "contain",
                                        width: "80%",
                                        margin: "0 auto",
                                        padding: "10px",
                                    }}
                                />
                            </Card>

                        </Grid>
                    ))}
                </Grid>
            </motion.div>
        </Grid>
    );
};

export default OurTeam;
