import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import WideTemplCard from "@components/wideTemplCard";
import TemplCardPhonePink from "@components/templCardPhonePink";
import SectionWrapper from "@components/SectionWrapper";
import { PenaLink } from "@frontend/kitui";
import { Link as RouterLink } from "react-router-dom";

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

  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <SectionWrapper
      component="section"
      maxWidth="lg"
      outerContainerSx={{
        backgroundColor: theme.palette.bg.dark,
        mb: "-68px",
      }}
      sx={{
        pt: upMd ? "90px" : "50px",
        px: isTablet ? (upMd ? "40px" : "18px") : "20px",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: upMd ? "row" : "column",
          gap: isTablet ? "16.5%" : "3.5%",
        }}
      >
        <Typography
          variant="h4"
          sx={{
            flexGrow: 1,
            flexBasis: "31%",
            maxWidth: "50%",
          }}
        >
          Хватит сливать бюджет!
        </Typography>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: "30px",
            alignItems: "start",
            flexGrow: 1,
            flexBasis: "65.5%",
            mt: upMd ? "10px" : "30px",
          }}
        >
          <Typography sx={{ fontSize: upMd ? "18px" : "17px" }} maxWidth="560px">
          Надежные сервисы, которые не подведут. Увеличение эффективности рекламной кампании и увеличение ROI и ROMI на десятки процентов при использовании всех наших продуктов.
          </Typography>
        </Box>
      </Box>
      {upMd ? <WideTemplCard name="PenaDoc" desc="Сервис автоматизации, избавляющий от рутины 
в документообороте. 1 раз делаешь шаблон и используешь всю жизнь " light={false} sx={{ marginTop: "126px" }} /> : <TemplCardPhonePink />}

      
    </SectionWrapper>
  );
}