import React from 'react'

import PropTypes from 'prop-types'

import './contact4.css'

const Contact4 = (props) => {
  return (
    <div className="contact4-contact20 thq-section-padding">
      <div className="contact4-max-width thq-section-max-width">
        <div className="contact4-section-title">
          <span className="thq-body-small">{props.content2}</span>
          <div className="contact4-content">
            <h2 className="thq-heading-2">{props.heading1}</h2>
            <p className="contact4-text2 thq-body-large">{props.content1}</p>
          </div>
        </div>
        <div className="contact4-row">
          <div className="contact4-content1">
            <svg viewBox="0 0 1024 1024" className="thq-icon-medium">
              <path d="M854 342v-86l-342 214-342-214v86l342 212zM854 170q34 0 59 26t25 60v512q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h684z"></path>
            </svg>
            <div className="contact4-contact-info">
              <div className="contact4-content2">
                <h3 className="contact4-text3 thq-heading-3">Email</h3>
              </div>
              <span className="contact4-email thq-body-small">
                {props.email1}
                <div></div>
                {props.email2}
              </span>
            </div>
          </div>
          <div className="contact4-content3">
            <svg
              viewBox="0 0 1024 1024"
              className="contact4-icon2 thq-icon-medium"
            >
              <path d="M282 460q96 186 282 282l94-94q20-20 44-10 72 24 152 24 18 0 30 12t12 30v150q0 18-12 30t-30 12q-300 0-513-213t-213-513q0-18 12-30t30-12h150q18 0 30 12t12 30q0 80 24 152 8 26-10 44z"></path>
            </svg>
            <div className="contact4-contact-info1">
              <div className="contact4-content4">
                <h3 className="contact4-text5 thq-heading-3">Phone</h3>
              </div>
              <span className="contact4-phone thq-body-small">
                {props.phone1}
              </span>
            </div>
          </div>
          <div className="contact4-content5"
          onClick={() => window.open("https://www.google.com/maps/place//data=!4m2!3m1!1s0x4799db371328f901:0x6946c5ec40a9542?sa=X&ved=1t:8290&ictx=111", "_blank")}>
            <svg
              viewBox="0 0 1024 1024"
              className="contact4-icon4 thq-icon-medium"
            >
              <path d="M512 0c-176.732 0-320 143.268-320 320 0 320 320 704 320 704s320-384 320-704c0-176.732-143.27-320-320-320zM512 512c-106.040 0-192-85.96-192-192s85.96-192 192-192 192 85.96 192 192-85.96 192-192 192z"></path>
              
            </svg>
            <div className="contact4-contact-info2">
              <div className="contact4-content6">
                <h3 className="contact4-text7 thq-heading-3">Office</h3>
              </div>
              <span className="contact4-address thq-body-small">
                {props.address1}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Contact4.defaultProps = {
  email1: '22kaen1bdi@hft-stuttgart.de',
  email2: '22wela1bdi@hft-stuttgart.de',
  content2: 'Get in touch with us today!',
  address1: 'Schellingstraße 24, 70174 Stuttgart, Germany',
  heading1: 'Contact Us',
  content1: 'Contact our dear Founders directly!',
  phone1: '+123-456-7890',

}

Contact4.propTypes = {
  email1: PropTypes.string,
  content2: PropTypes.string,
  address1: PropTypes.string,
  heading1: PropTypes.string,
  content1: PropTypes.string,
  phone1: PropTypes.string,

}

export default Contact4