// Chrome.jsx — top nav (with Solutions dropdown), footer, cookie banner
// Cross-page navigation: every nav item is a real <a href>.

const SOLUTIONS_MENU = [
  { label: "Software Development", href: "software-development.html" },
  { label: "ERP", href: "erp.html" },
  { label: "ERP \u00b7 SAP", href: "erp-sap.html", sub: true },
  { label: "ERP \u00b7 Oracle", href: "erp-oracle.html", sub: true },
  { label: "ERP \u00b7 Microsoft", href: "erp-microsoft.html", sub: true },
  { label: "eCommerce", href: "ecommerce.html" },
  { label: "CRM", href: "crm.html" },
  { label: "Call Center", href: "call-center.html" },
  { label: "IT Operations & Help Desk", href: "it-operations.html" },
  { label: "BPO", href: "bpo.html" },
  { label: "IoT", href: "iot.html" },
];

const COMPANY_MENU = [
  { label: "About",        href: "about.html" },
  { label: "Careers",      href: "careers.html" },
  { label: "Videos",       href: "videos.html" },
  { label: "Case Studies", href: "case-studies.html" },
  { label: "Contact",      href: "contact.html" },
];

const NAV_ITEMS = [
  { label: "Solutions",       href: "solutions.html", dropdown: "solutions" },
  { label: "Delivery Models", href: "delivery.html" },
  { label: "Company",         href: "about.html",     dropdown: "company" },
];

const TopNav = ({ active, scrolled, onContact }) => {
  const [openDrop, setOpenDrop] = React.useState(null); // 'solutions' | 'company' | null
  const dropRef = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => {
      if (dropRef.current && !dropRef.current.contains(e.target)) setOpenDrop(null);
    };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, []);

  return (
    <header className={"topnav" + (scrolled ? " scrolled" : "")}>
      <div className="container topnav-inner">
        <div className="topnav-left">
          <a href="index.html" style={{ display: "block", lineHeight: 0 }}>
            <img className="topnav-logo" src="assets/acerti-logo-ink-tight.png" alt="acerti" />
          </a>
          <nav className="topnav-menu" ref={dropRef}>
            {NAV_ITEMS.map((it) => {
              const isOpen = openDrop === it.dropdown;
              const menu = it.dropdown === "solutions" ? SOLUTIONS_MENU
                         : it.dropdown === "company"   ? COMPANY_MENU
                         : null;
              return (
                <div key={it.label} style={{ position: "relative" }}
                     onMouseEnter={() => it.dropdown && setOpenDrop(it.dropdown)}
                     onMouseLeave={() => it.dropdown && setOpenDrop(null)}>
                  <a
                    href={it.href}
                    className="topnav-link"
                    style={{
                      color: active === it.label ? "var(--primary-active)" : undefined,
                      textDecoration: "none",
                      display: "inline-flex", alignItems: "center", gap: 4,
                    }}
                  >
                    {it.label}
                    {it.dropdown && (
                      <span style={{ fontSize: 9, color: "var(--muted)", marginTop: 2 }}>&#9662;</span>
                    )}
                  </a>
                  {it.dropdown && isOpen && menu && (
                    <div className="nav-drop">
                      <div className="nav-drop-inner">
                        <div className="caption-up" style={{ marginBottom: 12, color: "var(--muted)" }}>{it.label}</div>
                        {menu.map((s) => (
                          <a key={s.label} href={s.href}
                             className={"nav-drop-item" + (s.sub ? " sub" : "")}>
                            {s.label}
                          </a>
                        ))}
                        {it.dropdown === "solutions" && (
                          <div style={{ borderTop: "1px solid var(--hairline)", marginTop: 12, paddingTop: 12 }}>
                            <a href="solutions.html" className="tlink">See all practice areas &rarr;</a>
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </nav>
        </div>
        <div className="topnav-right">
          <a className="topnav-why" href="why-nearshoring.html">Why Nearshoring</a>
          <button className="btn btn-primary btn-sm" onClick={onContact}>
            CONTACT US
          </button>
        </div>
      </div>
    </header>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <img src="assets/acerti-logo-white-tight.png" alt="acerti" style={{ height: 28 }} />
          <p>
            Nearshore software development, ERP, and AI-enabled services for North
            American companies. Headquartered in the USA &middot; operations across
            Mexico and LATAM.
          </p>
          <p style={{ marginTop: 18, fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16, color: "var(--on-dark)" }}>
            Elevating possibilities, transforming visions.
          </p>
          <div className="footer-social" aria-label="Social links">
            <a className="sociallnk" href="https://www.linkedin.com/company/acerti-consulting-group" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" data-network="linkedin">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.5 0h4.37v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.47 3.04 5.47 7v7.44h-4.56v-6.6c0-1.57-.03-3.6-2.19-3.6-2.2 0-2.54 1.72-2.54 3.49V22h-4.56V8z" />
              </svg>
            </a>
            <a className="sociallnk" href="https://www.facebook.com/acerti.net" target="_blank" rel="noopener noreferrer" aria-label="Facebook" data-network="facebook">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.24 10.44 22v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.49-3.91 3.78-3.91 1.1 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.88h2.77l-.44 2.9h-2.33V22C18.34 21.24 22 17.08 22 12.06z" />
              </svg>
            </a>
            <a className="sociallnk" href="https://www.instagram.com/acertiCG_US/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" data-network="instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M12 2.2c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23a3.7 3.7 0 0 1-.9 1.38c-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2zm0 2c-3.14 0-3.5.01-4.73.07-1.08.05-1.66.23-2.05.38-.51.2-.88.44-1.27.83-.39.39-.63.76-.83 1.27-.15.39-.33.97-.38 2.05C2.71 9.5 2.7 9.86 2.7 13s.01 3.5.07 4.73c.05 1.08.23 1.66.38 2.05.2.51.44.88.83 1.27.39.39.76.63 1.27.83.39.15.97.33 2.05.38C8.5 21.29 8.86 21.3 12 21.3s3.5-.01 4.73-.07c1.08-.05 1.66-.23 2.05-.38.51-.2.88-.44 1.27-.83.39-.39.63-.76.83-1.27.15-.39.33-.97.38-2.05.06-1.23.07-1.59.07-4.73s-.01-3.5-.07-4.73c-.05-1.08-.23-1.66-.38-2.05a3.4 3.4 0 0 0-.83-1.27 3.4 3.4 0 0 0-1.27-.83c-.39-.15-.97-.33-2.05-.38C15.5 4.21 15.14 4.2 12 4.2zm0 3.2a4.6 4.6 0 1 1 0 9.2 4.6 4.6 0 0 1 0-9.2zm0 7.6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5.85-7.78a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0z" />
              </svg>
            </a>
          </div>
        </div>
        <div className="footer-col">
          <h6>Solutions</h6>
          <a className="lnk" href="software-development.html">Software Development</a>
          <a className="lnk" href="erp.html">ERP</a>
          <a className="lnk" href="ecommerce.html">eCommerce</a>
          <a className="lnk" href="crm.html">CRM</a>
          <a className="lnk" href="call-center.html">Call Center &middot; AI Voice</a>
          <a className="lnk" href="it-operations.html">IT Operations &amp; Help Desk</a>
          <a className="lnk" href="bpo.html">BPO</a>
          <a className="lnk" href="iot.html">IoT</a>
        </div>
        <div className="footer-col">
          <h6>Delivery</h6>
          <a className="lnk" href="delivery.html">Project-Based</a>
          <a className="lnk" href="delivery.html">Managed Teams</a>
          <a className="lnk" href="delivery.html">Staff Augmentation</a>
          <a className="lnk" href="why-nearshoring.html">Why Nearshoring</a>
        </div>
        <div className="footer-col">
          <h6>Company</h6>
          <a className="lnk" href="about.html">About</a>
          <a className="lnk" href="careers.html">Careers</a>
          <a className="lnk" href="videos.html">Videos</a>
          <a className="lnk" href="case-studies.html">Case studies</a>
          <a className="lnk" href="contact.html">Contact</a>
        </div>
        <div className="footer-col">
          <h6>Legal</h6>
          <a className="lnk" href="privacy.html">Privacy</a>
          <a className="lnk" href="terms.html">Terms</a>
          <a className="lnk" href="security.html">Security</a>
          <a className="lnk" href="dpa.html">DPA</a>
          <a className="lnk" href="internal-login.html">Internal</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>&copy; 2026 Acerti Consulting Group, LLC.</span>
        <span>USA &middot; Mexico &middot; LATAM</span>
      </div>
    </div>
  </footer>
);

const CookieBanner = ({ onDismiss }) => (
  <div className="cookie">
    <p>
      We use cookies to understand site traffic and tune long-form essays &mdash;
      never to track individuals across the web.
    </p>
    <div className="row">
      <button className="btn btn-primary btn-sm" onClick={() => onDismiss("accepted")}>Accept all</button>
      <button className="btn btn-secondary-dark btn-sm" onClick={() => onDismiss("essential")}>Essential only</button>
    </div>
  </div>
);

Object.assign(window, { TopNav, Footer, CookieBanner, SOLUTIONS_MENU, COMPANY_MENU, NAV_ITEMS });