import { Fragment } from 'react';

import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

import { Header } from '../../../shared/components/header.tsx';
import { Footer } from '../../../shared/components/footer.tsx';
import { usePageTitle } from '../../../shared/hooks/usePageTitle.ts';

const aboutFacts = [
  {
    title: 'Год основания',
    value: '1841',
    description: 'Сбербанк ведёт свою историю от Сберегательных касс Российской империи.',
  },
  {
    title: 'Генеральный директор',
    value: 'Герман Греф',
    description: 'Глава ПАО «Сбербанк» с 2007 года, проводит масштабную цифровую трансформацию.',
  },
  {
    title: 'Офисы и представительства',
    value: 'Крупнейшая сеть в России и СНГ',
    description: 'Более 14 тысяч отделений и присутствие в большинстве регионов страны.',
  },
];

const performanceMetrics = [
  { label: 'Совокупные активы', value: '≈ 45 трлн ₽', note: 'по МСФО за 2023 год' },
  { label: 'Чистая прибыль', value: '≈ 1,5 трлн ₽', note: 'рекордный результат 2023 года' },
  { label: 'Доля безналичных операций', value: '> 95%', note: 'в розничных транзакциях клиентов' },
];

const strategicDirections = [
  'Развитие экосистемы сервисов: финансы, e-commerce, телемедицина, образование и логистика.',
  'Лидерство в технологиях ИИ и машинного обучения для обслуживания клиентов и внутренней автоматизации.',
  'Ответственное развитие: снижение углеродного следа, «зелёные» ипотека и облигации, благотворительные программы.',
];

export const AboutPage: React.FC = () => {
  usePageTitle('О компании');
  return (
    <Fragment>
      <Header />
      <Box component="main" sx={{ pt: { xs: 12, md: 18 }, pb: 8, backgroundColor: 'background.default' }}>
        <Container maxWidth="lg">
          <Stack spacing={4}>
            <Stack spacing={1} textAlign="center">
              <Typography variant="h2" component="h1">
                О компании «Сбербанк»
              </Typography>
              <Typography color="text.secondary" maxWidth={720} alignSelf="center">
                Крупнейший финансовый институт России и Восточной Европы, формирующий экосистему цифровых сервисов для миллионов клиентов.
              </Typography>
            </Stack>

            <Grid container spacing={2}>
              {aboutFacts.map((fact) => (
                <Grid key={fact.title} size={{ xs: 12, md: 4 }}>
                  <Card variant="outlined" sx={{ height: '100%' }}>
                    <CardContent>
                      <Typography variant="overline" color="text.secondary">
                        {fact.title}
                      </Typography>
                      <Typography variant="h5" component="p" sx={{ mt: 1 }}>
                        {fact.value}
                      </Typography>
                      <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
                        {fact.description}
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>

            <Card variant="outlined">
              <CardContent>
                <Typography variant="h5" gutterBottom>
                  Финансовые показатели
                </Typography>
                <Grid container spacing={2}>
                  {performanceMetrics.map((metric) => (
                    <Grid key={metric.label} size={{ xs: 12, md: 4 }}>
                      <Typography variant="subtitle2" color="text.secondary">
                        {metric.label}
                      </Typography>
                      <Typography variant="h4">{metric.value}</Typography>
                      <Typography variant="body2" color="text.secondary">
                        {metric.note}
                      </Typography>
                    </Grid>
                  ))}
                </Grid>
              </CardContent>
            </Card>

            <Card variant="outlined">
              <CardContent>
                <Typography variant="h5" gutterBottom>
                  Стратегия и направления роста
                </Typography>
                <Stack component="ul" spacing={1} sx={{ pl: 3, listStyle: 'disc' }}>
                  {strategicDirections.map((item) => (
                    <Typography key={item} component="li" variant="body1">
                      {item}
                    </Typography>
                  ))}
                </Stack>
              </CardContent>
            </Card>

            <Card variant="outlined">
              <CardContent>
                <Typography variant="h5" gutterBottom>
                  Социальная роль
                </Typography>
                <Typography variant="body1" color="text.secondary">
                  Сбербанк активно поддерживает предпринимателей и частных клиентов, инвестирует в инфраструктуру, образование и социальные проекты. 
                  Особое внимание уделяется доступности финансовых услуг, цифровой безопасности и развитию регионов присутствия.
                </Typography>
              </CardContent>
            </Card>
          </Stack>
        </Container>
      </Box>
      <Footer />
    </Fragment>
  );
};
