import React, { useRef } from "react";
import { Box, Grid, Typography } from "@mui/material";
import logo from "../components/imageandgif/newlogo.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/newloop.png"
import OurTeam from "./ourteam";
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
import mobileback from "../components/imageandgif/mobileback.png"

import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/full.png"
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png"





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);
    const items = [
        "Our mission is to maximize the reuse of nature’s precious resources, fostering a circular economy and driving true sustainability.",
        "Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
        "We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
    ];
    // 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", lg: "58vh" },
                            width: { lg: "100vw" },
                            backgroundColor: "white",
                            position: "relative",
                            backgroundImage:

                                `url(${loopgreenback})`
                            ,
                            backgroundSize: "contain",
                            backgroundPosition: " center",
                            backgroundRepeat: "no-repeat",
                            marginBottom: { xs: "10px", md: "39px" },
                        }}
                    >


                    </Grid>
                </Grid>
                <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
                    {items.map((text, index) => (
                        <Grid item xs={12} sm={6} md={4} key={index}  >
                            <Box
                                sx={{
                                    p: 3,
                                    borderRadius: "12px",
                                    backgroundColor: "#7c77770d",
                                    textAlign: "left",

                                }}
                            >
                                <Typography variant="body1">{text}</Typography>
                            </Box>
                        </Grid>
                    ))}
                </Grid>
                {/* Grid 2 */}
                <Box
                    sx={{
                        height: { xl: 1800, lg: 2000, xs: 2830, sm: 3580 },
                        width: '100%',
                        backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
                        backgroundSize: "contain",
                        backgroundPosition: { lg: "center", xs: "50% 87%" },
                        backgroundRepeat: "no-repeat",
                        paddingBottom: { lg: 20, xs: 0 }
                    }}
                >
                    <Grid
                        container
                        sx={{

                            width: '100%',
                        }}
                    >
                        {/* ROW 1 */}
                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                            <Box ref={mineRef} sx={{
                                height: { xs: "495px", lg: "215px" },
                                width: { xs: "80%", lg: "870px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                            }}>
                                <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" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4">Mine from nature</Typography>
                                    <p>Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </p>
                                </Box>
                            </Box>
                        </Grid>
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>

                        {/* ROW 2 */}
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
                            <Box ref={manufactureRef} sx={{
                                height: { xs: "472px", lg: "215px" },
                                width: { xs: "80%", lg: "552px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column-reverse", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                            }}>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4">Manufacturing</Typography>
                                    <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
                                </Box>
                                <Box sx={{ width: { lg: '50%' } }}>
                                    <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
                                </Box>

                            </Box>
                        </Grid>

                        {/* ROW 3 */}
                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' },
                         display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
                            <Box ref={assembleRef} sx={{
                                height: { xs: "332px", lg: "215px" ,sm:'500px' },
                                width: { xs: "80%", lg: "595px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                            }}>

                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                    <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4">Assemble</Typography>
                                    <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
                                </Box>

                            </Box>
                        </Grid>
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>

                        {/* ROW 4 */}
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
                            <Box ref={useRefBox} sx={{
                                height: { xs: "332px", lg: "215px" ,sm:'555px' },
                                width: { xs: "80%", lg: "550px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column-reverse", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                            }}>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4">Use</Typography>
                                    <p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
                                </Box>
                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                    <img src={giffour} alt="Gif" style={{ width: "100%" }} />
                                </Box>

                            </Box>
                        </Grid>
                        {/* new2 */}
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>


                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
                        {/* newnew */}
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' , sm:"center" }, alignItems: "center" }}>
                            <Box ref={reuseRef} >
                                <Box
                                    sx={{
                                        width: { xs: "90%", lg: "350px" }, // Set fixed width
                                        height: { xs: "241px", lg: "180px" }, // Set fixed height
                                        paddingLeft: { xs: "10px", md: "10px" },
                                        paddingRight: { xs: "2px" },
                                        textAlign: { lg: "left", xs: "left" },
                                        backgroundColor: { xs: "#95CD41", lg: "white" },
                                        display: "flex",
                                        flexDirection: "column",
                                        justifyContent: "center",
                                    }}
                                >
                                    <Typography variant="h4">Reuse</Typography>
                                    <Typography variant="body2" >We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</Typography>
                                </Box>
                                <Box sx={{ width: { xs: "100%", md: "100%" } }}>
                                    <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
                                </Box>

                            </Box>
                        </Grid>
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
                            <Box ref={reuseRef} >
                                <Box
                                    sx={{
                                        width: { xs: "90%", lg: "350px" }, // Set fixed width
                                        height: { xs: "241px", lg: "180px" }, // Set fixed height
                                        paddingLeft: { xs: "10px", md: "10px" },
                                        paddingRight: { xs: "2px" },
                                        textAlign: { lg: "left", xs: "left" },
                                        backgroundColor: { xs: "#95CD41", lg: "white" },
                                        display: "flex",
                                        flexDirection: "column",
                                        justifyContent: "center",
                                    }}
                                >
                                    <Typography variant="h4">Repair</Typography>
                                    <Typography variant="body2">
                                        Loop Sustainability steps in to repair damaged or outdated electronics.
                                        Our repair services extend the life of devices, minimizing waste and
                                        reducing the need for new products.
                                    </Typography>
                                </Box>

                                <Box sx={{ width: { xs: "100%", md: "100%" } }}>
                                    <img src={giffive} alt="Gif" style={{ width: "100%" }} />
                                </Box>

                            </Box>
                        </Grid>
                        {/* newnewnwe */}
                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '800px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
                            <Box ref={disintegrateRef} sx={{
                                height: { xs: "332px", lg: "115px" },
                                width: { xs: "92%", lg: "250px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "column" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'left',
                                marginBottom: { xs: "20px", md: "0" },
                                marginTop: { xs: "20px" },
                            }}>
                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                    <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                    <Typography variant="h4">Disintegrate</Typography>
                                    <Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
                                </Box>


                            </Box>
                        </Grid>
                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
                            <Box ref={remineRef} sx={{
                                height: { xs: "332px", lg: "115px" },
                                width: { xs: "92%", lg: "250px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "column" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                                marginTop: { xs: "20px" },
                            }}>
                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                    <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                    <Typography variant="h4">Remine</Typography>
                                    <Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.</Typography>
                                </Box>


                            </Box>
                        </Grid>
                    </Grid>

                </Box>
                <Grid
                    container
                    xs={12}

                    sx={{
                        height: "66 0px",
                        marginTop: { lg: 20, xs: 0 },
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        overflow: "hidden"
                    }}
                >
                    <img
                        src={wasteimage}
                        alt="Waste Image"
                        style={{
                            width: "100%",
                            height: "100%",
                            objectFit: "fill"
                        }}
                    />
                </Grid>
                <OurTeam />
                <Footer />
            </Box>
        </ThemeProvider>
    );
};

export default HomePage;