import { useRef } from 'react'
import { Link } from 'react-router-dom'
import { useNavFix } from '../../hooks/useNavFix'

const SOCIAL_LINKS = [
  { icon: 'fab fa-facebook-f', url: 'https://www.facebook.com' },
  { icon: 'fab fa-twitter', url: 'https://www.twitter.com' },
  { icon: 'fab fa-instagram', url: 'https://www.instagram.com' },
  { icon: 'fab fa-linkedin-in', url: 'https://www.linkedin.com' },
]

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

const FOOTER_SERVICES_1 = [
  { label: 'Electro-Mechanical Works', path: '/service' },
  { label: 'Landscaping &amp; Fencing Works', path: '/service' },
  { label: 'Building Contracting Works', path: '/service' },
  { label: 'Interior &amp; Fit-Out Works', path: '/service' },
]

const FOOTER_SERVICES_2 = [
  { label: 'Metal Construction &amp; Fabrications', path: '/service' },
  { label: 'Chiller Hot &amp; Cool Solutions', path: '/service' },
  { label: 'Misting Solutions', path: '/service' },
  { label: 'Adiabatic Pre-Cooling System', path: '/service' },
]

const FOOTER_LINKS = [
  { label: 'About Profen Engineering', path: '/about' },
  { label: 'Our Services', path: '/service' },
  { label: 'Our Projects', path: '/project' },
  { label: 'Reach Us', path: '/contact' },
]

export default function Footer() {
  const ref = useRef(null)
  useNavFix(ref)

  return (
    <footer ref={ref}>
      <style id="elementor-post-1098">{`
.elementor-1098 .elementor-element.elementor-element-6bbd41e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1098 .elementor-element.elementor-element-6bbd41e:not(.elementor-motion-effects-element-type-background), .elementor-1098 .elementor-element.elementor-element-6bbd41e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#01003D;}.elementor-1098 .elementor-element.elementor-element-4b4c392{--display:flex;}.elementor-1098 .elementor-element.elementor-element-7a7bb64 .label{color:#FFFFFF;font-size:12px;}.elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text, .elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text a, .elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text span{color:#FFFFFF;font-size:14px;}.elementor-1098 .elementor-element.elementor-element-953ab14{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:100px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-1098 .elementor-element.elementor-element-c5d6f05 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-8e3fc7b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-c7fa0b1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:50px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-a684744 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:50px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-66137ae{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
      `}</style>
      <div className="elementor elementor-1098" data-elementor-id="1098" data-elementor-type="wp-post">
        <div className="elementor-element elementor-element-6bbd41e e-con-full e-flex e-con e-parent" data-e-type="container" data-element_type="container" data-id="6bbd41e">

          {/* Footer widgets */}
          <div className="elementor-element elementor-element-953ab14 e-flex e-con-boxed e-con e-child" data-e-type="container" data-element_type="container" data-id="953ab14">
            <div className="e-con-inner">
              {[
                {
                  title: 'Get in Touch',
                  content: (
                    <div className="footer-widget">
                      <div className="widget widget_about">
                        <div className="th-widget-about">
                          <div className="about-logo" style={{ maxWidth: 180 }}>
                            <a href="/"><img alt="logo footer" src="/assets/images/logo_pe-Rd-Wh-001.svg" /></a>
                          </div>
                          <p className="about-text" style={{ color: '#f5f5f5', lineHeight: 1.8 }}>
                            Profen Engineering LLC is a leading multidisciplinary engineering and construction company based in Dubai, UAE. With years of expertise, we deliver comprehensive MEP, building contracting, metal fabrication, interior fit-out, landscaping, and misting solutions.
                          </p>
                          <div className="th-widget-social">
                            {SOCIAL_LINKS.map((s, i) => (
                              <a key={i} href={s.url} target="_blank" rel="noopener noreferrer"><i className={s.icon}></i></a>
                            ))}
                          </div>
                        </div>
                      </div>
                    </div>
                  ),
                },
                {
                  title: 'Contact Info',
                  content: (
                    <div className="footer-widget">
                      <div className="widget widget_contact">
                        <h3 className="widget_title" style={{ color: '#ED1C24' }}>Contact Info</h3>
                        <div className="th-widget-contact">
                          {CONTACT_INFO.map((c, i) => (
                            <div key={i} className="contact-feature">
                              <div className="icon-btn"><i className={c.icon}></i></div>
                              <div className="media-body">
                                {c.label && <p className="box-label" style={{ color: '#aaa', margin: 0, fontSize: 12 }}>{c.label}</p>}
                                <p className="box-text" style={{ margin: 0 }}><a href={c.link} {...(c.target ? { target: c.target, rel: 'noopener noreferrer' } : {})} style={{ color: '#fff' }}>{c.text}</a></p>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  ),
                },
                {
                  title: 'Services 1',
                  content: (
                    <div className="widget widget_nav_menu footer-widget">
                      <h3 className="widget_title" style={{ color: '#ED1C24' }}>Our Services</h3>
                      <div className="menu-all-pages-container">
                        <ul className="menu">
                          {FOOTER_SERVICES_1.map((item, i) => (
                            <li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  ),
                },
                {
                  title: 'Services 2',
                  content: (
                    <div className="widget widget_nav_menu footer-widget">
                      <h3 className="widget_title" style={{ color: '#ED1C24' }}>More Services</h3>
                      <div className="menu-all-pages-container">
                        <ul className="menu">
                          {FOOTER_SERVICES_2.map((item, i) => (
                            <li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  ),
                },
                {
                  title: 'Useful Links',
                  content: (
                    <div className="widget widget_nav_menu footer-widget">
                      <h3 className="widget_title" style={{ color: '#ED1C24' }}>Useful Links</h3>
                      <div className="menu-all-pages-container">
                        <ul className="menu style2">
                          {FOOTER_LINKS.map((item, i) => (
                            <li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  ),
                },
              ].map((section, i) => (
                <div key={i} className={`elementor-element elementor-element-${['c5d6f05', '8e3fc7b', 'c7fa0b1', 'a684744', '66137ae'][i] || 'extra'} e-con-full e-flex e-con e-child`} data-e-type="container" data-element_type="container" data-id={['c5d6f05', '8e3fc7b', 'c7fa0b1', 'a684744', '66137ae'][i] || 'extra'}>
                  <div className="elementor-element elementor-element-7a7bb64 elementor-widget elementor-widget-rakarabout" data-id="7a7bb64" data-element_type="widget" data-e-type="widget" data-widget_type="rakarabout.default">
                    <div className="elementor-widget-container">
                      {section.content}
                    </div>
                  </div>
                </div>
              ))}

              {/* WhatsApp Chat Embed — replaced Elfsight widget with direct WhatsApp link */}
              <div className="elementor-element elementor-element-32890cd elementor-widget elementor-widget-shortcode" data-e-type="widget" data-element_type="widget" data-id="32890cd" data-widget_type="shortcode.default">
                <div className="elementor-widget-container">
                  <div className="elementor-shortcode">
                    <a
                      href="https://wa.me/971564148980"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="footer-whatsapp-link"
                      style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#25D366', textDecoration: 'none' }}
                    >
                      <i className="fab fa-whatsapp" style={{ fontSize: 20 }}></i>
                      <span>Chat with us on WhatsApp</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Copyright */}
          <div className="elementor-element elementor-element-d43fabc e-flex e-con-boxed e-con e-child" data-e-type="container" data-element_type="container" data-id="d43fabc">
            <div className="e-con-inner">
              <div className="elementor-element elementor-element-ed6bb39 elementor-widget elementor-widget-html" data-e-type="widget" data-element_type="widget" data-id="ed6bb39" data-widget_type="html.default">
                <div className="elementor-widget-container">
                  <p className="copyright-text">Copyright <i className="fas fa-copyright"></i> 2026 <a href="/">Profen Engineering LLC</a>. All Rights Reserved.</p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </footer>
  )
}
