// Header — SBL site top bar. Attaches to window for cross-file use.

// PT | EN | ES language switch. Stored in localStorage via window.SBL_I18N.
function LangSwitch({ lang, setLang, size }) {
  const opts = [
    { id: 'pt', label: 'PT' },
    { id: 'en', label: 'EN' },
    { id: 'es', label: 'ES' },
  ];
  const pad = size === 'lg' ? '7px 12px' : '5px 9px';
  const fs = size === 'lg' ? 13 : 12;
  return (
    <div role="group" aria-label="Idioma / Language / Idioma" style={{
      display: 'inline-flex', alignItems: 'center', gap: 2,
      background: 'var(--cream-100)', border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-pill)', padding: 2,
    }}>
      {opts.map((o) => {
        const on = lang === o.id;
        return (
          <button key={o.id} onClick={() => setLang(o.id)} aria-pressed={on}
            style={{
              fontFamily: 'var(--font-logo)', fontSize: fs, fontWeight: 700, letterSpacing: '0.06em',
              padding: pad, borderRadius: 'var(--radius-pill)', border: 'none', cursor: 'pointer',
              background: on ? 'var(--brown-700)' : 'transparent',
              color: on ? 'var(--cream-50)' : 'var(--warmgray-600)',
              transition: 'background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out)',
            }}
            onMouseEnter={(e) => { if (!on) e.currentTarget.style.color = 'var(--brown-700)'; }}
            onMouseLeave={(e) => { if (!on) e.currentTarget.style.color = 'var(--warmgray-600)'; }}
          >{o.label}</button>
        );
      })}
    </div>
  );
}

function Header({ active, onNav, onAnnounce }) {
  const { Button } = window.SBLImVeisDesignSystem_08a506;
  const { isMobile, isTablet } = window.useResponsive();
  const { t, lang, setLang } = window.useLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { id: 'home', label: 'Início' },
    { id: 'listings', label: 'Imóveis' },
    { id: 'season', label: 'Temporada' },
    { id: 'owner', label: 'Anuncie' },
    { id: 'contact', label: 'Contato' },
  ];
  return (
    <>
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'color-mix(in srgb, var(--cream-50) 86%, transparent)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--border-subtle)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 16px' : '0 40px', height: 84,
        display: 'flex', alignItems: 'center', gap: 30,
      }}>
        <a href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }}
          style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
          <img src="../../assets/logo_principal.png" alt="SBL" style={{ height: 58, width: 'auto' }} />
        </a>
        {!isMobile && (
          <nav style={{ display: 'flex', gap: 4, marginLeft: 12 }}>
            {links.map((l) => (
              <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); onNav(l.id); }}
                style={{
                  fontFamily: 'var(--font-body)', fontSize: isTablet ? 13 : 13.5, fontWeight: 500,
                  letterSpacing: '0.02em', padding: '10px 16px', borderRadius: 'var(--radius-pill)',
                  color: active === l.id ? 'var(--brown-700)' : 'var(--warmgray-600)',
                  background: active === l.id ? 'var(--rose-100)' : 'transparent',
                  transition: 'color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)',
                }}
                onMouseEnter={(e) => { if (active !== l.id) e.currentTarget.style.color = 'var(--brown-700)'; }}
                onMouseLeave={(e) => { if (active !== l.id) e.currentTarget.style.color = 'var(--warmgray-600)'; }}
              >{t(l.label)}</a>
            ))}
          </nav>
        )}
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          {!isMobile && <LangSwitch lang={lang} setLang={setLang} />}
          {!isMobile && !isTablet && (
            <a href="tel:+558399585248" style={{ display: 'flex', alignItems: 'center', gap: 7, color: 'var(--brown-600)', fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 500, textDecoration: 'none' }}>
              <i data-lucide="phone" style={{ width: 16, height: 16 }}></i> (83) 9958-5248
            </a>
          )}
          {!isMobile && (
            <Button variant="primary" size="sm" iconLeft="plus" onClick={onAnnounce}>{t('Anunciar imóvel')}</Button>
          )}
          {isMobile && (
            <button
              onClick={() => setMenuOpen(true)}
              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--brown-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 8 }}
            >
              <i data-lucide="menu" style={{ width: 26, height: 26 }}></i>
            </button>
          )}
        </div>
      </div>
    </header>

    {/* Mobile overlay menu — rendered outside <header> to avoid backdrop-filter stacking context */}
    {isMobile && menuOpen && (
      <div
        onClick={() => setMenuOpen(false)}
        style={{ position: 'fixed', inset: 0, background: 'rgba(30,20,12,0.6)', zIndex: 200 }}
      >
        <div
          onClick={(e) => e.stopPropagation()}
          style={{ position: 'absolute', top: 0, right: 0, width: 280, height: '100%', background: 'var(--cream-50)', padding: '32px 24px', display: 'flex', flexDirection: 'column', gap: 8, boxShadow: '-8px 0 32px rgba(30,20,12,0.18)' }}
        >
          <button
            onClick={() => setMenuOpen(false)}
            style={{ alignSelf: 'flex-end', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--brown-700)', marginBottom: 16, padding: 4 }}
          >
            <i data-lucide="x" style={{ width: 24, height: 24 }}></i>
          </button>
          {links.map((l) => (
            <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); onNav(l.id); setMenuOpen(false); }}
              style={{
                fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 500,
                padding: '14px 16px', borderRadius: 'var(--radius-pill)',
                color: active === l.id ? 'var(--brown-700)' : 'var(--warmgray-600)',
                background: active === l.id ? 'var(--rose-100)' : 'transparent',
                textDecoration: 'none', display: 'block',
              }}
            >{t(l.label)}</a>
          ))}
          <div style={{ marginTop: 16, borderTop: '1px solid var(--border-subtle)', paddingTop: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <LangSwitch lang={lang} setLang={setLang} size="lg" />
            </div>
            <a href="tel:+558399585248" style={{ display: 'flex', alignItems: 'center', gap: 7, color: 'var(--brown-600)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, textDecoration: 'none' }}>
              <i data-lucide="phone" style={{ width: 16, height: 16 }}></i> (83) 9958-5248
            </a>
            <Button variant="primary" size="md" iconLeft="plus" onClick={() => { onAnnounce(); setMenuOpen(false); }}>{t('Anunciar imóvel')}</Button>
          </div>
        </div>
      </div>
    )}
    </>
  );
}
window.Header = Header;