"use client";

/**
 * 1:1 translation of doormile-site/includes/layout/header.php.
 * Only PHP syntax, href routes, and image paths are replaced.
 * All Elementor wrapper divs, classes, data-* attributes, IDs, srcset/sizes, inline styles, and the trailing <style> block are preserved verbatim.
 * Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
 */

import { MouseEvent, useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useHeaderUI } from "./HeaderUIProvider";

// Mirror of header.php $current_page_map (lines 24-35)
const CURRENT_PAGE_MAP: Record<string, string> = {
  "/": "home",
  "/how-it-works": "how-it-works",
  "/miletruth": "miletruth",
  "/solutions": "solutions",
  "/about": "about",
  "/about-us": "about",
  "/blog": "blogs",
  "/contact": "contact",
  "/privacy-policy": "privacy-policy",
  "/terms-of-service": "terms-of-service",
  "/cookie-policy": "cookie-policy",
};

// Mirror of header.php $current_page_aliases (lines 37-44)
const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
  home: ["home"],
  "how-it-works": ["how-it-works", "how-its-works"],
  miletruth: ["miletruth"],
  solutions: ["solutions"],
  about: ["about", "about-us", "women"],
  blogs: ["blogs"],
  contact: ["contact"],
  "privacy-policy": ["privacy-policy"],
  "terms-of-service": ["terms-of-service"],
  "cookie-policy": ["cookie-policy"],
};

export default function Header() {
  const pathname = usePathname();
  const { isMenuOpen, isSidebarOpen, toggleMenu, toggleSidebar, closeAll } = useHeaderUI();

  const isHome = pathname === "/";
  let currentPage = CURRENT_PAGE_MAP[pathname] ?? "";
  if (pathname.startsWith("/blog/")) {
    currentPage = "blogs";
  }

  // Mirror of header.php $dm_header_active (lines 45-47)
  const dmHeaderActive = (key: string) =>
    (CURRENT_PAGE_ALIASES[key] ?? []).includes(currentPage) ? " active" : "";

  const scrollToNavTarget = (targetId: string) => {
    const target = document.getElementById(targetId);
    if (target) {
      target.scrollIntoView({ behavior: "smooth", block: "start" });
      return;
    }

    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const handleNavClick = (
    event: MouseEvent<HTMLAnchorElement>,
    targetPath: string,
    targetId: string,
    shouldCloseMenu = false,
  ) => {
    if (shouldCloseMenu) closeAll();

    if (pathname !== targetPath) return;

    event.preventDefault();
    const targetUrl = `${targetPath}#${targetId}`;
    if (`${window.location.pathname}${window.location.hash}` !== targetUrl) {
      window.history.pushState(null, "", targetUrl);
    }
    requestAnimationFrame(() => scrollToNavTarget(targetId));
  };

  // Mirror of header.php <script> block (lines 628-660):
  //   - on doc.ready: $('.header-hide-until-scroll').addClass('header-visible-scrolled')
  //   - on scroll:   toggleClass('dm-header-scrolled', scrollTop > 50)
  const [visibleScrolled, setVisibleScrolled] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handle = requestAnimationFrame(() => {
      setVisibleScrolled(true);
    });
    return () => cancelAnimationFrame(handle);
  }, []);

  useEffect(() => {
    let rafId: number | null = null;
    const onScroll = () => {
      if (rafId !== null) return;
      rafId = requestAnimationFrame(() => {
        const scrolled = window.scrollY > 50;
        setIsScrolled(scrolled);
        rafId = null;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      if (rafId !== null) cancelAnimationFrame(rafId);
    };
  }, []);

  // Mirror of header.php $header_style (line 21): inline opacity:0;visibility:hidden on home (before JS adds .header-visible-scrolled)
  const headerInlineStyle = isHome && !visibleScrolled ? { opacity: 0, visibility: "hidden" as const } : undefined;

  const wrapperClass = [
    "elementor-element",
    "elementor-element-466de1b",
    "e-con-full",
    "sticky-container-on",
    "e-flex",
    "cut-corner-no",
    "e-con",
    "e-parent",
    "header-hide-until-scroll",
    visibleScrolled ? "header-visible-scrolled" : "",
    isScrolled ? "dm-header-scrolled" : "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <header id="masthead" itemScope itemType="https://schema.org/WPHeader">
        <p className="main-title bhf-hidden" itemProp="headline">
          <Link href="/" title="Doormile" rel="home">Doormile</Link>
        </p>
        <div data-elementor-type="wp-post" data-elementor-id="5180" className="elementor elementor-5180">
          <div
            className={wrapperClass}
            data-id="466de1b"
            data-element_type="container"
            data-settings='{"position":"absolute"}'
            style={headerInlineStyle}
          >
            <div
              className="elementor-element elementor-element-e052838 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
              data-id="e052838"
              data-element_type="container"
            >
              <div
                className="elementor-element elementor-element-d681ece e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
                data-id="d681ece"
                data-element_type="container"
              >
                <div
                  className="elementor-element elementor-element-472172e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
                  data-id="472172e"
                  data-element_type="container"
                >
                  <div
                    className="elementor-element elementor-element-2f31137 elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-widget elementor-widget-logico_slide_sidebar"
                    data-id="2f31137"
                    data-element_type="widget"
                    data-widget_type="logico_slide_sidebar.default"
                  >
                    <div className="elementor-widget-container">
                      <div className="logico-slide-sidebar-widget">
                        <div className="dropdown-trigger" data-id="2f31137" onClick={toggleSidebar}>
                          <span className="dropdown-trigger-icon"></span>
                        </div>
                      </div>
                      <div
                        style={{ zIndex: 100000 }}
                        className={`slide-sidebar-wrapper slide-sidebar-position-left${isSidebarOpen ? " active" : ""}`}
                        id="side-panel-2f31137"
                      >
                        <div className="slide-sidebar-close" onClick={closeAll}></div>
                        <div className="slide-sidebar">
                          {/* Header — does not scroll. */}
                          <div className="slide-sidebar-header">
                            <figure className="wp-block-image size-full is-resized">
                              <Image
                                width={305}
                                height={58}
                                src="/images/doormile-logo.png"
                                alt="Doormile logo"
                                className="wp-image-5851"
                                style={{ width: "210px", height: "auto" }}
                                sizes="(max-width: 305px) 100vw, 305px"
                              />
                            </figure>
                          </div>

                          {/* Scrollable content — tabIndex makes it keyboard-scrollable. */}
                          <div className="slide-sidebar-content" tabIndex={0} role="region" aria-label="Menu content">
                            <div id="block-37" className="widget widget_block">
                              <div className="widget-wrapper">
                                <div className="dm-block-group is-layout-constrained dm-block-group-is-layout-constrained">

                                  <div className="wp-block-title">
                                    <h6
                                      className="wp-block-heading has-text-font-font-family"
                                      style={{
                                        fontSize: "18px",
                                        fontStyle: "normal",
                                        fontWeight: 700,
                                        letterSpacing: "0px",
                                        textTransform: "none",
                                      }}
                                    >
                                      Address
                                    </h6>
                                  </div>

                                  <h6
                                    className="wp-block-heading has-text-font-font-family"
                                    style={{
                                      fontSize: "14px",
                                      fontStyle: "normal",
                                      fontWeight: 700,
                                      letterSpacing: "0px",
                                      textTransform: "none",
                                    }}
                                  >
                                    Hyderabad
                                  </h6>
                                  <p>
                                    5th Floor, Vision Ultima,
                                    <br />
                                    Street No.3, Jayabheri Enclave,
                                    <br />
                                    Gachibowli, Hyderabad,
                                    <br />
                                    Telangana 500032.
                                  </p>

                                  <div style={{ height: "12px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <h6
                                    className="wp-block-heading has-text-font-font-family"
                                    style={{
                                      fontSize: "14px",
                                      fontStyle: "normal",
                                      fontWeight: 700,
                                      letterSpacing: "0px",
                                      textTransform: "none",
                                    }}
                                  >
                                    Coimbatore
                                  </h6>
                                  <p>
                                    Mayflower Valencia,
                                    <br />
                                    Near Nava India Bus Stop,
                                    <br />
                                    Avinashi Road,
                                    <br />
                                    Udayampalayam,
                                    <br />
                                    Tamil Nadu 641037.
                                  </p>

                                  <div style={{ height: "12px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <h6
                                    className="wp-block-heading has-text-font-font-family"
                                    style={{
                                      fontSize: "14px",
                                      fontStyle: "normal",
                                      fontWeight: 700,
                                      letterSpacing: "0px",
                                      textTransform: "none",
                                    }}
                                  >
                                    Bengaluru
                                  </h6>
                                  <p>
                                    C612, 6th Floor,
                                    <br />
                                    Trifecta Starlight,
                                    <br />
                                    ITPL Road,
                                    <br />
                                    Garudacharapalya,
                                    <br />
                                    Mahadevapura,
                                    <br />
                                    Bangalore 560048,
                                    <br />
                                    Karnataka, India.
                                  </p>

                                  <div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <div className="wp-block-title">
                                    <h6
                                      className="wp-block-heading has-text-font-font-family"
                                      style={{
                                        fontSize: "18px",
                                        fontStyle: "normal",
                                        fontWeight: 700,
                                        letterSpacing: "0px",
                                        textTransform: "none",
                                      }}
                                    >
                                      Contact Us
                                    </h6>
                                  </div>

                                  <p>Tel : +91 86886 97941</p>

                                  <div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <div className="wp-block-title">
                                    <h6
                                      className="wp-block-heading has-text-font-font-family"
                                      style={{
                                        fontSize: "18px",
                                        fontStyle: "normal",
                                        fontWeight: 700,
                                        letterSpacing: "0px",
                                        textTransform: "none",
                                      }}
                                    >
                                      Email
                                    </h6>
                                  </div>

                                  <p>
                                    <a href="mailto:care@doormile.com" data-wplink-edit="true">care@doormile.com</a>
                                  </p>

                                  <div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>

                                  <ul
                                    className="wp-block-social-links has-icon-color is-style-logos-only has-background is-layout-flex wp-block-social-links-is-layout-flex"
                                    style={{ backgroundColor: "#1f1f1f" }}
                                  >
                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-facebook has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">Facebook</span>
                                      </a>
                                    </li>

                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-x has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://x.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">X</span>
                                      </a>
                                    </li>

                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-linkedin has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">LinkedIn</span>
                                      </a>
                                    </li>

                                    <li
                                      style={{ color: "#ffffff" }}
                                      className="wp-social-link wp-social-link-youtube has-white-color wp-block-social-link"
                                    >
                                      <a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/" className="wp-block-social-link-anchor">
                                        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                          <path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z" />
                                        </svg>
                                        <span className="wp-block-social-link-label screen-reader-text">YouTube</span>
                                      </a>
                                    </li>
                                  </ul>

                                </div>
                              </div>
                            </div>
                          </div>

                          {/* CTA — pinned at the bottom; never scrolls away. */}
                          <div className="slide-sidebar-cta">
                            <div className="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
                              <div className="wp-block-button is-style-simple is-style-theme">
                                <Link href="/contact" className="wp-block-button__link wp-element-button" style={{ borderRadius: "10px" }}>
                                  Get in touch
                                </Link>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className="elementor-element elementor-element-846e53d elementor-widget elementor-widget-site-logo"
                    data-id="846e53d"
                    data-element_type="widget"
                    data-widget_type="site-logo.default"
                  >
                    <div className="elementor-widget-container">
                      <div className="hfe-site-logo">
                        <Link data-elementor-open-lightbox="" className="elementor-clickable" href="/">
                          <div className="hfe-site-logo-set">
                            <div className="hfe-site-logo-container">
                              <Image width={748} height={100} className="hfe-site-logo-img logo-desktop elementor-animation-" src="/images/doormile-white.png" alt="doormile-logo" priority />
                              <Image width={748} height={100} className="hfe-site-logo-img logo-mobile elementor-animation-" src="/images/doormile-black.png" alt="doormile-logo" priority />
                            </div>
                          </div>
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  className="elementor-element elementor-element-e44ee7e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
                  data-id="e44ee7e"
                  data-element_type="container"
                >
                  <div
                    className="elementor-element elementor-element-0b7bf6f logico-breakpoint-laptop elementor-widget__width-auto elementor-widget elementor-widget-logico_navigation_menu"
                    data-id="0b7bf6f"
                    data-element_type="widget"
                    data-widget_type="logico_navigation_menu.default"
                  >
                    <div className="elementor-widget-container">
                      <div className="header-menu-container">
                        <nav>
                          <ul id="menu-main-menu" className="main-menu">
                            <li id="menu-item-10508" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
                              <Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home")}>Home</Link>
                            </li>
                            <li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}>
                              <Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works")}>How It Works</Link>
                            </li>
                            <li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
                              <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth")}>MileTruth&trade; AI</Link>
                            </li>
                            <li id="menu-item-10511" className={`menu-item menu-item-type-custom  menu-item-10511${dmHeaderActive("solutions")}`}>
                              <Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions")}>Solutions</Link>
                            </li>
                            <li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
                              <Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about")}>About</Link>
                            </li>
                            <li id="menu-item-10535" className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
                              <Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs")}>Blogs</Link>
                            </li>
                          </ul>
                        </nav>
                      </div>
                      <div className="menu-trigger" data-id="0b7bf6f" onClick={toggleMenu}>
                        <span className="menu-trigger-icon">
                          <span className="hamburger">
                            <span></span>
                            <span></span>
                            <span></span>
                          </span>
                        </span>
                      </div>

                      <div
                        style={{ zIndex: 100000 }}
                        className={`mobile-header-menu-container${isMenuOpen ? " active" : ""}`}
                        id="mobile-header-0b7bf6f"
                      >
                        <div className="mobile-header-row">
                          <div className="header-icons-container">
                            <div className="header-icon login-logout">
                              <a href="#" title="Login/Register" className="link-login"></a>
                            </div>
                            <div className="header-icon menu-close" onClick={closeAll}>
                              <span className="menu-close-icon"></span>
                            </div>
                          </div>
                        </div>
                        <nav>
                          <ul id="menu-main-menu-1" className="main-menu">
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
                              <Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home", true)}>Home</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom  menu-item-10509${dmHeaderActive("how-it-works")}`}>
                              <Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works", true)}>How It Works</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom  menu-item-10510${dmHeaderActive("miletruth")}`}>
                              <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth", true)}>MileTruth&trade; AI</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
                              <Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions", true)}>Solutions</Link>
                            </li>
                            <li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
                              <Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
                            </li>
                            <li className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
                              <Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs", true)}>Blogs</Link>
                            </li>
                          </ul>
                        </nav>
                        <div className="header-mobile-contacts">
                          <div className="contact-item contact-item-phone">
                            <span className="contact-item-label">Phone</span>
                            <div className="contact-item-value">
                              <p>Tel : +91 86886 97941</p>
                            </div>
                          </div>
                          <div className="contact-item contact-item-email">
                            <span className="contact-item-label">Email</span>
                            <div className="contact-item-value">
                              <p>
                                <a href="mailto:care@doormile.com" data-wplink-edit="true">care@doormile.com</a>
                              </p>
                            </div>
                          </div>
                        </div>
                        <div className="header-mobile-socials">
                          <ul className="mobile-menu-socials wrapper-socials">
                            <li>
                              <a href="https://www.facebook.com/" target="_blank" aria-label="Facebook" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
                                </svg>
                              </a>
                            </li>
                            <li>
                              <a href="https://x.com/" target="_blank" aria-label="X (Twitter)" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
                                </svg>
                              </a>
                            </li>
                            <li>
                              <a href="https://www.linkedin.com/" target="_blank" aria-label="LinkedIn" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
                                </svg>
                              </a>
                            </li>
                            <li>
                              <a href="https://www.youtube.com/" target="_blank" aria-label="YouTube" rel="noreferrer">
                                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                  <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
                                </svg>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div className="header-mobile-button">
                          <Link className="logico-alter-button" href="/contact">Get in Touch</Link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="elementor-element elementor-element-f961133 e-con-full elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child"
              data-id="f961133"
              data-element_type="container"
            >
              <div
                className="elementor-element elementor-element-cabdb09 elementor-widget elementor-widget-logico_header_button"
                data-id="cabdb09"
                data-element_type="widget"
                data-widget_type="logico_header_button.default"
              >
                <div className="elementor-widget-container">
                  <div className="header-button-container">
                    <Link href="/contact" className="header-button header-button-animation-fade">
                      Contact Us
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
      {/* Inline <style> block — 1:1 translation of header.php lines 600-627.
          suppressHydrationWarning: this is a static, deterministic CSS string,
          but as a client component its dangerouslySetInnerHTML is diffed during
          hydration. A stale prebuilt out/ or a CSS-injecting browser extension
          can make the server HTML differ from the client bundle, which React
          refuses to patch — suppressing avoids a false console error for a node
          whose content never depends on render-time state. */}
      <style
        suppressHydrationWarning
        dangerouslySetInnerHTML={{
          __html: `
            /* ── Off-canvas menu: full-height flex column ──
               Header (logo) at top, scrollable content in the middle, and the
               "Get in touch" CTA pinned at the bottom — so the panel stays
               usable however much content (e.g. multiple office addresses) it
               holds. Scoped to #side-panel-2f31137; no other sidebar is touched.
               Width, colors, the slide-in animation, and open/close behaviour
               (driven by the .active class on the wrapper) are all unchanged. */
            #side-panel-2f31137 .slide-sidebar {
                display: flex !important;
                flex-direction: column !important;
                height: 100% !important;
                padding: 0 !important;        /* the three sections own their padding */
                overflow: hidden !important;  /* scrolling lives on the content area */
            }
            /* Fit the *visible* viewport. The panel height is calc(100vh - 20px),
               but on mobile 100vh is the larger, URL-bar-inclusive height, which
               pushed the bottom of the scroll list + the CTA below the fold and
               made scrolling appear broken. dvh tracks the actually-visible area;
               vh is kept as a fallback for older browsers. */
            #side-panel-2f31137.slide-sidebar-wrapper {
                height: calc(100vh - 20px);
                height: calc(100dvh - 20px) !important;
            }
            #side-panel-2f31137 .slide-sidebar-header {
                flex: 0 0 auto;
                padding: 52px 36px 18px;      /* top clears the floating close button */
                text-align: center;           /* centre the logo */
            }
            #side-panel-2f31137 .slide-sidebar-header figure {
                margin: 0;
                text-align: center;
            }
            #side-panel-2f31137 .slide-sidebar-header img {
                display: inline-block;        /* centred by the header's text-align */
            }
            #side-panel-2f31137 .slide-sidebar-content {
                flex: 1 1 auto;
                min-height: 0;                /* let the flex child shrink so it can scroll */
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
                overscroll-behavior: contain;       /* don't chain scroll to the page */
                padding: 18px 60px 8px;             /* top gap below the logo header */
            }
            #side-panel-2f31137 .slide-sidebar-content:focus-visible {
                outline: none;                /* container is scroll-focusable, not a control */
            }
            #side-panel-2f31137 .slide-sidebar-cta {
                flex: 0 0 auto;
                padding: 16px 60px 36px;
            }
            /* Compact, readable address blocks (tighter line + lead-in than the
               default 1.75em body spacing). */
            #side-panel-2f31137 .slide-sidebar-content p {
                line-height: 1.5;
                margin-top: 4px;
            }
            /* Larger social icons — the logos-only block style renders them at 18px. */
            #side-panel-2f31137 .wp-block-social-links.is-style-logos-only .wp-block-social-link a svg {
                width: 26px !important;
                height: 26px !important;
            }

            #masthead .elementor-element.elementor-element-466de1b {
                position: absolute !important;
                top: 5px !important;
                left: 0 !important;
                right: 0 !important;
                width: auto !important;
                transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease !important;
                z-index: 10000 !important;
            }

            /* .e-con's --padding-* falls through two competing stylesheets and lands at 10px locally
               (vs 0 in production). Zero out the pill wrappers so the navbar matches prod height (~122px). */
            #masthead .elementor-element.elementor-element-e052838,
            #masthead .elementor-element.elementor-element-d681ece {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            @media (min-width: 1025px) {
                #masthead {
                    position: relative;
                    z-index: 10000;
                }

                /* Production pins the wrapper via Elementor sticky-effects JS (not shipped here).
                   Force position:fixed once scrolled past 50px so the header stays in viewport. */
                #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
                    position: fixed !important;
                    background: rgba(26, 26, 26, 0.92) !important;
                    -webkit-backdrop-filter: blur(14px) !important;
                    backdrop-filter: blur(14px) !important;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
                    top: 0 !important;
                }

                #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled .elementor-element.elementor-element-e052838 {
                    background: transparent !important;
                }
            }

            /* ── Desktop navbar layout (3-section balanced grid) ──
               The earlier Mac-M1 fix used justify-content:space-between, which
               on wide screens flung the logo and nav to opposite edges and
               left a large asymmetric gap between them. Replace it with a
               responsive three-column grid so the nav stays optically centred
               with equal space on both sides, the logo group sits left and the
               Contact button right — proportional at every desktop width.

               The logo group (472172e) and nav (e44ee7e) are nested inside
               e052838 › d681ece, while the Contact button (f961133) is their
               uncle. Those two wrappers carry no visual styling on desktop
               (their background/padding live only in the <1024px mobile block),
               so display:contents flattens them and promotes all three logical
               sections to be direct items of one header grid. The grid only
               applies >=1025px, leaving the mobile pill layout untouched. */
            @media (min-width: 1025px) {
                #masthead .elementor-element.elementor-element-466de1b {
                    display: grid !important;
                    grid-template-columns: 1fr auto 1fr !important;
                    align-items: center !important;
                    column-gap: clamp(16px, 2vw, 32px) !important;
                    /* Equal left/right safe areas pull the logo and Contact
                       button inward off the viewport edges. Because the inset
                       is symmetric, the 1fr side columns shrink equally and the
                       centred nav does not shift. */
                    padding-inline: clamp(24px, 3vw, 48px) !important;
                    /* Consistent top/bottom breathing room inside the bar; with
                       align-items:center every section stays vertically centred. */
                    padding-block: clamp(8px, 1vw, 16px) !important;
                }

                #masthead .elementor-element.elementor-element-e052838,
                #masthead .elementor-element.elementor-element-d681ece {
                    display: contents !important;
                }

                /* navbar-left: menu/grid icon + logo */
                #masthead .elementor-element.elementor-element-472172e {
                    justify-self: start !important;
                    display: flex !important;
                    align-items: center !important;
                    gap: clamp(16px, 1.5vw, 28px) !important;
                    flex: 0 0 auto !important;
                }

                /* Logo never shrinks — keeps a clean edge against the nav. */
                #masthead .elementor-element.elementor-element-846e53d {
                    flex-shrink: 0 !important;
                }

                /* navbar-center: navigation menu, optically centred. */
                #masthead .elementor-element.elementor-element-e44ee7e {
                    justify-self: center !important;
                    display: flex !important;
                    align-items: center !important;
                }

                /* navbar-right: Contact button, aligned to the right edge. */
                #masthead .elementor-element.elementor-element-f961133 {
                    justify-self: end !important;
                }
            }

            #masthead .header-menu-container .main-menu > li.active > a:before {
                background-color: #ffffff !important;
                opacity: 1 !important;
            }

            #masthead .header-menu-container .main-menu > li.active > a {
                color: #ffffff !important;
            }

            #masthead .header-menu-container .main-menu > li > a:focus,
            #masthead .header-menu-container .main-menu > li > a:focus-visible {
                outline: none !important;
                box-shadow: none !important;
            }

            /* Responsive logo adjustment on mobile/tablet */
            @media (max-width: 1024px) {
                #masthead .elementor-element.elementor-element-466de1b {
                    top: 18px !important;
                }
                #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
                    width: 150px !important;
                    height: auto !important;
                    margin-left: 20px !important;
                }
                #masthead .header-menu-container {
                    display: none !important;
                }
                #masthead .menu-trigger {
                    display: block !important;
                }

                /* Sticky header on scroll for mobile/tablet too — the desktop
                   rule lived only in the min-width:1025px block, so on phones the
                   absolutely-positioned navbar scrolled away with the page. Pin it
                   to the top once scrolled past 50px, matching desktop behaviour. */
                #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
                    position: fixed !important;
                    top: 18px !important;
                    left: 0 !important;
                    right: 0 !important;
                }

                #masthead .elementor-element.elementor-element-e052838 {
                    margin-left: 0px !important;
                    margin-right: 0px !important;
                    border-radius: 16px !important;
                }
            }

            @media (max-width: 480px) {
                #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
                    width: 150px !important;
                    margin-left: 8px !important;
                }
            }

            /* The theme reveals the mobile slide-in menu via Elementor's
               body[data-elementor-device-mode="mobile"] rules, which are set by
               Elementor's frontend JS — that JS isn't shipped in this Next port,
               so the panel stayed display:none and the hamburger opened nothing.
               Restore it with the same 1024px breakpoint the nav already switches
               at. The panel sits off-screen (right:-320px) until .active slides
               it in, matching production behaviour. */
            @media (max-width: 1024px) {
                #masthead .elementor-widget-logico_navigation_menu .mobile-header-menu-container {
                    display: block !important;
                }
            }

            /* The bundled 'fontello' subset is missing the search (\\e85c) and
               close (\\e845) glyphs, so those two icons render as empty tofu
               boxes. Replace them with inline SVGs via CSS masks so they paint
               in the current text colour (matching the working cart/user icons)
               and respond to hover. */
            #masthead .header-icon.search-link .search-trigger-icon::before,
            #masthead .header-icon.menu-close .menu-close-icon::before {
                content: "" !important;
                display: block;
                width: 1em;
                height: 1em;
                background-color: currentColor;
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-position: center;
                mask-position: center;
                -webkit-mask-size: contain;
                mask-size: contain;
            }
            #masthead .header-icon.search-link .search-trigger-icon::before {
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
            }
            #masthead .header-icon.menu-close .menu-close-icon::before {
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
            }
          `,
        }}
      />
    </>
  );
}
