import { useRef } from 'react'
import { useNavFix } from '../../hooks/useNavFix'

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

  return (
    <div
      className="elementor-element elementor-element-00d41d8 e-flex e-con-boxed e-con e-parent"
      data-id="00d41d8"
      data-element_type="container"
      data-e-type="container"
      data-settings={JSON.stringify({ background_background: "classic" })}
      style={{
        backgroundImage: 'url(/assets/images/pattern_bg_5.png)',
        backgroundPosition: 'center center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover'
      }}
    >
      <div className="e-con-inner" ref={ref}>
        <div
          className="elementor-element elementor-element-36ac6ff e-con-full e-flex e-con e-child"
          data-id="36ac6ff"
          data-element_type="container"
          data-e-type="container"
        >
          {/* Section Title widget */}
          <div
            className="elementor-element elementor-element-c4d613e elementor-widget elementor-widget-rakarsectiontitle"
            data-id="c4d613e"
            data-element_type="widget"
            data-e-type="widget"
            data-widget_type="rakarsectiontitle.default"
          >
            <div className="elementor-widget-container">
              <div className="title-area text-left">
                <span className="sub-title">
                  <span className="line"></span>
                  <img decoding="async" src="/assets/images/title_icon2.svg" alt="Shape" />
                  About Us
                </span>
                <h2 className="sec-title">Profen Engineering: No.1 Climate Control Solutions</h2>
                <p>Profen Engineering, your trusted partner in comprehensive Sustainability, MEP &amp; Construction Services. With a commitment to excellence, innovation, and client satisfaction, we stand as a beacon of reliability in the construction industry. We are a highly motivated and passionate team of skilled professionals with a strong focus on delivering exceptional Climate Control, MEP &amp; Construction services.</p>
              </div>
            </div>
          </div>

          {/* Checklist HTML widget */}
          <div
            className="elementor-element elementor-element-13df23c elementor-widget elementor-widget-html"
            data-id="13df23c"
            data-element_type="widget"
            data-e-type="widget"
            data-widget_type="html.default"
          >
            <div className="elementor-widget-container">
              <div className="checklist">
                <ul>
                  <li>Professional &amp; Certified</li>
                  <li>Uncompromised Quality Check</li>
                </ul>
              </div>
            </div>
          </div>

          {/* Nested child for button + call */}
          <div
            className="elementor-element elementor-element-ce00ca3 e-con-full e-flex e-con e-child"
            data-id="ce00ca3"
            data-element_type="container"
            data-e-type="container"
          >
            {/* Button widget */}
            <div
              className="elementor-element elementor-element-e9d1a26 elementor-widget elementor-widget-rakarbutton"
              data-id="e9d1a26"
              data-element_type="widget"
              data-e-type="widget"
              data-widget_type="rakarbutton.default"
            >
              <div className="elementor-widget-container">
                <div className="btn-wrapper">
                  <a className="th-btn th_btn style4" href="../contact/index.html">
                    Discover More<i className="far fa-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>

            {/* Call button HTML widget */}
            <div
              className="elementor-element elementor-element-b547d92 elementor-widget elementor-widget-html"
              data-id="b547d92"
              data-element_type="widget"
              data-e-type="widget"
              data-widget_type="html.default"
            >
              <div className="elementor-widget-container">
                <div className="call-btn">
                  <div className="play-btn">
                    <i className="fas fa-phone"></i>
                  </div>
                  <div className="media-body">
                    <p className="box-label">Call Us</p>
                    <h6 className="box-link"><a href="tel:+97143200869">+971 4 320 0869</a></h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right column - image */}
        <div
          className="elementor-element elementor-element-c65aa33 e-con-full e-flex e-con e-child"
          data-id="c65aa33"
          data-element_type="container"
          data-e-type="container"
        >
          <div
            className="elementor-element elementor-element-3e63e89 elementor-widget elementor-widget-rakarimage"
            data-id="3e63e89"
            data-element_type="widget"
            data-e-type="widget"
            data-widget_type="rakarimage.default"
          >
            <div className="elementor-widget-container">
              <div className="rounded-img1">
                <img decoding="async" src="/assets/images/cooling-EDIT.jpg" alt="cooling EDIT" />
              </div>
            </div>
          </div>
        </div>

        {/* Bottom row - features/process */}
        <div
          className="elementor-element elementor-element-b680789 e-con-full e-flex e-con e-child"
          data-id="b680789"
          data-element_type="container"
          data-e-type="container"
        >
          <div
            className="elementor-element elementor-element-5e5ca9a elementor-widget elementor-widget-rakarfeatures"
            data-id="5e5ca9a"
            data-element_type="widget"
            data-e-type="widget"
            data-widget_type="rakarfeatures.default"
          >
            <div className="elementor-widget-container">
              <div className="contact-process-wrap no-bg">
                <div className="contact-process">
                  <div className="box-number">01</div>
                  <div className="media-body">
                    <h3 className="box-title">Book Online</h3>
                    <p className="box-text">Book consultations, inspections, or service calls at your convenience</p>
                  </div>
                </div>
                <div className="contact-process">
                  <div className="box-number">02</div>
                  <div className="media-body">
                    <h3 className="box-title">Detailed Estimate</h3>
                    <p className="box-text">Estimates based on your project size, scope, and unique requirements</p>
                  </div>
                </div>
                <div className="contact-process">
                  <div className="box-number">03</div>
                  <div className="media-body">
                    <h3 className="box-title">Work Planning</h3>
                    <p className="box-text">We understand your project goals, requirements, and budget and identify the full scope of work and define clear deliverables</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}