import React from 'react';
import DOMPurify from 'dompurify';
import { useIntl } from "gatsby-plugin-intl";

const Header = () => {
  const intl = useIntl();
  const header_1= DOMPurify.sanitize(intl.formatMessage({ id: "header_1" }).trim().replace(/^"|"$/g, ''));
  
  return (
    <header className="style-3 overflow-hidden" data-scroll-index="0">
      <div className="container">
        <div className="content section-padding">
          <div className="row">
            <div className="col-lg-5">
              <div className="info">
              <h1 className="h1" dangerouslySetInnerHTML={{ __html: header_1 }}></h1>
                <p className="p">{intl.formatMessage({ id: "header_2" })}</p>
                <h5 className="h5">{intl.formatMessage({ id: "get_free_quotes" })} <span className="fw-normal ms-1">{intl.formatMessage({ id: "header_3" })}</span></h5>
                <form action="contact.php" className="form mt-30" method="post">
                  <div className="row gx-3">
                    <div className="col-6">
                      <div className="form-group input-with-icon">
                        <input type="text" className="form-control" placeholder={intl.formatMessage({ id: "your_email" })} />
                        <span className="input-icon"><i className="far fa-envelope"></i></span>
                      </div>
                    </div>
                    <div className="col-6">
                      <div className="form-group">
                        <select className="form-select" defaultValue={"Your inquiry about"}>
                          <option value="">{intl.formatMessage({ id: "inquiry_about" })}</option>
                        </select>
                      </div>
                    </div>
                    <div className="col-12">
                      <button className="btn dark-butn hover-darkBlue rounded-pill w-100 mt-3">
                        <span>{intl.formatMessage({ id: "request_a_consultation" })}</span>
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="main-img">
        <img src="/assets/img/header/header_3.png" alt="" className="pattern" />
        <img src="/assets/img/header/header_3_c.png" alt="" className="circle" />
        <img src="/assets/img/header/logo_sh_l.png" alt="" className="logo_shap" />
      </div>
    </header>
  )
}

export default Header