const SSN=window.SmartStoreNetworkDesignSystem_b60c94;

function Section({id,tone='page',children,style}){
  return <section id={id} style={{background:tone==='white'?'var(--white)':tone==='dark'?'var(--navy-900)':'var(--bg)',
    borderTop:tone==='white'?'1px solid var(--border)':'none',borderBottom:tone==='white'?'1px solid var(--border)':'none',...style}}>
    <div style={{maxWidth:'var(--container-wide)',margin:'0 auto',padding:'72px 40px'}}>{children}</div>
  </section>;
}

function SectionHead({eyebrow,title,intro,dark}){
  return <React.Fragment>
    {eyebrow&&<div style={{font:'var(--text-eyebrow)',letterSpacing:'var(--tracking-eyebrow)',textTransform:'uppercase',color:'var(--pink-600)',marginBottom:12}}>{eyebrow}</div>}
    <h2 style={{font:'var(--text-display-md)',color:dark?'var(--white)':'var(--navy-900)',margin:0,maxWidth:820,textWrap:'pretty'}}>{title}</h2>
    {intro&&<p style={{font:'var(--text-body-lg)',color:dark?'var(--color-text-on-dark-muted)':'var(--slate-500)',margin:'14px 0 0',maxWidth:760,textWrap:'pretty'}}>{intro}</p>}
  </React.Fragment>;
}

function StatTile({value,label,dark}){
  return <div style={{background:dark?'rgba(255,255,255,.06)':'var(--white)',
    border:dark?'1px solid rgba(255,255,255,.16)':'1px solid var(--border)',
    borderRadius:'var(--radius-card)',boxShadow:dark?'none':'var(--shadow-card)',padding:24}}>
    <div style={{font:'var(--text-display-md)',letterSpacing:'var(--tracking-display)',color:dark?'var(--pink-500)':'var(--pink-600)'}}>{value}</div>
    <div style={{font:'var(--text-body-sm)',color:dark?'var(--color-text-on-dark-muted)':'var(--slate-500)',marginTop:8,textWrap:'pretty'}}>{label}</div>
  </div>;
}

Object.assign(window,{Section,SectionHead,StatTile,SSN});