const {CheckListItem}=SSN;

function WhySSN(){
  return <Section id="why" tone="white">
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:56,alignItems:'start'}}>
      <div>
        <SectionHead eyebrow="Why SSN" title="Why Smart Store Network?"
          intro="Independent convenience has scale, but historically it has been difficult for brands to access through a single connected media network."/>
        <p style={{font:'var(--text-body-md)',color:'var(--slate-500)',margin:'18px 0 0',textWrap:'pretty'}}>Smart Store Network brings together local retailer relationships, advertising technology and sales data to create a more connected way for brands to reach this audience.</p>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        <CheckListItem>Local retailer relationships across the independent sector</CheckListItem>
        <CheckListItem>Advertising technology and Meta targeting attributes</CheckListItem>
        <CheckListItem>Local social media reach across participating independent convenience stores</CheckListItem>
        <CheckListItem>Store and SKU-level EPOS sales data</CheckListItem>
      </div>
    </div>
    <div style={{background:'var(--slate-100)',borderRadius:'var(--radius-card)',padding:'32px 40px',marginTop:40,display:'flex',alignItems:'center',justifyContent:'space-between',gap:40,flexWrap:'wrap'}}>
      <p style={{font:'var(--text-body-md)',color:'var(--navy-800)',margin:0,maxWidth:460,textWrap:'pretty'}}>Smart Store Network is operated by Rascal Systems, working with SG-retail and specialist partners across social activation, advertiser engagement and independent campaign measurement.</p>
      <div className="ssn-partner-logos" style={{display:'flex',alignItems:'center',gap:36,flexWrap:'wrap'}}>
        <img src={window.__resources.rascalLogo} alt="Rascal Systems" className="ssn-partner-logo" style={{height:44}}/>
        <img src={window.__ssnThemeLogo} alt="SG-retail" className="ssn-partner-logo" style={{height:44,width:'auto',display:'block'}}/>
        <img src={window.__resources.socioLocalLogo} alt="SocioLocal" className="ssn-partner-logo" style={{height:44}}/>
        <img src={window.__resources.talysis} alt="Talysis" className="ssn-partner-logo ssn-partner-logo--talysis" style={{height:56}}/>
      </div>
    </div>
  </Section>;
}
Object.assign(window,{WhySSN});