import { Box, Typography, useTheme } from "@mui/material";
import CardWithLink from "./CardWithLink";
import pena_illustration01 from "../../assets/pena_illustration01.png";
import pena_illustration03 from "../../assets/pena_illustration03.png";
import pena_illustration04 from "../../assets/pena_illustration04.png";
import UnderlinedLink from "../UnderlinedLink";
import SectionWrapper from "../SectionWrapper";


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

    return (
        <SectionWrapper
            component="section"
            maxWidth="lg"
            sx={{
                backgroundColor: theme.palette.custom.darkPurple.main,
                mb: "-90px",
            }}
            innerSx={{
                display: "flex",
                flexDirection: "column",
                gap: "93px",
                pt: "90px",
                pb: "20px",
                px: "20px",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    gap: "120px",
                    alignItems: "center",
                }}
            >
                <Typography variant="h4" sx={{ flexGrow: 1, maxWidth: "360px" }}>Интеграции, избавляющие от рутины</Typography>
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        gap: "30px",
                        alignItems: "start",
                        flexGrow: 2,
                        mt: "10px",
                    }}
                >
                    <Typography>
                        Сервисы помогают предпринимателям, маркетологам и агентствам
                        сделать интернет-маркетинг прозрачным и эффективным. С нами не придется
                        тратить рекламный бюджет впустую и терять клиентов на сайте.
                    </Typography>
                    <UnderlinedLink
                        linkHref="#"
                        text="Подробнее 🡲"
                        sx={{
                            mt: "auto",
                        }}
                    />
                </Box>
            </Box>
            <Box
                sx={{
                    display: "flex",
                    flexDirection: undefined,
                    gap: "40px",
                }}
            >
                <CardWithLink
                    headerText="Шаблонизатор"
                    text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                    isHighlighted
                    linkHref="#"
                    image={pena_illustration03}
                />
                <CardWithLink
                    headerText="Опросник"
                    text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                    linkHref="#"
                    image={pena_illustration04}
                />
                <CardWithLink
                    headerText="Сокращатель ссылок"
                    text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                    linkHref="#"
                    image={pena_illustration01}
                />
            </Box>
        </SectionWrapper>
    );
}