export default function Hvac() {
    return (
        <>
        <section className="ux-project-hero">
          <div className="container">
            {/* center content */}
            <div className="ux-project-content text-center">
              <h1 className="ux-project-title">HVAC</h1>
              <p className="ux-project-subtitle">
                Legacy reputation. Fragmented digital presence.
              </p>
            </div>
            <div className="breacampoffline">
              <p style={{ textAlign: "right" }}>
                HVAC operated with strong offline credibility but weak digital
                structure. Leads were inconsistent. Messaging lacked positioning
                clarity.
              </p>
              <p>
                Transform a traditional service provider into a modern, conversion-led
                digital engine — without losing trust.
              </p>
            </div>
          </div>
        </section>
        {/* ===========================
         CASE RESULT SECTION
      =========================== */}
        <section className="ux-result-section">
          <div className="container">
            {/* TOP BOX */}
            <div className="ux-result-box">
              {/* LEFT */}
              <div className="ux-result-left">
                <p className="ux-step-label">Amplify</p>
                <h3 className="ux-result-heading">WE BUILT:</h3>
                <div className="ux-build-grid">
                  <div className="ux-mini-card active">
                    <span>01</span>
                    <p>Clear positioning architecture</p>
                  </div>
                  <div className="ux-mini-card active">
                    <span>02</span>
                    <p>Structured service segmentation</p>
                  </div>
                  <div className="ux-mini-card active">
                    <span>03</span>
                    <p>Conversion-led landing framework</p>
                  </div>
                  <div className="ux-mini-card active">
                    <span>04</span>
                    <p>Content packaging system</p>
                  </div>
                </div>
              </div>
              {/* RIGHT */}
              <div className="ux-result-right">
                <p className="ux-step-label">Amplify</p>
                <h3 className="ux-result-heading">AI WAS USED TO:</h3>
                <div className="ux-ai-grid">
                  <div className="ux-mini-card">
                    <span>01</span>
                    <p>Rapidly test messaging variations</p>
                  </div>
                  <div className="ux-mini-card">
                    <span>02</span>
                    <p>Produce scaled content formats</p>
                  </div>
                  <div className="ux-mini-card">
                    <span>03</span>
                    <p>Optimize landing copy iterations</p>
                  </div>
                </div>
              </div>
            </div>
            {/* BOTTOM BOX */}
            <div className="ux-deliver-box">
              {/* LEFT */}
              <div className="ux-deliver-left">
                <p className="ux-step-label">Activate</p>
                <h3 className="ux-result-heading">DELIVERED:</h3>
                <ul className="ux-deliver-list">
                  <li>Marketing Website</li>
                  <li>Service Landing Funnels</li>
                  <li>Paid Campaign Creatives</li>
                  <li>Short-form Video Scripts</li>
                  <li>Structured Content System</li>
                </ul>
              </div>
              {/* CENTER */}
              <div className="ux-deliver-center">
                <img src="assets/images/Delivered.png" alt="" />
              </div>
              {/* RIGHT */}
              <div className="ux-deliver-right">
                <h3 className="ux-result-heading">RESULT:</h3>
                <p>
                  Clear digital authority. Improved lead capture flow. Scalable
                  marketing infrastructure.
                </p>
                <a href="#" className="ux-result-btn">
                  Build your digital engine
                </a>
              </div>
            </div>
          </div>
        </section>
        {/* TOP CTA */}
        <div className="ux-footer-hero">
          <div className="container">
            <div className="ux-footer-hero-content text-center">
              <p className="ux-section-label">AAideA</p>
              <h2 className="ux-footer-title">
                If the idea is strong, we'll scale it.
              </h2>
              <div className="ux-hero-actions">
                <a href="#" className="btn ux-btn-primary">
                  Start a Project{" "}
                  <span className="ux-btn-icon">
                    <img src="assets/images/arrowbuttonwhite.svg" alt="" />
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </>
      
    );
  }