import { Box, Typography, useTheme } from "@mui/material";
import logo_PenaHab from "../../assets/logo_PenaHab.svg";
import NavMenuItem from "../NavMenuItem";
import SectionWrapper from "../SectionWrapper";


export default function Footer() {
    const theme = useTheme();

    return (
        <SectionWrapper
            component="footer"
            maxWidth="lg"
            sx={{
                backgroundColor: theme.palette.custom.darkPurple.main,
            }}
            innerSx={{
                pt: "100px",
                pb: "75px",
                px: "20px",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: "100px",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    width: "100%",
                }}
            >
                <img src={logo_PenaHab} alt="pena logo" height={48} />
                <Box
                    sx={{
                        display: "grid",
                        flexGrow: 1,
                        justifyItems: "center",
                        gridTemplateColumns: "repeat(3, 1fr)",
                        gridTemplateRows: "repeat(3, 1fr)",
                        rowGap: "18px",
                    }}
                >
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                    <NavMenuItem text="Меню 1" />
                </Box>
                <Typography
                    variant="medium"
                    sx={{
                        maxWidth: "275px",
                    }}
                >
                    Сервисы  помогают предпринимателям, маркетологам и агентствам
                    сделать интернет-маркетинг прозрач
                </Typography>
            </Box>
            <Typography variant="medium">Конструктор маркетинговых решений. © 2022</Typography>
        </SectionWrapper>
    );
};