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


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

    return (
        <SectionWrapper
            component="footer"
            maxWidth="lg"
            outerContainerSx={{
                backgroundColor: theme.palette.custom.darkPurple.main,
            }}
            sx={{
                pt: "100px",
                pb: "75px",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: "100px",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    width: "100%",
                }}
            >
                <PenaLogo />
                <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>
    );
};