// Syndication & Partners — hub shell. Tabs: Republishing · Backlinks · Partners.

function Syndication({setRoute}){
  const [tab, setTab] = React.useState('republish');
  const tabs = [
    ['republish','Republishing','Dual-publish independent writers'],
    ['backlinks','Backlinks','Links, paid inventory & health'],
    ['partners','Partners','Advertising & SEO onboarding'],
  ];
  const bc = { republish:'SYNDICATION · DUAL-PUBLISH', backlinks:'SYNDICATION · BACKLINKS', partners:'SYNDICATION · PARTNER ONBOARDING' }[tab];

  return (
    <AdminShell route="synd" setRoute={setRoute} title="Syndication & partners" breadcrumb={bc}
      actions={<a href="Partner.html" target="_blank" className="btn g" style={{textDecoration:'none'}}>Public intake ↗</a>}>

      <div style={{display:'flex',gap:0,borderBottom:'1px solid var(--rule-line)',marginBottom:18}}>
        {tabs.map(([id,label,sub])=>(
          <button key={id} onClick={()=>setTab(id)} style={{
            appearance:'none',border:'none',background:'none',cursor:'default',padding:'0 18px 12px 0',marginRight:18,textAlign:'left',
            borderBottom:'2px solid '+(tab===id?'var(--black)':'transparent'),marginBottom:-1}}>
            <div className="serif" style={{fontSize:15,fontWeight:700,color:tab===id?'var(--ink)':'var(--mute)',letterSpacing:'-.005em'}}>{label}</div>
            <div className="mono" style={{fontSize:9,letterSpacing:'.06em',color:'var(--mute)',textTransform:'uppercase',marginTop:2}}>{sub}</div>
          </button>
        ))}
      </div>

      {tab==='republish' && <SyndRepublish/>}
      {tab==='backlinks' && <SyndBacklinks/>}
      {tab==='partners'  && <SyndPartners/>}
    </AdminShell>
  );
}

window.Syndication = Syndication;