const {Button,NavTabs}=SSN;

function AdvertiserHeader({tab,onTab,onContact}){
  const [menuOpen,setMenuOpen]=React.useState(false);
  const menuId='ssn-mobile-navigation';
  const navItems=['The Opportunity','Social','Why SSN','Reach & Data'];
  const selectTab=(item)=>{setMenuOpen(false);onTab(item);};
  const contact=()=>{setMenuOpen(false);onContact();};
  return <header className="ssn-site-header" style={{position:'sticky',top:0,zIndex:30,background:'var(--white)',borderBottom:'1px solid var(--border)'}}>
    <div className="ssn-header-inner" style={{maxWidth:'var(--container-wide)',margin:'0 auto',padding:'14px 40px',display:'flex',alignItems:'center',gap:24,flexWrap:'wrap'}}>
      <img className="ssn-header-logo" src={window.__resources.logoLight} alt="Smart Store Network" style={{height:36,width:'auto',display:'block'}}/>
      <div className="ssn-desktop-nav" style={{flex:1,display:'flex',justifyContent:'safe center',minWidth:0,overflowX:'auto',scrollbarWidth:'none'}}>
        <NavTabs style={{padding:0,background:'transparent',border:'none'}} tabs={navItems.map(t=>({value:t,label:<span style={{whiteSpace:'nowrap'}}>{t}</span>}))} value={tab} onChange={onTab}/>
      </div>
      <div className="ssn-desktop-contact"><Button size="medium" onClick={onContact}>Talk to us</Button></div>
      <button className="ssn-menu-toggle" type="button" aria-label={menuOpen?'Close navigation menu':'Open navigation menu'} aria-expanded={menuOpen} aria-controls={menuId} onClick={()=>setMenuOpen(open=>!open)}>
        {menuOpen?<span aria-hidden="true" className="ssn-menu-close">×</span>:<span aria-hidden="true" className="ssn-menu-bars"><i/><i/><i/></span>}
      </button>
    </div>
    <nav id={menuId} className={'ssn-mobile-nav'+(menuOpen?' is-open':'')} aria-label="Mobile navigation" hidden={!menuOpen}>
      {navItems.map(item=><button key={item} type="button" className={'ssn-mobile-nav-link'+(tab===item?' is-active':'')} onClick={()=>selectTab(item)}>{item}</button>)}
      <button type="button" className="ssn-mobile-nav-contact" onClick={contact}>Talk to us</button>
    </nav>
  </header>;
}
Object.assign(window,{AdvertiserHeader});