import React, { useRef } from "react";
import { Box, Grid, Typography } from "@mui/material";
import logo from "../loopslogo2.png";
import backone from "../components/imageandgif/newbgone.png";
import backtwo from "../components/imageandgif/newnewtwo.png";
import backthree from "../components/imageandgif/newthree.png";
import gifone from "../components/imageandgif/gifone.gif";
import giftwo from "../components/imageandgif/giftwo.gif";
import gifthree from "../components/imageandgif/gifthree.gif";
import giffour from "../components/imageandgif/giffour.gif";
import giffive from "../components/imageandgif/giffive.gif";
import gifsix from "../components/imageandgif/gifsix.gif";
import gifseven from "../components/imageandgif/gifseven.gif";
import gifeight from "../components/imageandgif/gifeight.gif";
import loopgreen from "../components/imageandgif/newloop.png";
import PartnerWork from "./ourwork";
import Footer from "./footer";
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
import OurTeam from "./ourteam";
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
import { createTheme, ThemeProvider } from "@mui/material/styles";


const HomePage: React.FC = () => {
    // Create refs for each content box
    const mineRef = useRef<HTMLDivElement>(null);
    const manufactureRef = useRef<HTMLDivElement>(null);
    const assembleRef = useRef<HTMLDivElement>(null);
    const useRefBox = useRef<HTMLDivElement>(null);
    const repairRef = useRef<HTMLDivElement>(null);
    const disintegrateRef = useRef<HTMLDivElement>(null);
    const remineRef = useRef<HTMLDivElement>(null);
    const impactRef = useRef<HTMLDivElement>(null);
    const reuseRef = useRef<HTMLDivElement>(null);

    // Function to scroll to the ref
    const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
        if (ref.current) {
            ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
        }
    };
    const theme = createTheme({
        breakpoints: {
            values: {
                xs: 0,     // Default
                sm: 600,   // Default
                md: 1000,   // Default
                lg: 1400,  // Default
                xl: 1800,  // Default

            },
        },
    });

    return (
        <ThemeProvider theme={theme}>
            <Box>
                <Grid container sx={{ position: "relative", marginTop: '119px' }}>
                    {/* Grid 1 */}
                    <Grid
                        item
                        xs={12}
                        sx={{
                            marginTop: "0px",
                            height: { xs: "190px", md: "300px" },
                            backgroundColor: "white",
                            position: "relative",
                            backgroundImage: {
                                xs: `url(${mobileLogo})`, // Mobile background image
                                md: `url(${logo})`, // Desktop background image
                            },
                            backgroundSize: "contain",
                            backgroundPosition: "right center",
                            backgroundRepeat: "no-repeat",
                            marginBottom: { xs: "10px", md: "399px" },
                        }}
                    >

                        <Box
                            sx={{
                                position: "absolute",
                                top: { xs: "70%", md: "80%" },
                                left: { xs: "2%", md: "5%" },
                                transform: "translateY(-30%)",
                                height: { xs: "235px", md: "440px" },
                                width: { xs: "150px", md: "220px" },
                                backgroundColor: "#eee0e0a3",
                                zIndex: 1,
                                padding: "20px",
                                overflowY: "auto",
                                borderRadius: "8px",
                                display: { xs: "none", md: "block" },
                            }}
                        >
                            <ul style={{
                                listStyleType: "none",
                                padding: "0",
                                margin: "0",
                                display: "flex",
                                flexDirection: "column",
                                gap: "10px"
                            }}>
                                <li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
                                <li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
                                <li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
                                <li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
                                <li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
                                <li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
                                <li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
                                <li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
                                <li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
                            </ul>
                        </Box>
                    </Grid>

                    {/* Grid 2 */}
                    <Grid
                        item
                        xs={12}
                        sx={{
                            height: { xs: "900px", md: "965px" }, // Increased height for mobile view
                            backgroundColor: "white",
                            position: "relative",
                            backgroundImage: {
                                xs: null,
                                md: `url(${backone})`,
                            },
                            backgroundSize: "contain",
                            backgroundPositionX: "50.5%",
                            backgroundPositionY: "60%",
                            backgroundRepeat: "no-repeat",
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "center",
                            alignItems: "center",
                            textAlign: 'center',
                            padding: { xs: "20px", md: "0" },
                        }}
                    >
                        <Box
                            ref={mineRef}
                            sx={{
                                position: "absolute",
                                top: { xs: "15%", lg: "4%" },
                                left: { lg: "10%" },
                                transform: "translateY(-50%)",
                                height: { xs: "332px", lg: "200px" },
                                width: { xs: "80%", lg: "470px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
                            }}
                        >
                            <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                <img src={gifone} alt="Gif" style={{ width: "100%" }} />
                            </Box>
                            <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" } }}>
                                <Typography variant="h4">Mine from nature</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque</p>
                            </Box>
                        </Box>

                        <Box
                            ref={manufactureRef}
                            sx={{
                                position: "relative",
                                top: { xs: "11%", lg: "-10%" }, // Adjust top for mobile
                                right: { lg: "-22%" },
                                height: { xs: "300px", md: "215px" },
                                width: { xs: "80%", md: "560px" },
                                backgroundColor: "white",
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column-reverse", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
                            }}
                        >
                            <Box sx={{ width: "60%", paddingLeft: { xs: "0", md: "10px" } }}>
                                <Typography variant="h4">Manufacture</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto</p>
                            </Box>
                            <Box sx={{ width: "45%" }}>
                                <img src={giftwo} alt="Gif" style={{ width: "70%", height: "auto" }} />
                            </Box>
                        </Box>

                        <Box
                            ref={assembleRef}
                            sx={{
                                position: "absolute",
                                top: { xs: "74%", lg: "66%" },
                                left: { lg: "12%" },
                                height: { xs: "300px", md: "167px" },
                                width: { xs: "80%", md: "534px" },
                                backgroundColor: "white",
                                display: "flex",
                                flexDirection: { xs: "column-reverse", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                zIndex: 1,
                            }}
                        >
                            <Box sx={{ width: "70%", paddingLeft: { xs: "0", md: "10px" } }}>
                                <Typography variant="h4">Assemble</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis!</p>
                            </Box>
                            <Box sx={{ width: "70%" }}>
                                <img src={gifthree} alt="Gif" style={{ width: "85%", height: "auto" }} />
                            </Box>
                        </Box>
                    </Grid>

                    {/* Grid 3 */}
                    <Grid
                        item
                        xs={12}
                        sx={{
                            height: { xs: "600px", lg: "615px" },
                            backgroundColor: "white",
                            position: "relative",
                            backgroundImage: {
                                xs: null,
                                md: `url(${backtwo})`,
                            },
                            backgroundSize: "contain",
                            backgroundPositionX: "41.5%",
                            backgroundPositionY: "60%",
                            backgroundRepeat: "no-repeat",
                            display: { xs: "flex" },
                            flexDirection: { xs: "column-reverse", lg: "row" },
                            justifyContent: { xs: "center" },
                            alignItems: { xs: "center" },
                            textAlign: { xs: 'center' }
                        }}>
                        <Box
                            ref={useRefBox}
                            sx={{
                                position: "absolute",
                                top: { xs: "65%", lg: "17%" },
                                right: { xs: "8%", md: "25%" },
                                transform: "translateY(-50%)",
                                height: { xs: "150px", md: "167px" },
                                width: { xs: "80%", md: "523px" },
                                backgroundColor: "white",
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column-reverse", lg: 'row' },
                                justifyContent: "flex-start",
                                alignItems: "center",
                                padding: "10px",
                            }}
                        >
                            <Box sx={{ width: "70%", paddingLeft: "10px" }}>
                                <Typography variant="h4">Use</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
                            </Box>
                            <Box sx={{ width: "70%" }}>
                                <img src={giffour} alt="Gif" style={{ width: "69%", height: "auto" }} />
                            </Box>
                        </Box>
                    </Grid>

                    {/* Grid 4 */}
                    <Grid
                        item
                        xs={12}
                        sx={{
                            height: { xs: "707px", md: "830px" },
                            backgroundColor: "white",
                            position: "relative",
                            backgroundImage: { lg: `url(${backthree})`, xs: null },
                            backgroundSize: "contain",
                            backgroundPosition: "46.2% 50%",
                            backgroundRepeat: "no-repeat",
                        }}>
                        <Box
                            ref={reuseRef}
                            sx={{
                                position: "absolute",
                                top: { xs: "5%", md: "7%" },
                                left: { xs: "-1%", md: "17%" },
                                transform: "translateY(-23%)",
                                height: { xs: "150px", md: "167px" },
                                width: { xs: "49%", md: "388px" },
                                backgroundColor: "white",
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
                                alignItems: "center",
                                justifyContent: "center", // Center vertically
                                padding: "10px",
                            }}
                        >
                            <Box
                                sx={{
                                    width: "80%",
                                    paddingLeft: "10px",
                                    backgroundColor: { xs: 'green', md: 'transparent' }, // Green background for mobile
                                    display: 'flex', // Make the text box a flex container to center content vertically
                                    flexDirection: 'column', // Align text content vertically
                                    justifyContent: 'center', // Vertically center the text
                                }}
                            >
                                <Typography variant="h4">Reuse</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
                            </Box>
                            <Box sx={{
                                width: "80%",
                                display: 'flex',
                                justifyContent: 'center', // Center the gif horizontally
                                alignItems: 'center', // Center the gif vertically
                            }}>
                                <img src={gifsix} alt="Gif" style={{ width: "132%", height: "110%" }} />
                            </Box>
                        </Box>


                        <Box
                            ref={repairRef}
                            sx={{
                                position: "absolute",
                                top: { xs: "1%", md: "20%" },
                                right: { xs: "1%", md: "13%" },
                                transform: "translateY(-23%)",
                                height: { xs: "150px", md: "167px" },
                                width: { xs: "47%", md: "390px" },
                                backgroundColor: "white",
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
                                alignItems: "center",
                                justifyContent: "center", // Center vertically
                                padding: "10px",
                            }}
                        >
                            <Box
                                sx={{
                                    width: "80%",
                                    paddingLeft: "10px",
                                    backgroundColor: { xs: 'green', md: 'transparent' }, 
                                    display: 'flex',
                                    flexDirection: 'column', 
                                    justifyContent: 'center', 
                                }}
                            >
                                <Typography variant="h4">Repair</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
                            </Box>
                            <Box sx={{ width: "80%" }}>
                                <img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
                            </Box>
                        </Box>

                        <Box
                            ref={disintegrateRef}
                            sx={{
                                position: "absolute",
                                top: { xs: "61%", md: "61%" },
                                left: { xs: "-2%", md: "6%" },
                                transform: "translateY(-23%)",
                                height: { xs: "150px", md: "167px" },
                                width: { xs: "51%", md: "409px" },
                                backgroundColor: "white",
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: 'column-reverse', md: 'row-reverse' }, // Reverse for mobile
                                alignItems: "center",
                                justifyContent: "center", // Center vertically
                                padding: "10px",
                                
                            }}
                        >
                            <Box
                                sx={{
                                    width: "80%",
                                    paddingLeft: "10px",
                                    backgroundColor: { xs: 'green', md: 'transparent' }, 
                                    display: 'flex',
                                    flexDirection: 'column', 
                                    justifyContent: 'center', 
                                }}
                            >
                                <Typography variant="h4" sx={{fontSize:'2rem'}}>Disintegrate</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
                            </Box>
                            <Box sx={{ width: "70%" }}>
                                <img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
                            </Box>
                        </Box>

                        <Box
                            ref={remineRef}
                            sx={{
                                position: "absolute",
                                top: { xs: "60%", md: "65%" },
                                right: { xs: "-3%", md: "8%" },
                                transform: "translateY(-23%)",
                                height: { xs: "150px", md: "167px" },
                                width: { xs: "50%", md: "309px" },
                                backgroundColor: "white",
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
                                alignItems: "center",
                                justifyContent: "center", // Center vertically
                                padding: "10px",
                            }}
                        >
                            <Box
                                sx={{
                                    width: "80%",
                                    paddingLeft: "10px",
                                     
                                }}
                            >
                                <img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
                            </Box>
                            <Box sx={{ width: "70%", paddingLeft: "10px",  backgroundColor: { xs: 'green', md: 'transparent' }, 
                                    display: 'flex',
                                    flexDirection: 'column', 
                                    justifyContent: 'center', }}>
                                <Typography variant="h4">Remine</Typography>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
                            </Box>
                        </Box>
                    </Grid>

                    {/* Grid 5 */}
                    <Grid
                        item
                        xs={12}
                        ref={mineRef}
                        sx={{
                            height: { xs: "200px", md: "300px" },
                            backgroundImage: `url(${loopgreen})`,
                            position: "relative",
                            backgroundSize: "contain",
                            backgroundPosition: "center",
                            backgroundRepeat: "no-repeat",
                        }}>
                    </Grid>
                </Grid>
                <PartnerWork />
                <OurTeam />
                <Footer />
            </Box>
        </ThemeProvider>
    );
};

export default HomePage;