import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import PenaLogo from "../../components/PenaLogo";
import SectionWrapper from "../../components/SectionWrapper";
import mainShapeVideo from "../../assets/animations/main.webm";
import previewMain from "../../assets/animations/preview_main.png";


export default function Section1() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));

    return (
        <SectionWrapper
            component="section"
            maxWidth="lg"
            outerContainerSx={{
                backgroundColor: theme.palette.lightPurple.main,
            }}
            sx={{
                display: "flex",
                pt: upMd ? "70px" : "20px",
                pb: "70px",
                justifyContent: "space-between",
                flexDirection: upMd ? "row" : "column",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    flexBasis: upMd ? "310px" : undefined,
                    gap: "70px",
                    order: upMd ? 1 : 2,
                    mb: upMd ? undefined : "30px",
                }}
            >
                {upMd && <PenaLogo width={180} />}
                <Typography variant="h2">Сервисы прокачки маркетинга</Typography>
            </Box>
            <Box
                sx={{
                    flexShrink: 1,
                    textAlign: "center",
                    order: upMd ? 2 : 1,
                    mx: upMd ? "30px" : 0,
                    // mt: upMd ? undefined : "-70px",
                    // mb: upMd ? undefined : "-30px",
                    alignSelf: "center",
                    aspectRatio: "1 / 1",
                    width: upMd ? undefined : "100%",
                    maxWidth: "301px",
                    maxHeight: "301px",
                }}
            >
                <video
                    autoPlay
                    loop
                    muted
                    playsInline
                    poster={previewMain}
                    style={{
                        width: "100%",
                        height: "100%",
                        // transform: upMd ? undefined : "rotate(-90deg)",
                    }}
                >
                    <source src={mainShapeVideo} type="video/webm" />
                    Your browser doesn't support HTML5 video tag.
                </video>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    flexBasis: upMd ? "360px" : undefined,
                    alignItems: "start",
                    alignSelf: upMd ? "center" : "start",
                    mt: upMd ? "70px" : undefined,
                    order: 3,
                }}
            >
                <Box sx={{ mb: "11px" }}>
                    <Typography>Покажут эффективность рекламы</Typography>
                    <Typography>Соберут все обращения клиентов</Typography>
                    <Typography>Повысят конверсию сайта</Typography>
                </Box>
                <Typography sx={{ mb: "40px" }}>И все это в едином кабинете</Typography>
                <CustomButton
                    variant="contained"
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                        color: theme.palette.primary.main,
                    }}
                >Подробнее</CustomButton>
            </Box>
        </SectionWrapper >
    );
};