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/lsbg.png"
import OurTeam from "./ourteam";
// import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
// import mobileback from "../components/imageandgif/mobileback.png"
// import { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/loopcentrelaptop.png"
// import sustainability from "../components/imageandgif/Untitled-2.png"
// import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement";
import loopgif from "../components/imageandgif/Loop hero 29_04 (2).gif"
// import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
// import gifeightm from "../components/imageandgif/reminemobile.gif";
// import giffivem from "../components/imageandgif/repairm.gif";
// import gifsixm from "../components/imageandgif/newusenewuse.gif";
// import gifonem from "../components/imageandgif/mine mobile.gif";

// const features = [
//     {
//       title: "Reuse",
//       description:
//         "We help businesses repair their old electronics by recommending reusable parts and components for future use or resale.",
//       icon: <RecyclingIcon fontSize="large" color="primary" />, 
//     },
//     {
//       title: "Repair",
//       description:
//         "Repair services extend the life of devices, minimizing waste and reducing the need for new products.",
//       icon: <BuildIcon fontSize="large" color="secondary" />, 
//     },
//     {
//       title: "Disintegrate",
//       description:
//         "When devices can no longer be repaired, we ensure responsible recycling and proper disposal.",
//       icon: <DeleteIcon fontSize="large" color="error" />, 
//     },
//     {
//       title: "Remine",
//       description:
//         "We take the decomposed materials and refine them for reuse, reducing environmental impact.",
//       icon: <LocalFireDepartmentIcon fontSize="large" color="warning" />, 
//     },
//   ];

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 disintegrateRef = useRef<HTMLDivElement>(null);
    const remineRef = useRef<HTMLDivElement>(null);
    const reuseRef = useRef<HTMLDivElement>(null);

    const theme = createTheme({
        breakpoints: {
            values: {
                xs: 0,     // Default
                sm: 600,   // Default
                md: 1000,   // Default
                lg: 1400,  // Default
                xl: 1600,  // Default

            },
        },
        typography: {
            fontFamily: "SF Pro Regular, Arial, sans-serif",
            h4: {
                color: "#333333",
            },
            body2: {
                color: "#4D4D4D"
            }
        },

    });

    return (
        <ThemeProvider theme={theme}>
            <Box>
                <Grid container sx={{ position: "relative", marginTop: { lg: '79px', xs: '65px' } }}>
                    {/* Grid 1 */}
                    <Grid
                        item
                        xs={12}
                        sx={{
                            marginTop: "0px",
                            height: { xs: "270px", lg: "77vh", sm: "487px", md: '517px' },
                            width: { lg: "100vw" },
                            backgroundColor: "white",
                            position: "relative",
                            paddingTop: { xs: '50px', lg: '5px', md: '10px' },
                            marginBottom: { xs: "10px", md: "39px", lg: '30px' },
                        }}
                    >
                        <img
                            src={loopgif}
                            alt="Gif"
                            style={{
                                width: "100%",
                                height: "auto",
                                maxHeight: "610px",
                            }}

                        />
                    </Grid>
                </Grid>
                <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
                    <Grid item xs={12} sm={6} md={4} >
                        <Box
                            sx={{
                                p: 3,
                                borderRadius: "12px",
                                backgroundColor: "#7c77770d",
                                textAlign: "center",
                                color: '#333333',
                                height: '107px',
                                fontSize: { xs: '12px', sm: '16px' },
                                fontFamily: "SF Pro Regular, Arial, sans-serif",
                            }}
                        >
                            <Typography variant="body1">
                                <strong>We aim to &apos;Do More With Less&apos;</strong> <br />
                                Our mission is to maximize the reuse of nature&apos;s precious resources, fostering a circular economy and driving true sustainability.
                            </Typography>
                        </Box>
                    </Grid>
                    <Grid item xs={12} sm={6} md={4} >
                        <Box
                            sx={{
                                p: 3,
                                borderRadius: "12px",
                                backgroundColor: "#7c77770d",
                                textAlign: "center",
                                color: '#333333',
                                height: '107px',
                                fontSize: { xs: '12px', sm: '16px' },
                                fontFamily: "SF Pro Regular, Arial, sans-serif",
                            }}
                        >
                            <Typography variant="body1">  &quot;Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.&quot;,
                            </Typography>
                        </Box>
                    </Grid>
                    <Grid item xs={12} sm={6} md={4}   >
                        <Box
                            sx={{
                                p: 3,
                                borderRadius: "12px",
                                backgroundColor: "#7c77770d",
                                textAlign: "center",
                                color: '#333333',
                                height: '107px',
                                fontSize: { xs: '12px', sm: '16px' },
                                fontFamily: "SF Pro Regular, Arial, sans-serif",
                            }}
                        >
                            <Typography variant="body1">  &quot;We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.&quot;,
                            </Typography>
                        </Box>
                    </Grid>
                </Grid >
                {/* Grid 2 */}
                <Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 5, md: 5 }, mt: { xs: 5, md: 5 } }}>
                    <Grid container justifyContent="center">
                        <Grid item lg={10} xs={10} md={10}>
                            <Typography
                                variant="h4"
                                sx={{
                                    fontSize: { xs: '28px', md: '36px', lg: '42px' },
                                    textAlign: "left",
                                    fontFamily: "Helvetica Neue, Arial, sans-serif",
                                    fontWeight: "bold"
                                }}
                                gutterBottom
                            >
                                The Process
                            </Typography>
                            <Typography
                                variant="body1"
                                sx={{
                                    fontSize: { xs: '14px', md: '18px', lg: '20px' },
                                    textAlign: 'left',
                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
                                    lineHeight: { xs: '1.4', md: '1.6' }
                                }}
                            >
                                Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination.
                                Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose of.
                                Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.
                            </Typography>
                            <Typography
                                variant="h2"
                                sx={{
                                    mt: { xs: 5, md: 9 },
                                    mb: { xs: 5, md: 10 },
                                    textAlign: "left",
                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
                                    fontSize: { xs: '32px', md: '48px', lg: '64px' },
                                    color: "#95CD41",
                                    fontWeight: "bold"
                                }}
                            >
                                This is where we come in.
                            </Typography>
                        </Grid>
                    </Grid>
                </Box>


                <Box
                    sx={{
                        height: { xl: 800, lg: 700 },
                        width: '100%',
                        backgroundImage: { xs: 'none', lg: `url(${newbackground})` },
                        backgroundSize: "261px 220px",
                        // backgroundPosition: "638px 290px",
                        background : 'center',
                        backgroundRepeat: "no-repeat",
                        paddingBottom: { lg: 20, xs: 0 }
                    }}
                >
                    <Grid
                        container
                        sx={{
                            width: '100%',
                        }}
                    >

                        <Grid item xs={5} sm={6} lg={6}
                            sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
                            <Box ref={reuseRef}
                                sx={{
                                    width: { xs: "90%", lg: "350px" },
                                    height: { xs: "340px", lg: "240px" },
                                    textAlign: "left",
                                    display: "flex",
                                    flexDirection: "column",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    margin: { xs: 1 }
                                }}>
                                <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                        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: "100%", maxWidth: "300px", mt: 2 }}>
                                    <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                            </Box>
                        </Grid>

                        {/* Repair Section */}
                        <Grid item xs={5} sm={6} lg={6}
                            sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
                            <Box ref={reuseRef}
                                sx={{
                                    width: { xs: "90%", lg: "350px" },
                                    height: { xs: "340px", lg: "240px" },
                                    textAlign: "left",
                                    display: "flex",
                                    flexDirection: "column",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    margin: { xs: 1 }
                                }}>
                                <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                        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: "100%", maxWidth: "300px", mt: 2 }}>
                                    <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: '363px' }, display: { lg: 'flex', xs: 'none' }, 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" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>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', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, 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" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>
                        {/* mobile only */}
                        <Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }}
                            sx={{
                                display: { xs: "flex", md: "flex", lg: 'none' },
                                backgroundImage: { lg: null, xs: `url(${newbackground})` },
                                backgroundSize: { xs: "30%", md: "22%", sm: '50%' },
                                backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
                                backgroundRepeat: "no-repeat",
                            }}>
                            {/* Reuse */}
                            <Grid item xs={6}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                    <Box sx={{  p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                            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={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                            <img
                                                src={gifsix}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>

                                </Box>
                            </Grid>

                            {/* Repair */}
                            <Grid item xs={6}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                    <Box sx={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                            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={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                            <img
                                                src={giffive}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>
                                </Box>
                            </Grid>

                            {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
                            <Grid item xs={6} sx={{ mt: 2 }}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                            <img
                                                src={gifseven}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>
                                    <Box sx={{ p: 1, height: { xs: 172, sm: 138, md: 118 }, maxHeight: 270 }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>

                            {/* Remine */}
                            <Grid item xs={6} sx={{ mt: 2 }}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                            <img
                                                src={gifeight}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>
                                    <Box sx={{  p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 172, sm: 138, md: 118 } }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>
                        {/* na */}
                        {/* na */}
                        {/* na */}
                    </Grid>

                </Box>
                <WasteImageSection />
                <WhyChooseUs />
                <OurTeam />

                <Footer />

            </Box>
        </ThemeProvider>
    );
};

export default HomePage;