const {Button,Badge,Icon}=SSN;

function AdvertiserHero({onContact}){
  return <section style={{background:'var(--white)',borderBottom:'1px solid var(--border)'}}>
    <div style={{maxWidth:'var(--container-wide)',margin:'0 auto',padding:'72px 40px',display:'grid',gridTemplateColumns:'1.05fr 1fr',gap:56,alignItems:'center'}}>
      <div>
        <Badge kind="label">For Brands &amp; Agencies</Badge>
        <h1 style={{font:'var(--text-display-lg)',letterSpacing:'var(--tracking-display)',color:'var(--navy-900)',margin:'18px 0 0',maxWidth:600,textWrap:'pretty'}}>Reach convenience shoppers where buying decisions happen</h1>
        <p style={{font:'var(--text-body-lg)',color:'var(--slate-500)',margin:'18px 0 0',maxWidth:560,textWrap:'pretty'}}>Connecting brands with local shoppers through the Smart Store Network.</p>
        <p style={{font:'var(--text-body-md)',color:'var(--slate-500)',margin:'14px 0 0',maxWidth:560,textWrap:'pretty'}}>Target shoppers through social media advertising delivered via participating local stores, putting your brand in front of relevant local audiences through one managed network.</p>
        <Button size="large" style={{marginTop:32}} onClick={onContact} iconAfter={<Icon name="arrow_forward" size={18}/>}>Talk to us about advertising opportunities</Button>
      </div>
      <img src={window.__resources.heroImg} alt="Shoppers choosing products in a convenience store"
        style={{width:'100%',borderRadius:'var(--radius-card)',boxShadow:'var(--shadow-lg)'}}/>
    </div>
  </section>;
}
Object.assign(window,{AdvertiserHero});