/* Header — sticky, with logo, nav, currency toggle, language toggle, account */

const headerStyles = {
  bar: {
    position: 'sticky', top: 0, zIndex: 100,
    background: 'rgba(250, 246, 238, 0.92)',
    borderBottom: '1px solid var(--rule)',
    backdropFilter: 'blur(10px)',
  },
  inner: {
    maxWidth: 'var(--container)',
    margin: '0 auto',
    padding: '14px var(--gutter)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: 24,
  },
  brandRow: { display: 'flex', alignItems: 'center', gap: 32 },
  logo: {
    fontFamily: 'var(--font-display)',
    fontWeight: 800,
    fontSize: 28,
    letterSpacing: '-0.045em',
    color: 'var(--ink)',
    fontVariationSettings: "'opsz' 144, 'SOFT' 0",
    display: 'inline-flex', alignItems: 'baseline', gap: 0,
    lineHeight: 1,
  },
  dot: { color: 'var(--coral)', fontSize: 36, lineHeight: 0.6, marginLeft: 1 },
  nav: {
    display: 'flex', gap: 28,
    fontSize: 14, fontWeight: 500,
  },
  navItem: { display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--ink)', cursor: 'pointer' },
  rightRow: { display: 'flex', alignItems: 'center', gap: 12 },
  currencyToggle: {
    display: 'inline-flex', alignItems: 'center',
    background: 'var(--paper-2)',
    border: '1px solid var(--rule)',
    borderRadius: 999,
    padding: 3,
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.06em',
  },
  cToggleBtn: (active) => ({
    padding: '5px 11px',
    borderRadius: 999,
    background: active ? 'var(--ink)' : 'transparent',
    color: active ? 'var(--paper)' : 'var(--ink-mute)',
    fontWeight: 600,
    cursor: 'pointer',
  }),
  langBtn: {
    height: 36, padding: '0 12px',
    borderRadius: 999,
    border: '1px solid var(--rule)',
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.08em',
    color: 'var(--ink)',
    background: 'transparent',
    display: 'inline-flex', alignItems: 'center', gap: 6,
  },
  accountBtn: {
    height: 40,
    padding: '0 12px 0 14px',
    borderRadius: 999,
    border: '1px solid var(--rule-strong)',
    background: 'var(--surface)',
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontWeight: 500, fontSize: 13,
  },
  accountDot: {
    width: 28, height: 28, borderRadius: 999,
    background: 'var(--lagoon)',
    color: 'var(--paper)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13,
  },
  vendorPill: {
    fontFamily: 'var(--font-mono)', fontSize: 11,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'var(--coral)',
    fontWeight: 600,
  },
};

function SiteHeader({ current = '' }) {
  const [state] = window.MalziveState.useMalziveState();
  const cur = state.currency;
  const cartCount = (state.cart || []).reduce((a, c) => a + (c.qty || 1), 0);
  const [lang, setLang] = React.useState('EN');
  const change = (c) => { window.MalziveState.setCurrency(c); };
  return (
    <header style={headerStyles.bar} data-screen-label="Header">
      <div style={headerStyles.inner}>
        <div style={headerStyles.brandRow}>
          <a href="prototype-home.html" style={headerStyles.logo} aria-label="Malzive home">
            malzive<span style={headerStyles.dot}>.</span>
          </a>
          <nav style={headerStyles.nav} aria-label="Primary">
            <a href="prototype-browse.html?v=stay" style={{...headerStyles.navItem, color: current==='stay'?'var(--coral)':'var(--ink)'}}>Stay</a>
            <a href="prototype-browse.html?v=charter" style={{...headerStyles.navItem, color: current==='charter'?'var(--coral)':'var(--ink)'}}>Charter</a>
            <a href="prototype-browse.html?v=experience" style={{...headerStyles.navItem, color: current==='experience'?'var(--coral)':'var(--ink)'}}>Experiences</a>
            <a href="prototype-browse.html?v=shop" style={{...headerStyles.navItem, color: current==='shop'?'var(--coral)':'var(--ink)'}}>Shop</a>
            <a href="prototype-browse.html?v=eat" style={{...headerStyles.navItem, color: current==='eat'?'var(--coral)':'var(--ink)'}}>Eat</a>
            <a href="#atlas" style={headerStyles.navItem}>The Atlas</a>
          </nav>
        </div>
        <div style={headerStyles.rightRow}>
          <a href="prototype-onboarding.html" style={headerStyles.vendorPill}>Sell on Malzive →</a>
          <div style={headerStyles.currencyToggle} role="radiogroup" aria-label="Currency">
            <button style={headerStyles.cToggleBtn(cur==='USD')} onClick={() => change('USD')}>USD</button>
            <button style={headerStyles.cToggleBtn(cur==='MVR')} onClick={() => change('MVR')}>MVR</button>
          </div>
          <button style={headerStyles.langBtn}>
            <Icon name="globe" size={14}/> {lang === 'EN' ? 'EN' : 'ދ'}
          </button>
          <a href="prototype-saved.html" style={{ ...headerStyles.accountBtn, position: 'relative', padding: '0 14px' }} aria-label="Saved">
            <Icon name={(state.saved || []).length > 0 ? 'heart-fill' : 'heart'} size={16} color={(state.saved || []).length > 0 ? 'var(--coral)' : 'var(--ink)'}/>
            {(state.saved || []).length > 0 && (
              <span style={{
                position: 'absolute', top: -4, right: -4,
                background: 'var(--ink)', color: 'var(--paper)',
                borderRadius: 999, minWidth: 20, height: 20,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-mono)',
                padding: '0 6px',
                border: '2px solid var(--paper)',
              }}>{(state.saved || []).length}</span>
            )}
          </a>
          <a href="prototype-checkout.html" style={{ ...headerStyles.accountBtn, position: 'relative', padding: '0 14px' }} aria-label="Cart">
            <Icon name="bag" size={16}/>
            {cartCount > 0 && (
              <span style={{
                position: 'absolute', top: -4, right: -4,
                background: 'var(--coral)', color: 'white',
                borderRadius: 999, minWidth: 20, height: 20,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-mono)',
                padding: '0 6px',
                border: '2px solid var(--paper)',
              }}>{cartCount}</span>
            )}
          </a>
          <button style={headerStyles.accountBtn}>
            <span style={headerStyles.accountDot}>H</span>
            Account
          </button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { SiteHeader });