'use client';
import Container from '@/components/common/Container';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Box, Grid, Typography, css, styled } from '@mui/material';
import React, { useState } from 'react';

const StyledBox = styled(Box)`
    padding: 90px 0;

    .about-title {
        color: #0076be;
        text-align: center;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;

        margin-bottom: 100px;
    }

    .about-big-img {
        width: 100%;
        max-width: 440px;
        aspect-ratio: 1/1;
    }

    .about-card-title {
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 125% */
        margin-bottom: 14px;
    }
    .about-card-text {
        color: #000;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
    }
    .about-card-img {
        width: 60px;
        height: 60px;
        display: block;
        margin-bottom: 16px;
    }

    ${({ theme }) => css`
        ${theme.breakpoints.down('md')} {
            padding: 40px 0;
            .about-big-img {
                width: 100%;
                max-width: 100%;
                aspect-ratio: 1/1;
            }

            .about-title {
                font-size: 24px;
                line-height: normal;
                margin-bottom: 30px;
            }
        }
    `}
`;

type Props = {};

const AboutSection = (props: Props) => {
    const t = useMyTranslation();
    const [cards] = useState([
        {
            title: 'good_quality',
            text: `Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.`,
            imgSrc: '/static/hero.png',
        },
        {
            title: 'fast',
            text: `Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.`,
            imgSrc: '/static/hero.png',
        },
        {
            title: 'online_watching',
            text: `Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.`,
            imgSrc: '/static/hero.png',
        },
        {
            title: 'safe_warehouse',
            text: `Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.`,
            imgSrc: '/static/hero.png',
        },
    ]);
    return (
        <StyledBox id='about'>
            <Container>
                <Typography className='about-title' data-aos='fade-up'>
                    {t('about_us')}
                </Typography>
                <Grid
                    container
                    spacing={{
                        xs: 4,
                        md: 8,
                    }}
                >
                    <Grid item xs={12} md={6} data-aos='fade-right'>
                        <img className='about-big-img' src='/static/images/airplane.png' alt='' />
                    </Grid>
                    <Grid item xs={12} md={6} data-aos='fade-left'>
                        <Grid container columnSpacing={8} rowGap={4}>
                            {cards.map((card, index) => {
                                return (
                                    <Grid item xs={12} md={6} key={index}>
                                        <img src='/static/images/airplane.png' className='about-card-img' alt='' />
                                        <Typography className='about-card-title'>{t(card.title)}</Typography>
                                        <Typography className='about-card-text'>{t(card.text)}</Typography>
                                    </Grid>
                                );
                            })}
                        </Grid>
                    </Grid>
                </Grid>
            </Container>
        </StyledBox>
    );
};

export default AboutSection;
