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";

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" });
        }
    };

    return (
        <Box>
            <Grid container sx={{ position: "relative", marginTop: '119px' }}>
                {/* Grid 1 */}
                <Grid
                    item
                    xs={12}
                    sx={{
                        marginTop: "0px",
                        height: "300px",
                        backgroundColor: "white",
                        position: "relative",
                        backgroundImage: `url(${logo})`,
                        backgroundSize: "contain",
                        backgroundPosition: "right center",
                        backgroundRepeat: "no-repeat",
                        marginBottom: "399px",
                    }}
                >
                    <Box
                        sx={{
                            position: "absolute",
                            top: "80%",
                            left: "5%",
                            transform: "translateY(-30%)",
                            height: "440px",
                            width: "220px",
                            backgroundColor: "#eee0e0a3",
                            zIndex: 1,
                            padding: "20px",
                            overflowY: "auto",
                            borderRadius: "8px",
                        }}
                    >
                        <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
                    item
                    xs={12}
                    sx={{

                        height: "965px",
                        backgroundColor: "white",
                        position: "relative",
                        backgroundImage: `url(${backone})`,
                        backgroundSize: "contain",
                        backgroundPositionX: "50.5%",
                        backgroundPositionY: "60%",
                        backgroundRepeat: "no-repeat",
                    }}>
                    <Box
                        ref={mineRef} // Attach ref here
                        sx={{
                            position: "absolute",
                            top: "4%",
                            left: "10%",
                            transform: "translateY(-50%)",
                            height: "200px",
                            width: "630px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            justifyContent: "flex-start",
                            alignItems: "center",
                            padding: "10px",
                        }}
                    >
                        <Box sx={{ width: "70%" }}>
                            <img src={gifone} alt="Gif" style={{ width: "100%", height: "auto" }} />
                        </Box>
                        <Box sx={{ width: "70%", paddingLeft: "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, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
                        </Box>
                    </Box>
                    <Box
                        ref={manufactureRef} // Attach ref here
                        sx={{
                            position: "absolute",
                            top: "38%",
                            right: "4%",
                            transform: "translateY(-50%)",
                            height: "215px",
                            width: "560px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            justifyContent: "flex-start",
                            alignItems: "center",
                            padding: "10px",
                        }}
                    >
                        <Box sx={{ width: "70%", paddingLeft: "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 quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
                        </Box>
                        <Box sx={{ width: "70%" }}>
                            <img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} />
                        </Box>
                    </Box>
                    <Box
                        ref={assembleRef}
                        sx={{
                            position: "absolute",
                            top: "75%",
                            left: "5%",
                            transform: "translateY(-50%)",
                            height: "167px",
                            width: "534px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            justifyContent: "flex-start",
                            alignItems: "center",
                            padding: "10px",
                        }}
                    >
                        <Box sx={{ width: "70%", paddingLeft: "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: "100%", height: "auto" }} />
                        </Box>
                    </Box>

                </Grid>

                {/* Grid 3 */}
                <Grid
                    item
                    xs={12}

                    sx={{
                        height: "615px",
                        backgroundColor: "white",
                        position: "relative",
                        backgroundImage: `url(${backtwo})`,
                        backgroundSize: "contain",
                        backgroundPositionX: "41.5%",
                        backgroundPositionY: "60%",
                        backgroundRepeat: "no-repeat",

                    }}>
                    <Box
                        ref={useRefBox}
                        sx={{
                            position: "absolute",
                            top: "17%",
                            right: "25%",
                            transform: "translateY(-50%)",
                            height: "167px",
                            width: "523px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            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: "100%", height: "auto" }} />
                        </Box>
                    </Box>
                </Grid>

                {/* Grid 4 */}
                <Grid
                    item
                    xs={12}

                    sx={{
                        height: "778px",
                        backgroundColor: "white",
                        position: "relative",
                        backgroundImage: `url(${backthree})`,
                        backgroundSize: "contain",
                        backgroundPosition: "47.2% 50%",
                        backgroundRepeat: "no-repeat",

                    }}>
                    <Box
                        ref={reuseRef}
                        sx={{
                            position: "absolute",
                            top: "7%",
                            left: "17%",
                            transform: "translateY(-23%)",
                            height: "167px",
                            width: "388px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            flexDirection: 'row-reverse',
                            alignItems: "center",
                            padding: "10px",
                        }}
                    >
                        <Box sx={{ width: "80%", paddingLeft: "10px" }}>
                            <Typography variant="h4">Reuse</Typography>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
                        </Box>
                        <Box sx={{ width: "80%" }}>
                            <img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} />
                        </Box>
                    </Box>

                    <Box
                        ref={repairRef}
                        sx={{
                            position: "absolute",
                            top: "20%",
                            right: "13%",
                            transform: "translateY(-23%)",
                            height: "167px",
                            width: "390px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            justifyContent: "flex-start",
                            alignItems: "center",
                            padding: "10px",
                        }}
                    >
                        <Box sx={{ width: "100%", paddingLeft: "10px" }}>
                            <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: "61%",
                            left: "6%",
                            transform: "translateY(-23%)",
                            height: "167px",
                            width: "409px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            justifyContent: "flex-start",
                            alignItems: "center",
                            padding: "10px",
                        }}
                    >
                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
                            <Typography variant="h4">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: "65%",
                            right: "8%",
                            transform: "translateY(-23%)",
                            height: "167px",
                            width: "309px",
                            backgroundColor: "white",
                            zIndex: 1,
                            display: "flex",
                            justifyContent: "flex-start",
                            alignItems: "center",
                            padding: "10px",
                        }}
                    >
                        <Box sx={{ width: "70%" }}>
                            <img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
                        </Box>
                        <Box sx={{ width: "70%", paddingLeft: "10px" }}>
                            <Typography variant="h4">Remine</Typography>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
                        </Box>

                    </Box>
                </Grid>
                <Grid
                    item
                    xs={12}
                    ref={mineRef} // Attach ref here
                    sx={{
                        height: "300px",
                        backgroundImage: `url(${loopgreen})`,

                        position: "relative",
                        backgroundSize: "contain",
                        backgroundPosition: "center",
                        backgroundRepeat: "no-repeat",
                    }}>

                </Grid>
            </Grid>
            <PartnerWork />
            <Footer />
        </Box>
    );
};

export default HomePage;