/* eslint-disable @next/next/no-img-element */
'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;
    background-image: url('/static/images/services-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    &:after {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #07275ccc;

        content: '';
    }

    .services-container {
        position: relative;
        z-index: 3;
    }

    .services-title {
        color: #fff;
        text-align: center;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 111.111% */

        margin-bottom: 60px;
    }

    .services-card-inner {
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.06);
        padding: 37px 24px 42px;
        height: 100%;
    }

    .services-card-title {
        color: #1f6bbd;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
        margin-bottom: 12px;
    }
    .services-card-text {
        color: #33517d;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        max-width: 276px;
        margin: 0 auto;
    }
    .services-card-img {
        width: 116px;
        height: 116px;
        display: block;
        margin: 0 auto;
        margin-bottom: 25px;
    }

    ${({ theme }) => css`
        ${theme.breakpoints.down('md')} {
            padding: 40px 0;

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

type Props = {};

const OurServices = (props: Props) => {
    const t = useMyTranslation();
    const [cards] = useState([
        {
            title: 'air_transport',
            text: 'air_transport__subtitle',
            imgSrc: '/static/images/service1.png',
        },
        {
            title: 'car_transport',
            text: 'car_transport__subtitle',
            imgSrc: '/static/images/service2.png',
        },
        {
            title: 'water_transport',
            text: 'water_transport__subtitle',
            imgSrc: '/static/images/service3.png',
        },
        {
            title: 'railway_transport',
            text: 'railway_transport__subtitle',
            imgSrc: '/static/images/service1.png',
        },
        {
            title: 'warehouse_yivu_and_guanchjou',
            text: 'warehouse_yivu_and_guanchjou__subtitle',
            imgSrc: '/static/images/service2.png',
        },
        {
            title: 'customs_office_service',
            text: 'customs_office_service__subtitle',
            imgSrc: '/static/images/service3.png',
        },
    ]);

    return (
        <StyledBox id='services'>
            <Container className='services-container'>
                <Typography className='services-title' data-aos='fade-up'>
                    {t('our_services')}
                </Typography>
                <Grid container spacing={'28px'}>
                    {cards.map((card, index) => {
                        return (
                            <Grid item xs={12} sm={6} md={4} key={index} className='card' data-aos='fade-up'>
                                <div className='services-card-inner'>
                                    <img src={card.imgSrc} className='services-card-img' alt='' />
                                    <Typography className='services-card-title'>{t(card.title)}</Typography>
                                    <Typography className='services-card-text'>{t(card.text)}</Typography>
                                </div>
                            </Grid>
                        );
                    })}
                </Grid>
            </Container>
        </StyledBox>
    );
};

export default OurServices;
