const {Icon}=SSN;

function SocialPoint({icon,title,text}){
  return <div style={{display:'flex',gap:14,alignItems:'flex-start'}}>
    <div style={{width:44,height:44,flexShrink:0,borderRadius:'var(--radius-md)',background:'rgba(255,255,255,.08)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon name={icon} size={24} color="var(--pink-500)"/></div>
    <div><h3 style={{font:'var(--text-heading-sm)',color:'var(--white)',margin:'2px 0 6px'}}>{title}</h3>
    <p style={{font:'var(--text-body-sm)',color:'var(--color-text-on-dark-muted)',margin:0,textWrap:'pretty'}}>{text}</p></div>
  </div>;
}

const socialSteps=[
  ['Brief','Tell us the brand, audience and objective.'],
  ['Plan','We create and manage the campaign across participating store pages.'],
  ['Activate','Brand content runs on Facebook and Instagram through local stores.'],
  ['Measure','Reach, impressions, engagement and CPM are reported.'],
  ['Analyse sales','Store and SKU-level EPOS data is reviewed against campaign activity.'],
];

function SocialMedia(){
  return <Section id="social" tone="dark">
    <div style={{display:'grid',gridTemplateColumns:'minmax(0,1.1fr) minmax(0,1fr)',gap:56,alignItems:'start'}}>
      <div>
        <SectionHead dark eyebrow="Social media" title="Local social reach, delivered at national scale"
          intro="Each participating store has its own trusted local social presence. Smart Store Network turns thousands of these community audiences into one network brands and agencies can buy as a single campaign."/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,minmax(0,1fr))',gap:28,marginTop:36}}>
          <SocialPoint icon="groups" title="Mass reach" text="UK-wide potential, built from participating local store audiences."/>
          <SocialPoint icon="favorite" title="High engagement" text="Content from a familiar local store, seen by people who already shop there."/>
          <SocialPoint icon="payments" title="Efficient CPM" text="Lower CPM costs – 70% less than buying nationally."/>
          <SocialPoint icon="query_stats" title="Sales measured" text="See what happened to sales, not just impressions and clicks."/>
        </div>
        <div style={{display:'flex',gap:14,alignItems:'center',marginTop:36}}>
          <img src={window.__resources.fb} alt="Facebook" style={{height:30}}/>
          <img src={window.__resources.ig} alt="Instagram" style={{height:30}}/>
        </div>
      </div>
      <div style={{background:'var(--white)',borderRadius:'var(--radius-card)',padding:'var(--space-6)'}}>
        <div style={{font:'var(--text-eyebrow)',letterSpacing:'var(--tracking-eyebrow)',textTransform:'uppercase',color:'var(--pink-600)',marginBottom:18}}>How a social campaign works</div>
        <div style={{display:'grid',gap:0}}>
          {socialSteps.map(([t,x],i)=><div key={t} style={{display:'flex',gap:16,padding:'14px 0',borderTop:i?'1px solid var(--border)':'none'}}>
            <div style={{width:32,height:32,flexShrink:0,borderRadius:'50%',background:'var(--pink-600)',color:'var(--white)',font:'var(--text-label)',display:'flex',alignItems:'center',justifyContent:'center'}}>{i+1}</div>
            <div><div style={{font:'var(--text-heading-sm)',color:'var(--navy-900)'}}>{t}</div>
            <div style={{font:'var(--text-body-sm)',color:'var(--slate-500)',marginTop:4,textWrap:'pretty'}}>{x}</div></div>
          </div>)}
        </div>
      </div>
    </div>
  </Section>;
}
Object.assign(window,{SocialMedia});