/* Top navigation. Drives both anchor-scroll (on the landing page) and
   the portfolio view. */
function SiteHeader({ solid, view, onGo }) {
  const homeUrl = window.CARINA_HOME_URL || "/";
  const portfolioUrl = window.CARINA_PORTFOLIO_URL || "/imoveis";
  const links = [
    ["top", "Início"],
    ["/imoveis", "Imóveis"],
    ["#processo", "Como funciona"],
    ["#bio", "A Carina"],
    ["#depoimentos", "Depoimentos"]
  ];
  const [menu, setMenu] = React.useState(false);
  const pageHref = (id) => {
    if (window.CARINA_IS_PORTFOLIO_TARGET?.(id)) return portfolioUrl;
    if (id === "top") return homeUrl;
    return id;
  };
  const openPage = (event, id) => {
    event.preventDefault();
    onGo(id);
  };

  return (
    <header className="cn-site-header" style={{ position: "relative", zIndex: 50 }}>
      <div className="cn-site-header__bar">
        <a href={homeUrl} className="cn-site-logo-button" aria-label="Ir para o início">
          <img
            src="assets/logo-horizontal-gold.png"
            alt="78 Carina Imóveis"
            className="cn-site-logo"
          />
        </a>

        <nav className="cn-nav-links" style={{ display: "flex", alignItems: "center", gap: 36 }}>
          {links.map(([id, label]) => {
            const isPageLink = id.startsWith("/") || /\.(html|php)$/i.test(id);
            return isPageLink ? (
              <a key={id} href={pageHref(id)} onClick={(e) => openPage(e, id)}
                style={{ ...navLink, textDecoration: "none", display: "inline-flex" }}
                onMouseEnter={e => e.currentTarget.style.color = "var(--accent-hover)"}
                onMouseLeave={e => e.currentTarget.style.color = "var(--cream)"}
              >{label}</a>
            ) : (
              <button key={id} onClick={() => onGo(id)}
                style={navLink}
                onMouseEnter={e => e.currentTarget.style.color = "var(--accent-hover)"}
                onMouseLeave={e => e.currentTarget.style.color = "var(--cream)"}
              >{label}</button>
            );
          })}
          <a href={window.CARINA_WHATS_SITE} target="_blank" rel="noopener" className="cn-primary-cta cn-primary-cta--sm"><span className="cn-primary-cta__label">Falar com a Carina</span></a>
        </nav>

        {/* Mobile trigger */}
        <button className="cn-nav-burger" onClick={() => setMenu(m => !m)} style={{
          display: "none", background: "none", border: "1px solid var(--border-gold-strong)",
          borderRadius: "var(--r-sm)", padding: 9, cursor: "pointer"
        }}><Icon name={menu ? "x" : "menu"} size={20} color="var(--accent)" /></button>
      </div>

      {menu && (
        <div className="cn-nav-mobile" style={{
          display: "none", flexDirection: "column", gap: 4, padding: "8px 24px 20px",
          background: "rgba(10,9,8,0.96)", borderTop: "1px solid var(--border-gold)"
        }}>
          {links.map(([id, label]) => {
            const isPageLink = id.startsWith("/") || /\.(html|php)$/i.test(id);
            return isPageLink ? (
              <a key={id} href={pageHref(id)} onClick={(e) => { openPage(e, id); setMenu(false); }} style={{ ...navLink, padding: "14px 0", textAlign: "left", fontSize: 14, textDecoration: "none" }}>{label}</a>
            ) : (
              <button key={id} onClick={() => { onGo(id); setMenu(false); }} style={{ ...navLink, padding: "14px 0", textAlign: "left", fontSize: 14 }}>{label}</button>
            );
          })}
          <a href={window.CARINA_WHATS_SITE} target="_blank" rel="noopener" className="cn-primary-cta cn-primary-cta--sm cn-primary-cta--block" style={{ marginTop: 8 }}><span className="cn-primary-cta__label">Falar com a Carina</span></a>
        </div>
      )}
    </header>
  );
}

const navLink = {
  background: "none", border: "none", cursor: "pointer",
  fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 500,
  letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--cream)",
  padding: "8px 0", transition: "color var(--dur) var(--ease)"
};

Object.assign(window, { SiteHeader });