// Header — sticky, transparent → opaque on scroll.
const LanguageSwitch = ({ variant }) => (
  <div className={"scl-lang-switch-wrap scl-lang-switch-wrap--" + variant}>
    {variant === "desktop" && <span className="scl-lang-switch__label">{t("langSwitch.label")}</span>}
    <div className={"scl-lang-switch scl-lang-switch--" + variant} aria-label={t("langSwitch.label")}>
      {window.SCL_LANGUAGES.map(l => (
        <a
          key={l.code}
          href={scLocalizedPath(l.code)}
          className={"scl-lang-switch__item" + (l.code === window.SCL_LANG ? " is-active" : "")}
          aria-current={l.code === window.SCL_LANG ? "true" : undefined}
        >
          {l.code.toUpperCase()}
        </a>
      ))}
    </div>
  </div>
);

const Header = ({ showNav = true }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const navItems = t("nav");
  return (
    <header className={"scl-header" + (scrolled ? " is-scrolled" : "")}>
      <div className="scl-header__inner">
        <a className="scl-header__brand" href={scHomeHref("#top")} aria-label={t("common.homeLabel")}>
          <img src="/assets/seal-only-black.png" alt="" className="scl-header__mark" />
          <div className="scl-header__wordmark">
            <span className="scl-header__name">SANTOS CESAR LAW</span>
            <span className="scl-header__sub">PROFESSIONAL CORPORATION</span>
          </div>
        </a>

        {/* The nav element itself (not just its links) is kept even when showNav is false:
            its margin-left:auto is what pushes Languages/CTA flush right, so removing the
            element entirely would collapse that space instead of merely emptying it. */}
        <nav className="scl-header__nav" aria-label={showNav ? t("common.mainNav") : undefined}>
          {showNav && navItems.map(n => (
            <a key={n.href} href={scHomeHref(n.href)} className="scl-header__link">{n.label}</a>
          ))}
        </nav>

        <div className="scl-header__actions">
          <LanguageSwitch variant="desktop" />
          <a href={scWhatsAppHref()} target="_blank" rel="noopener noreferrer" className="scl-btn scl-btn--primary scl-btn--sm scl-header__cta">
            {t("common.ctaPrimary")} <Icon name="arrow-right" size={15} />
          </a>
          <button
            className="scl-header__menu"
            aria-label={t("common.openMenu")}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            <Icon name={open ? "close" : "menu"} size={22} />
          </button>
        </div>
      </div>

      {open && (
        <div className="scl-header__drawer">
          {showNav && navItems.map(n => (
            <a key={n.href} href={scHomeHref(n.href)} className="scl-header__drawer-link" onClick={() => setOpen(false)}>
              {n.label}
              <Icon name="chevron-right" size={18} />
            </a>
          ))}
          <LanguageSwitch variant="drawer" />
          <a href={scWhatsAppHref()} target="_blank" rel="noopener noreferrer" className="scl-btn scl-btn--primary" onClick={() => setOpen(false)} style={{ marginTop: 16 }}>
            {t("common.ctaPrimary")} <Icon name="arrow-right" size={16} />
          </a>
        </div>
      )}
    </header>
  );
};

window.Header = Header;