frontPanel/src/pages/PersonalizationAI/PersonalizationAI.tsx

import { Box, Container, Typography, TextField, Button, List, ListItem, IconButton } from "@mui/material";
import { InfoPopover } from '@ui_kit/InfoPopover';
import CopyIcon from "@/assets/icons/CopyIcon";
import GenderAndAgeSelector from "./GenderAndAgeSelector";
import { useState } from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import Collapse from '@mui/material/Collapse';
import { ArrowDownIcon } from "../../assets/icons/questionsPage/ArrowDownIcon";
import { useTheme } from "@mui/material";

const PURPLE = "#7E2AEA";
const GREY_TEXT = "#A0A0A0";
const GREY_BORDER = "#E0E0E0";
const GREY_ICON = "#B0B0B0";
const BLOCK_RADIUS = "16px";
const BLOCK_PX = "32px";
const BLOCK_PY = "24px";

export default function PersonalizationAI() {
  const [gender, setGender] = useState('');
  const [linksOpen, setLinksOpen] = useState(true);
  const theme = useTheme();

  return (
    <Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px" }}>
      <Typography variant="h5" color={theme.palette.grey3.main} fontWeight={700} sx={{ fontSize: 24, letterSpacing: "-0.2px" }}>
        Персонализация вопросов с помощью AI
      </Typography>
      <Typography sx={{
        color: theme.palette.grey3.main, fontSize: "18px", maxWidth: 796, m: 0,
        mt: "19px",
        letterSpacing: "0.009px",
        wordSpacing: "0.1px",
        lineHeight: "21.4px"
      }}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </Typography>

      {/* Первый белый блок */}
      <Box sx={{
        bgcolor: "#fff",
        borderRadius: "12px",
        mt: "40px",
        p: "20px 20px 30px",
        boxShadow: "none",
        maxWidth: "796px"
      }}>
        <GenderAndAgeSelector gender={gender} setGender={setGender} />




        {/* Ссылка */}
        <Box sx={{ mt: "34px" }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
            <Typography sx={{ color: theme.palette.grey3.main, fontSize: "18px", fontWeight: 500 }}>Ссылка</Typography>
            <InfoPopover />
          </Box>
          <Typography
            sx={{
              fontSize: "14px",
              lineHeight: "100%",
              letterSpacing: "0 %",
              color: theme.palette.grey2.main,
              mt: "16px"
            }}
          >
            Вставьте ссылку со всеми utm-метками
          </Typography>
          <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mt: "6px" }}>
            <CustomTextField
              placeholder="linkexample.com"
              maxLength={5}
              sxForm={{
                width: "615px",
              }}

            />
            <Button
              variant="contained"
              sx={{
                bgcolor: PURPLE,
                borderRadius: "8px",
                width: "130px",
                height: "48px",
                boxShadow: "none",
                textTransform: "none",
                fontSize: "18px",
                '&:hover': { bgcolor: PURPLE },
              }}
            >
              Ок
            </Button>
          </Box>
        </Box>
      </Box>

      {/* Второй белый блок */}
      <Box sx={{
        maxWidth: "796px",
        bgcolor: "#fff",
        borderRadius: "12px",
        p: "20px",
        boxShadow: "0px 4px 32px 0px #7E2AEA14",
        mt: "24px"
      }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
          <Typography sx={{ fontSize: "18px", fontWeight: 500, color: theme.palette.grey3.main }}>
            Ваши сохраненные ссылки
          </Typography>
          <IconButton
            sx={{ cursor: 'pointer', color: PURPLE, display: 'flex', alignItems: 'center', transition: 'transform 0.2s', transform: linksOpen ? 'rotate(0deg)' : 'rotate(180deg)' }}
            onClick={() => setLinksOpen((prev) => !prev)}
            size="large"
          >
            <ArrowDownIcon style={{ width: "18px", height: "18px" }} />
          </IconButton>
        </Box>
        <Collapse in={linksOpen} timeout="auto" unmountOnExit sx={{ mt: "3px" }}>
          <List sx={{ gap: '8px', p: 0, m: 0 }}>
            {[1, 2, 3, 4, 5].map((_, idx) => (
              <ListItem
                key={idx}
                disablePadding
                sx={{
                  bgcolor: "#F2F3F7",
                  borderRadius: "10px",
                  p: "13px 14px 13px 20px",
                  mb: "8px",
                  maxWidth: "756px",
                  display: "flex",
                  alignItems: "center",
                  transition: 'background 0.2s, border 0.2s',
                  '& .MuiListItemSecondaryAction-root': {
                    display: 'flex',
                    alignItems: 'center',
                    gap: '12px',
                    width: "60px",
                    justifyContent: "space-between",
                    
                  },
                }}
                secondaryAction={
                  <>
                    <IconButton edge="end" aria-label="info" sx={{ color: PURPLE, p: 0, width: 18, height: 18 }}>
                      <InfoPopover />
                    </IconButton>
                    <IconButton edge="end" aria-label="copy" sx={{ color: PURPLE, p: 0, width: 18, height: 18, marginRight: "-2px" }}>

                      <CopyIcon
                        color={PURPLE}
                      />
                    </IconButton>
                  </>
                }
              >
                <Typography sx={{ color: 'black', fontWeight: 400, fontSize: "16px" }}>
                  linkexample.ru
                </Typography>
              </ListItem>
            ))}
          </List>
        </Collapse>
      </Box>
    </Container>
  );
}