import Breadcrumb from '../components/sections/Breadcrumb'
import SectionTitle from '../components/sections/SectionTitle'
import ContactInfo from '../components/sections/ContactInfo'
import ContactForm from '../components/sections/ContactForm'
import GoogleMap from '../components/sections/GoogleMap'
import Divider from '../components/sections/Divider'
import { useNavFix } from '../hooks/useNavFix'
import { useRef, useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const CONTACT_ITEMS = [
  { icon: 'fas fa-location-dot', label: 'Our Address', value: 'Al Qusais Industrial Area-3, Dubai, UAE', link: 'https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7', target: '_blank' },
  { icon: 'fas fa-phone', label: 'Phone Number', value: '+971 4 320 0869', link: 'tel:+97143200869' },
  { icon: 'fas fa-envelope', label: 'Email Address', value: 'admin@profeneng.com', link: 'mailto:admin@profeneng.com' },
]

const MAP_SRC = 'https://maps.google.com/maps?q=Profen%20Engineering%20LLC%20Al%20Qusais%20Industrial%20Area%20-%20Al%20Qusais%20Industrial%20Area%203%20-%20Dubai&t=m&z=15&output=embed&iwloc=near'
const MAP_TITLE = 'Profen Engineering LLC Al Qusais Industrial Area - Al Qusais Industrial Area 3 - Dubai'

export default function Contact() {
  const ref = useRef(null)
  useNavFix(ref)
  const { pathname } = useLocation()

  useEffect(() => { window.scrollTo(0, 0) }, [pathname])

  return (
    <div ref={ref}>
      <Breadcrumb title="Contact" items={[{ link: '/', label: 'Home' }, { label: 'Contact' }]} />
      <div className="rakar-fluid">
        <div className="builder-page-wrapper">
          <div data-elementor-type="wp-page" data-elementor-id="48" className="elementor elementor-48">
            <div className="elementor-element elementor-element-ca60550 e-flex e-con-boxed e-con e-parent" data-id="ca60550" data-element_type="container" data-e-type="container">
              <div className="e-con-inner">
                <div className="elementor-element elementor-element-66ae4cc elementor-widget elementor-widget-rakarsectiontitle" data-id="66ae4cc" data-element_type="widget" data-e-type="widget" data-widget_type="rakarsectiontitle.default">
                  <div className="elementor-widget-container">
                    <SectionTitle subtitle="Get In Touch" heading="Our Contact Information" alignment="center" subtitleIcon="/assets/images/title_icon.svg" />
                  </div>
                </div>
                <div className="elementor-element elementor-element-64faaca elementor-widget elementor-widget-rakarcontactinfo" data-id="64faaca" data-element_type="widget" data-e-type="widget" data-widget_type="rakarcontactinfo.default">
                  <div className="elementor-widget-container">
                    <ContactInfo items={CONTACT_ITEMS} />
                  </div>
                </div>
              </div>
            </div>
            <div className="elementor-element elementor-element-a29b2eb e-flex e-con-boxed e-con e-parent" data-id="a29b2eb" data-element_type="container" data-e-type="container">
              <div className="e-con-inner">
                <div className="elementor-element elementor-element-55feed1 e-con-full e-flex e-con e-child" data-id="55feed1" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-62347f2 elementor-widget elementor-widget-rakarcontactform" data-id="62347f2" data-element_type="widget" data-e-type="widget" data-widget_type="rakarcontactform.default">
                    <div className="elementor-widget-container">
                      <div className="text-center text-xl-start">
                        <ContactForm heading="Get a Quote" />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="elementor-element elementor-element-3e6da81 e-con-full e-flex e-con e-child" data-id="3e6da81" data-element_type="container" data-e-type="container"></div>
              </div>
            </div>
            <div className="elementor-element elementor-element-6ac6145 e-flex e-con-boxed e-con e-parent" data-id="6ac6145" data-element_type="container" data-e-type="container">
              <div className="e-con-inner">
                <GoogleMap src={MAP_SRC} title={MAP_TITLE} />
              </div>
            </div>
            <div className="elementor-element elementor-element-55a45c7 e-con-full e-flex e-con e-parent" data-id="55a45c7" data-element_type="container" data-e-type="container">
              <Divider />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
