// ui_kits/website/Header.jsx
//
// Brand row + 6-item nav + social icons + EN/ES switcher.
// Switcher is a circular badge (current language code) with a dropdown
// chevron — click to open a small popover with both languages.

const headerStyles = {
  top: {
    background: '#fff',
    borderBottom: '1px solid var(--color-divider)',
  },
  topBar: {
    background: 'var(--brand-leaf)',
    color: '#fff',
    fontSize: 12,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    fontFamily: 'var(--font-sans)',
    fontWeight: 600,
  },
  topBarInner: {
    maxWidth: 1200, margin: '0 auto', padding: '8px 32px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  main: {
    maxWidth: 1200, margin: '0 auto', padding: '20px 32px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  brand: { display: 'flex', alignItems: 'center', gap: 14 },
  logo: { width: 64, height: 64, borderRadius: '50%', objectFit: 'cover' },
  wordmark: {
    fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22,
    letterSpacing: '0.06em', color: '#151414', lineHeight: 1,
    whiteSpace: 'nowrap',
  },
  tagline: {
    fontFamily: 'var(--font-sans)', fontSize: 10,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: '#525150', marginTop: 4,
  },
  nav: { display: 'flex', alignItems: 'center', gap: 28 },
  navLink: {
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
    letterSpacing: '0.08em', textTransform: 'uppercase',
    color: '#383838', textDecoration: 'none', cursor: 'pointer',
    padding: '6px 0',
    borderBottomWidth: 2, borderBottomStyle: 'solid', borderBottomColor: 'transparent',
    transition: 'all 200ms var(--ease-out)',
  },
  navLinkActive: {
    color: 'var(--brand-leaf)',
    borderBottomColor: 'var(--brand-leaf)',
  },
  social: { display: 'flex', alignItems: 'center', gap: 8 },
  socialBtn: {
    width: 34, height: 34, borderRadius: '50%',
    background: '#FBF8F2', border: '1px solid var(--color-divider)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--brand-leaf)', cursor: 'pointer',
    transition: 'all 200ms var(--ease-out)',
  },

  // -------- Language switcher (Option 4: circular badge + chevron) --------
  langWrap: { position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 8 },
  langTrigger: {
    display: 'flex', alignItems: 'center', gap: 6,
    cursor: 'pointer', userSelect: 'none',
    padding: '2px 4px 2px 2px',
    border: 'none', background: 'transparent',
    color: '#fff',
  },
  langBadge: {
    width: 26, height: 26, borderRadius: '50%',
    background: 'rgba(255,255,255,0.16)',
    border: '1px solid rgba(255,255,255,0.55)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 10.5,
    letterSpacing: '0.06em', color: '#fff',
    transition: 'all 180ms var(--ease-out)',
  },
  langMenu: {
    position: 'absolute', top: 'calc(100% + 10px)', right: 0,
    minWidth: 160,
    background: '#fff',
    border: '1px solid var(--color-divider)',
    borderRadius: 10,
    boxShadow: '0 18px 40px rgba(15,15,15,0.18)',
    padding: 6,
    zIndex: 50,
  },
  langOption: {
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '8px 12px', borderRadius: 6,
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
    letterSpacing: 'normal', textTransform: 'none',
    color: '#383838', cursor: 'pointer',
    border: 'none', background: 'transparent',
    width: '100%', textAlign: 'left',
  },
  langOptionActive: {
    background: 'var(--brand-cream)',
    color: 'var(--brand-leaf)',
    fontWeight: 700,
  },
  langOptionBadge: {
    width: 22, height: 22, borderRadius: '50%',
    background: 'var(--brand-mint-wash, #EAF6EF)',
    color: 'var(--brand-leaf)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 9.5,
    letterSpacing: '0.04em',
  },
};

// Nav items reference category keys; labels come from i18n strings.
const NAV_ITEMS = [
  { key: 'Health',    i18n: 'nav.health' },
  { key: 'Beauty',    i18n: 'nav.beauty' },
  { key: 'Nutrition', i18n: 'nav.nutrition' },
  { key: 'Exercise',  i18n: 'nav.exercise' },
  { key: 'Shop',      i18n: 'nav.shop' },
  { key: 'Podcasts',  i18n: 'nav.podcasts' },
];

function LangSwitcher({ lang, onSetLang }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  // Click-outside to close
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);

  // Esc to close
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open]);

  const meta = window.I18N_LANG_META;
  const langs = window.I18N_LANGS;

  return (
    <div style={headerStyles.langWrap} ref={ref}>
      <button
        type="button"
        style={headerStyles.langTrigger}
        onClick={() => setOpen(o => !o)}
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-label={meta[lang].label}
        title={meta[lang].label}>
        <span style={headerStyles.langBadge}>{meta[lang].code}</span>
        <ChevronDown size={12} style={{
          transition: 'transform 180ms var(--ease-out)',
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
        }}/>
      </button>

      {open && (
        <div style={headerStyles.langMenu} role="listbox">
          {langs.map(code => {
            const active = code === lang;
            return (
              <button
                key={code} type="button" role="option" aria-selected={active}
                style={{ ...headerStyles.langOption, ...(active ? headerStyles.langOptionActive : {}) }}
                onClick={() => { onSetLang(code); setOpen(false); }}>
                <span style={headerStyles.langOptionBadge}>{meta[code].code}</span>
                <span>{meta[code].label}</span>
                {active && <span style={{ marginLeft: 'auto', color: 'var(--brand-leaf)' }}>✓</span>}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

function Header({ active = 'Health', lang = 'es', onNav, onSetLang, onLogoClick }) {
  const tr = useT();
  return (
    <header style={headerStyles.top}>
      <div style={headerStyles.topBar}>
        <div style={headerStyles.topBarInner}>
          <span>{tr('header.topBar.tagline')}</span>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <LangSwitcher lang={lang} onSetLang={onSetLang}/>
            <span style={{ cursor: 'pointer' }}>{tr('header.support')}</span>
          </div>
        </div>
      </div>

      <div style={headerStyles.main}>
        <div style={{ ...headerStyles.brand, cursor: onLogoClick ? 'pointer' : 'default' }} onClick={onLogoClick}>
          <img src="logo.png" alt="Top Natural Tips" style={headerStyles.logo}/>
          <div>
            <div style={headerStyles.wordmark}>TOP NATURAL TIPS</div>
            <div style={headerStyles.tagline}>{tr('header.brand.tagline')}</div>
          </div>
        </div>

        <nav style={headerStyles.nav}>
          {NAV_ITEMS.map(item => {
            const isActive = active === item.key;
            return (
              <a key={item.key}
                 style={{ ...headerStyles.navLink, ...(isActive ? headerStyles.navLinkActive : {}) }}
                 onClick={() => onNav && onNav(item.key)}>
                {tr(item.i18n)}
              </a>
            );
          })}
        </nav>

        <div style={headerStyles.social}>
          <a style={headerStyles.socialBtn} title="Instagram" href="https://www.instagram.com/topnaturaltips/" target="_blank" rel="noopener"><InstagramIcon size={16}/></a>
          <a style={headerStyles.socialBtn} title="YouTube" href="https://www.youtube.com/@top_naturaltips" target="_blank" rel="noopener"><YouTubeIcon size={16}/></a>
          <a style={headerStyles.socialBtn} title="Facebook" href="https://www.facebook.com/topnaturaltips" target="_blank" rel="noopener"><FacebookIcon size={14}/></a>
          <a style={headerStyles.socialBtn} title="TikTok" href="https://www.tiktok.com/@topnaturaltips" target="_blank" rel="noopener"><TikTokIcon size={14}/></a>
          <button style={{ ...headerStyles.socialBtn, background: 'transparent', border: 'none', color: '#151414' }}>
            <SearchIcon size={18}/>
          </button>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;
window.LangSwitcher = LangSwitcher;
window.NAV_ITEMS = NAV_ITEMS;