import React from "react";
import { Box, Card, CardContent, CardMedia, Typography, Button, Grid } from "@mui/material";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import loopgreenback from "../components/imageandgif/loopgreenbackground.png";
import { useMediaQuery, createTheme, ThemeProvider } from "@mui/material";

// Define Data
const data = [
    { img: "https://s3-alpha-sig.figma.com/img/8e1a/c73a/f4e18134521c4a2ef1c70e0ba02fa636?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=iKYXVc~k5~LoiM0ep167AJSywxHpPueTEeheiHfxA-TT8SrzhLb0CZIR08zl9nMDz4gBOqlnKavcTEs~h3tu9gRAyIDMIgcFHIeFQ6IBSoeHabuJxmyP0qcdnWXNYJXze0oO8B~VDFHG0lOagJW~fnb8j8gB2W7M4oL2QPPQFsY3oFzEKW3Gydq7ijohnCXdQP5CPgJ2MPhMFQ59DDQsxv5YihKByOgVx3boAx1ABL05w25ab0DFrcPmSgx93rHzikBmmPNVoiLWW6-rYijbFaxZ~2wEbK4zwGZNtIYw~YGR9EG~h595FJDl1XeCaoMWVJFkfqqHcYDD2-1fLu3JFA__", title: "Lorem Ipsum Heading" },
    { img: "https://s3-alpha-sig.figma.com/img/7cf1/0d68/a23d760a5c95fc2a5ab5fb4e6e59deec?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=LJgcQKDXC323lViIWgemZBwZ2jUeEQY3t~y9XKfH3Fpg3njl0njNtFQFMCiwEjwXxS4Fl711FZGY-f-qf~m7pn60FtcOLNyigwNzabHL-a7AIg9Y0aivbsRyy-Lpe-HsV33-QpPENtci8SWvTZrOQkZ0lRIiwmybKiLv3twuexnx-jlGvUKsdKuX8WxT0jYxIfQcn93FFQaaHKyHH2ZlgwTj~~R4MJO8-K0oO-JX7EVTlLwK3V2~-WUS400GiThR4~-iqmCPVnvoUI2uHW29BpZFV48wfCcreOJVG3AKbQXlSWe23HWzprUWqiGHDlDOKlkfeJEErDMqCYvqnKPxmQ__", title: "Lorem Ipsum Heading" },
    { img: "https://s3-alpha-sig.figma.com/img/0db3/dd53/bfa76ce7f4e1b5e5b7e0463be4d5e711?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=KQYig8GD7A0zTsU97U5zKmCKYWBLOlKelMR44YmRvfw0jzdZITBnCxM9RawvrjuqN5lsZtXh1elIbqDDIo8xUli1f6uOSmtvDr~3Oq5ba1oAIIzrDc9V2iGXWGi03gGKWWgrtje4Q0pXidnMTv3J3RueowzABpnH3DqCHicpzWIqxaJ5z0PNfJxFTPkxfkW0F6A9Uzj76Vk4YnGZCr7bQGuRwP1z30pqxJwCMNMMcIVA1yGO2VdNLXxJMCit4Wf5wa23fCyal5evfpTqxnw9Tz3CUzLu3dac~daiHIuzjHRIB5IVT7-IIcej~ghxDWdkmzVPTsVHxQNiZrVtIn9ZbQ__", title: "Lorem Ipsum Heading" },
];

const workImages = [
    "https://s3-alpha-sig.figma.com/img/0d43/e78a/801b2f3112a2e247f745e336fd85727d?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=eWOGZBjo6HQJPPwvms3qsYK7Yz6AZiD6GcpbTy11-dEJ4ITDWXMO5HRKMwJVsireXkUCym2WOtEx-7SdfYfyafODp1Ll6qOUc2-gXtllO7r75pIbvj74BeEVYb4hji8oeNaveAMQEpYGtNNOAtjGjfqgGtqw~E~6jiJ14z4ZArE6kcxUGbYO7GDlZDnK9Jg8eeCg56quRknbEPmtePG5ZdKBiJ53tXZppNvvPWffJ8v~hYwiNhNH1FiOnnLLmHOUKkeOV8U7evEhPmQJMI6z5YVT2bH7mZwqD4tFrvRN4m9MXencEf6zA8F7lhYCut-7MbwK9r9PFBq70AlTmDvpJw__",
    "https://s3-alpha-sig.figma.com/img/f819/9a31/d651da4bd8aa1a3df75c44d2d9664976?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=rr-gB6wrG5p5-uMq-oOxG4S~JaGEva8FpJk7YTQpH4XR1P-ULdY70EfAmaYx1ULeLY3LQQP1sNpVoWfAITdhrgBJIB6L3R1CJT~9rCvl8AMOk0VqO7msbcjAQdV1toRRy6ec3VYMVtf672aGma-ucsAxsjmuY9UyL64MMCzNjjJAJRkVvB5OpRzQReOreWGgAhBXslCtfq~qOnIIrHfwTHREyitxtknlN-CAzilzoFwcF5hUkFUHd8DGNwITU3LFYkFBmclmTWTOhuLO5G2yeDEz2pWFIBCwAKyZ8RoS0y-ujmyG6Sfp4x2dkzz17inS0CkZad0fJMTQzzDG1xVXTQ__",
    "https://s3-alpha-sig.figma.com/img/5ac7/e708/3546a709a7a689bb01b317bf3052d646?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=X50K4TlrAawstut~urwB~VbLQNeSAEJh5ZzJ9s3rijY-~s2xe8ydeDEoo4ahfGzCAV-7oMd5QGl~mFpvzC-BHxMfPRENe5hWoWC5QVFna7yt1o~mj3eh1VXDWvbD4ESC1IszZOy~-m5NdOYkXqFPvnpwG1wnwg9DF1WpXRJAMX79DvftxBNURciSScyiySSdi9-7aiMwh9Kr9jYaFdOzP1YjupnmebXbiBa4A5JggubAgG0ysJtLju3AxZMdfA-2Gef8L5LDEcnBfLNcyAlc2ZoW5aO6iWSZzS3nHb0AxcIA~BjZvoUjX0htazGTtu-PGoKWQ4wCUIhvvnEJLusvMQ__",
    "https://s3-alpha-sig.figma.com/img/2b3c/e165/b717d5a80e0f35b7422343ef37fa73eb?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=YgPY40uIT20P0C9JDcCBJeLLAtQU1HTvgO2EmlA3yWVHKcaOIA5UNmFYcxHF5Je5s8nRl9ReC5f2Vh5LNvAG0Q86gV6OTt3JJwgTixaR6YNFBvYeJY5qZlchheys92XgMkvDntrzWQ-dRNK72fDBbPjR8tR31XBt6lGbjoj0HySI9lKXg5x9yF0y~hqC7qtkTfwYJlHHScFXaQnbicMzKZUjTMa5BHwlmGOSG6IFHhmovKJKAZtW5BY0xWiEPXnq19XDnvSdLf3OY-tpG-itRPfA02ztThrqdBv5XWQpCQN4CWn4qNZRdnEYB8BsSKFXKVocAPnqKNziTXDDJvdVgQ__",
];

// Theme for responsiveness
const theme = createTheme({
    breakpoints: {
        values: { xs: 0, sm: 600, md: 1000, lg: 1400, xl: 1800 },
    },
});

const PartnerWork = () => {
    const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Below 600px

    return (
        <ThemeProvider theme={theme}>
            <Box
                sx={{
                    textAlign: "center",
                    padding: isMobile ? 5 : 20,
                    backgroundImage: isMobile ? "none" : `url(${loopgreenback})`,
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                    backgroundRepeat: "no-repeat",
                }}
            >
                {/* Why Partner with Us? */}
                <Typography variant="h4" gutterBottom>
                    Why Partner with Us?
                </Typography>

                {/* Swiper for Mobile View */}
                {isMobile ? (
                    <Swiper
                        modules={[Autoplay, Pagination]}
                        autoplay={{ delay: 3000, disableOnInteraction: false }}
                        pagination={{ clickable: true }}
                        loop={true}
                        spaceBetween={10}
                        slidesPerView={1}
                        style={{ width: "100%", maxWidth: 350 }}
                    >
                        {data.map((item, index) => (
                            <SwiperSlide key={index}>
                                <Card
                                    sx={{
                                        maxWidth: 350,
                                        mx: "auto",
                                        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
                                        borderRadius: 4,
                                        p: 2,
                                        background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
                                        border: "1px solid rgba(0, 0, 0, 0.1)",
                                    }}
                                >
                                    <CardContent sx={{ textAlign: "left" }}>
                                        <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                                            {item.title}
                                        </Typography>
                                        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                                            Lorem Ipsum subheading
                                        </Typography>
                                    </CardContent>
                                    <CardMedia
                                        component="img"
                                        height="150"
                                        image={item.img}
                                        alt={item.title}
                                        sx={{ borderRadius: 2, marginX: "auto" }}
                                    />
                                    <CardContent>
                                        <Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
                                            Learn more →
                                        </Button>
                                    </CardContent>
                                </Card>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                ) : (
                    <Grid container spacing={4} justifyContent="center" sx={{ paddingTop: 5 }}>
                        {data.map((item, index) => (
                            <Grid item key={index} xs={12} sm={6} md={4}>
                                <Card
                                    sx={{
                                        maxWidth: 350,
                                        mx: "auto",
                                        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
                                        borderRadius: 4,
                                        p: 2,
                                        background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
                                        border: "1px solid rgba(0, 0, 0, 0.1)",
                                    }}
                                >
                                    <CardContent sx={{ textAlign: "left" }}>
                                        <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                                            {item.title}
                                        </Typography>
                                        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                                            Lorem Ipsum subheading
                                        </Typography>
                                    </CardContent>
                                    <CardMedia
                                        component="img"
                                        height="200"
                                        image={item.img}
                                        alt={item.title}
                                        sx={{ borderRadius: 2, marginX: "auto" }}
                                    />
                                    <CardContent>
                                        <Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
                                            Learn more →
                                        </Button>
                                    </CardContent>
                                </Card>
                            </Grid>
                        ))}
                    </Grid>
                )}

                {/* Our Work Section */}
                <Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
                    Our Work
                </Typography>
                <Grid container spacing={1} justifyContent="center">
                    {workImages.map((image, index) => (
                        <Grid item key={index}>
                            <Box
                                component="img"
                                src={image}
                                alt={`Work ${index + 1}`}
                                sx={{
                                    width: isMobile ? 100 : 190,
                                    height: isMobile ? 100 : 190,
                                    borderRadius: index % 2 === 0 ? "50%" : "7%", // Circle for 1st & 3rd, Square for 2nd & 4th
                                    backgroundColor: "gray",
                                    boxShadow: 3,
                                    objectFit: "cover",
                                }}
                            />
                        </Grid>
                    ))}
                </Grid>



                {/* Call to Action Section */}
                <Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
                    <Grid item xs={12} sm={6}>
                        <Box sx={{ p: 3, border: "1px solid #ddd", borderRadius: 3, boxShadow: 2 }}>
                            <Typography variant="body2" sx={{ fontSize: "1rem" }}>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </Typography>
                        </Box>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <Button
                            variant="contained"
                            sx={{
                                width: "100%",
                                height: "100%",
                                fontSize: "1rem",
                                borderRadius: 3,
                                py: 2,
                                backgroundColor: "#000",
                                color: "#fff",
                                "&:hover": { backgroundColor: "#333" },
                            }}
                        >
                            Explore our projects →
                        </Button>
                    </Grid>
                </Grid>
            </Box>
        </ThemeProvider>
    );
};

export default PartnerWork;
