import Link from "next/link"

export default function Header() {
  return (
    <header className="header">
    <div className="container d-flex justify-content-between align-items-center">
      {/* LOGO */}
      <a href="index.html">
        <img src="assets/images/logo.png" alt="" />
      </a>
      {/* NAV */}
      <nav className="nav">
        <ul>
          <li>
            <a href="project.html">Projects</a>
          </li>
          {/* SERVICES DROPDOWN */}
          <li className="services-menu">
            <a href="#">
              Services
              <span className="arrow" />
            </a>
            <div className="mega-menu">
              {/* LEFT LIST */}
              <div className="menu-left">
                <h2> Services</h2>
                <div className="separator"></div>
                <ul>
                  <li data-img="img1" className="active">
                    <a href="Visualization_interior.html">
                      3D Visualization and <br /> Interior Design{" "}
                      <img src="assets/images/arrownext.png" alt="" />
                    </a>
                  </li>
                  <li data-img="img2">
                    <a href="Kitchen_bath.html">
                      Kitchen &amp; Bath Remodelling
                      <img src="assets/images/arrownext.png" alt="" />
                    </a>
                  </li>
                  <li data-img="img3">
                    <a href="Interior_remodelling.html">
                      Interior Remodelling
                      <img src="assets/images/arrownext.png" alt="" />
                    </a>
                  </li>
                  <li data-img="img4">
                    <a href="outdoor_living.html">
                      Outdoor Living &amp; Kitchens
                      <img src="assets/images/arrownext.png" alt="" />
                    </a>
                  </li>
                  <li data-img="img5">
                    <a href="Smart_home.html">
                      Smart Home &amp; <br /> Technology
                      <img src="assets/images/arrownext.png" alt="" />
                    </a>
                  </li>
                  <li data-img="img6">
                    <a href="approval,_documentation.html">
                      Approval, Documentation, <br /> and Project Supervision
                      <img src="assets/images/arrownext.png" alt="" />
                    </a>
                  </li>
                  <li data-img="img7">
                    <a href="Sunroomsenclosures.html">
                      Sunrooms &amp; Enclosures
                      <img src="assets/images/arrownext.png" alt="" />
                    </a>
                  </li>
                </ul>
              </div>
              {/* RIGHT IMAGE */}
              <div className="menu-right">
                <img
                  id="serviceImage"
                  src="assets/images/menuimages1.png"
                  alt=""
                  style={{ opacity: 1 }}
                />
              </div>
            </div>
          </li>
          <li>
            <a href="process">Our Process</a>
          </li>
          <li>
            <a href="about">About Us</a>
          </li>
          <li>
            <a href="blog">blog</a>
          </li>
          <li>
            <a href="contact">Contact</a>
          </li>
        </ul>
      </nav>
      {/* CTA */}
      <a href="contact" className="btn-primary-custom">
        Get a Quote
      </a>
    </div>
  </header>
  
  )
}