import React, { Component } from 'react';
import './styles/contactUs.css';
import { AiFillPhone, AiFillMail } from "react-icons/ai";
import { FaMapMarkerAlt, FaLinkedinIn, FaTwitter, FaGithub, FaGooglePlusG } from "react-icons/fa";

class ContactUs extends Component {
    render() {
        return (
            <div>
                <div className='contact'>
                    <div className='container contact__container'>
                        <aside className='contact__aside'>
                            <h2 className="gradient_text">Contact Us</h2>
                            <p>
                                If you have any feedback or comments on our service, or want to contact our administrative staff, please let us know.
                            </p>
                            <ul className='contact__details'>
                                <li>
                                    <AiFillPhone/>
                                    <h5>+342243935</h5>
                                </li>
                                <li>
                                    <AiFillMail/>
                                    <h5>support@gmail.com</h5>
                                </li>
                                <li>
                                    <FaMapMarkerAlt/>
                                    <h5>Malabe, Sri lanka</h5>
                                </li>
                            </ul>
                            <ul className='contact__socials'>
                                <li>
                                    <a href='#'><FaLinkedinIn/></a>
                                </li>
                                <li>
                                    <a href='#'><FaTwitter/></a>
                                </li>
                                <li>
                                    <a href='#'><FaGithub/></a>
                                </li>
                                <li>
                                    <a href='#'><FaGooglePlusG/></a>
                                </li>
                            </ul>
                        </aside>
                        <form className='contact__form'>
                            <div className='form__name'>
                                <input type='text' name='First Name' placeholder='First Name' required />
                                <input type='text' name='Last Name' placeholder='Last Name' required />
                            </div>
                            <input type='email' name='Email Address' placeholder='Email Address' required />
                            <textarea name='Message' placeholder='Message' rows='7' required></textarea>
                            <button type='submit' className='contact_us_btn'>
                                Send Message
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

export default ContactUs;