'use client';

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

const StyledBox = styled(Box)`
    padding: 154px 0 180px;
    background-image: url('/static/images/hero.png');
    background-position: center;
    background-size: cover;

    position: relative;

    &:after {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.3);
        content: '';
    }

    .contentZIndex {
        position: relative;
        z-index: 3;
    }

    .hero-title {
        color: #fff;
        font-size: 64px;
        font-style: normal;
        font-weight: 600;
        line-height: 64px;
        max-width: 550px;
        margin-bottom: 16px;
    }

    .hero-subtitle {
        color: #fff;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 48px;
    }

    .hero-btn {
        padding: 10px 16px;
        border-radius: 8px;
        background: #0076be;
        color: #fff;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.72px;
        text-transform: capitalize;
    }

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

            .hero-title {
                font-size: 32px;
                line-height: normal;
            }
            .hero-subtitle {
                font-size: 18px;
                line-height: normal;
            }
        }
    `}
`;

type Props = {};

const HeroSection = (props: Props) => {
    const t = useMyTranslation();

    return (
        <StyledBox>
            <Container>
                <Typography className='hero-title contentZIndex' data-aos='fade-up'>
                    {t('hero_title')}
                </Typography>
                <Typography className='hero-subtitle contentZIndex' data-aos='fade-up'>
                    {t('hero_subtitle')}
                </Typography>
                <Button
                    data-aos='fade-up'
                    disableElevation
                    className='hero-btn contentZIndex'
                    startIcon={
                        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>
                            <path
                                d='M21 8C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8H21ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z'
                                fill='white'
                            />
                        </svg>
                    }
                >
                    {t('contacts')}
                </Button>
            </Container>
        </StyledBox>
    );
};

export default HeroSection;
