/* Header.jsx — fixed-top white header with logo, nav, CTA. */

const Header = ({ active = "home", onNavigate, onCta }) => {
  const items = [
    { id: "services", label: "Services", submenu: [
      { label: "Flooring Installation", href: "flooring-installation.html" },
      { label: "Bathroom Remodel",      href: "bathroom-remodeling.html" },
      { label: "Kitchen Remodel",       href: "kitchen-remodeling.html" },
      { label: "Residential Renovation",href: "major-renovations.html" },
      { label: "Commercial Renovation", href: "commercial-renovation.html" },
      { label: "New Construction",      href: "new-construction.html" },
    ]},
    { id: "about", label: "About Us", href: "about-us.html" },
  ];

  return (
    <header className="header">
      <div className="container header__inner">
        <a className="header__logo" onClick={() => onNavigate("home")} role="button" style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 14 }}>
          <img src="uploads/GSC Color Logo_v1.png" alt="Gus Skyy Co" style={{ height: 64, width: "auto", display: "block" }} />
          <span style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "0.02em", color: "var(--gsc-blue-dark)", lineHeight: 1, textTransform: "uppercase" }}>Gus Skyy<br/>Construction</span>
        </a>
        <nav className="header__nav">
          {items.map((item, i) => (
            <React.Fragment key={item.id}>
              {item.submenu ? (
                <div className="nav-drop">
                  <a className={active === item.id ? "active" : ""}
                     onClick={() => onNavigate(item.id)}>
                    {item.label} <span className="nav-drop__caret">▾</span>
                  </a>
                  <div className="nav-drop__menu">
                    {item.submenu.map((sub) => (
                      <a key={sub.label} href={sub.href}
                         className="nav-drop__item"
                         onClick={(e) => {
                           if (sub.href === "#") { e.preventDefault(); onNavigate(item.id); }
                         }}>
                        {sub.label}
                      </a>
                    ))}
                  </div>
                </div>
              ) : (
                <a className={active === item.id ? "active" : ""}
                   href={item.href}
                   onClick={(e) => {
                     if (!item.href) { e.preventDefault(); onNavigate(item.id); }
                   }}>{item.label}</a>
              )}
              {i < items.length - 1 && <span className="sep">|</span>}
            </React.Fragment>
          ))}
        </nav>
        <div className="header__cta">
          <a className="header__phone" href="tel:9735779383" aria-label="Call Gus Skyy Construction">
            <IconPhone size={18} stroke={2.4} />
            <span>973-577-9383</span>
          </a>
          <button className="btn btn--primary" onClick={onCta}>
            Get Your Free Estimate Here
          </button>
        </div>
      </div>
    </header>
  );
};

window.Header = Header;