import './footer.css'
import logo from './logo.svg'
import write from './send.svg'
import phone from './phone.svg'
import iconButton from "../../styles/iconButton.svg"
import "../../styles/styles.css"


export const Footer: React.FC<any> = ({ text, language }) => {
    const userLanguage = language === 'RU';
    const { cardLarge, cardLarge1, cardSmall, cardSmall1, copyright } = text

    return (
        <div className="footer__container">
            <div className='footer__main-block'>
                <div className='footer__block_1'>
                    <div className='footer__block_name'>
                        <p className='footer__name'>Graff.estate</p>
                        <p className='footer__name_color'>stream.</p>
                    </div>
                    <div className='footer__block_contacts'>
                        <p className='contacts__title'>{text.social}</p>
                        <div className='footer__container_social'>
                            <a href='https://www.facebook.com/GRAFFinteractive' target='_blank' rel="noreferrer" className='footer__social'>Facebook</a>
                            <a href='https://www.instagram.com/graffinteractive/' target='_blank' rel="noreferrer" className='footer__social'>Instagram</a>
                            <a href='https://www.youtube.com/channel/UCveYBNLVeGxgsDsfhrVxNoA' target='_blank' rel="noreferrer" className='footer__social'>YouTube</a>
                            <a href='https://vk.com/graffinteractive' target='_blank' rel="noreferrer" className='footer__social'>VK</a>
                        </div>
                    </div>
                    <div className='footer__block_copyright'>
                        <img alt='logo' src={logo} className='footer__logo'></img>
                        <div className='copyright__caption'>
                            <p className='copyright'>{copyright.caption}</p>
                            <p className='copyright'>
                                {copyright.caption1}
                            </p>
                        </div>
                    </div>
                </div>
                <div className='footer__block_2'>
                    <div className='footer__col1 footer__col1_mobile'>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>info@graff.tech</p>
                                <p className='card__tel'>+7 800 770 00 76</p>
                            </div>
                            <div className='card__adress'>
                                <p className='card__street'>{cardLarge.address}</p>
                                <p className='card_city'>{cardLarge.city}</p>
                            </div>
                            <p className='card_country'>{cardLarge.country}</p>
                        </div>
                        <div className='footer__card_2'>
                            <a className='link' href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}>
                                <div className='ellipse__container'>
                                    <div className="main-block__icon_container">
                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                    </div>
                                </div>
                                <div className='card__write'>
                                    <img alt='icon' src={write} className='card__icon'></img>
                                    <p className='card__caption'>{cardSmall.caption}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div className='footer__col2 footer__col2_mobile'>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>waseem@graff.tech</p>
                                <p className='card__tel'>+971 50 938 8902</p>
                            </div>
                            <div className='card__adress card__adress_uae'>
                                <p className='card_city'>{cardLarge1.address}</p>
                            </div>
                            <p className='card_country'>{cardLarge1.country}</p>
                        </div>
                        <div className='footer__card_2'>
                            <a className='link' href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}>
                                <div className='ellipse__container'>
                                    <div className="main-block__icon_container">
                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                    </div>
                                </div>
                                <div className='card__write'>
                                    <img alt='icon' src={phone} className='card__icon'></img>
                                    <p className='card__caption'>{cardSmall1.caption}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div className='footer__column_mobile'>
                        <a className='link' href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}>
                            <div className='footer__card_2'>
                                <div className='ellipse__container'>
                                    <div className="main-block__icon_container">
                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                    </div>
                                </div>

                                <div className='card__write'>
                                    <img alt='icon' src={write} className='card__icon'></img>
                                    <p className='card__caption'>{cardSmall.caption}</p>
                                </div>
                            </div>
                        </a>
                        <div className='footer__card_2'>
                            <a className='link' href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}>
                                <div className='ellipse__container'>
                                    <div className="main-block__icon_container">
                                        <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                    </div>
                                </div>
                                <div className='card__write'>
                                    <img alt='icon' src={phone} className='card__icon'></img>
                                    <p className='card__caption'>{cardSmall1.caption}</p>
                                </div>
                            </a>
                        </div>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>info@graff.tech</p>
                                <p className='card__tel'>+7 800 770 00 76</p>
                            </div>
                            <div className='card__adress'>
                                <p className='card__street'>{cardLarge.address}</p>
                                <p className='card_city'>{cardLarge.city}</p>
                            </div>
                            <p className='card_country'>{cardLarge.country}</p>
                        </div>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>waseem@graff.tech</p>
                                <p className='card__tel'>+971 50 938 8902</p>
                            </div>
                            <div className='card__adress card__adress_uae'>
                                <p className='card_city'>{cardLarge1.address}</p>
                            </div>
                            <p className='card_country'>{cardLarge1.country}</p>
                        </div>
                    </div>

                </div>
                <div className='footer__block_copyright_mobile'>
                    <img alt='logo' src={logo} className='footer__logo'></img>
                    <div className='copyright__caption'>
                        <a href={userLanguage ? 'https://graff.tech/privacypolicy' : 'http://en.graff.tech/privacypolicyeng'} target="_blank" rel="noreferrer" className='copyright'>{copyright.caption}</a>
                        <p className='copyright'>
                            {copyright.caption1}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}