import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import pena_illustration02 from "../../assets/pena_illustration02.png";
import Button from "../Button";
import PenaLogo from "../PenaLogo";
import SectionWrapper from "../SectionWrapper";


export default function Section1() {
    const theme = useTheme();
    const matchMd = useMediaQuery("@media (min-width: 1100px)"); // TODO

    return (
        <SectionWrapper
            component="section"
            maxWidth="lg"
            outerContainerSx={{
                backgroundColor: theme.palette.custom.lightPurple.main,
            }}
            sx={{
                display: "flex",
                pt: "70px",
                pb: "40px",
                gap: "20px",
                flexDirection: matchMd ? "row" : "column",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    flex: "1 0 0",
                    gap: "70px",
                    order: matchMd ? 1 : 2,
                }}
            >
                {/* {matchMd && <img src={logo_PenaHab} alt="pena logo" width={180} height={70} />} */}
                {matchMd && <PenaLogo />}
                <Typography variant="h2">Сервисы прокачки маркетинга</Typography>
            </Box>
            <Box
                sx={{
                    flex: "1 0 0",
                    textAlign: "center",
                    order: matchMd ? 2 : 1,
                    my: matchMd ? undefined : "-90px",
                }}
            >
                <img
                    style={{
                        transform: matchMd ? undefined : "rotate(-90deg)",
                        imageRendering: "pixelated",
                    }}
                    src={pena_illustration02}
                    alt="pena illustration"
                />
            </Box>
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    flex: "1 0 0",
                    alignItems: "start",
                    alignSelf: matchMd ? "center" : "start",
                    mt: matchMd ? "70px" : undefined,
                    order: 3,
                }}
            >
                <Box sx={{ mb: "11px" }}>
                    <Typography>Покажут эффективность рекламы</Typography>
                    <Typography>Соберут все обращения клиентов</Typography>
                    <Typography>Повысят конверсию сайта</Typography>
                </Box>
                <Typography sx={{ mb: "40px" }}>И все это в едином кабинете</Typography>
                <Button
                    variant="contained"
                    backgroundColor={theme.palette.custom.brightPurple.main}
                    textColor={theme.palette.primary.main}
                >Подробнее</Button>
            </Box>
        </SectionWrapper>
    );
};