// Footer — solid black, logo + 3 column links + social row + © line
function Footer() {
  return (
    <footer style={{background:'#000', color:'#fff', paddingTop:64, paddingBottom:24, borderTop:'1px solid #1f1f1f'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:48}}>
        <div>
          <img src="../../assets/logo-horizontal-whitepink.png" alt="Chatterkick" style={{height:26, marginBottom:24}}/>
          <p style={{fontSize:13, lineHeight:1.6, color:'#d4d4d4', maxWidth:360}}>
            Born in Iowa and growing up globally, we are a digital marketing partnership focused on helping mid-market businesses expand the impact of social media throughout their entire organizations. We offer full-service campaign management as well as training and strategy workshops.
          </p>
          <div style={{marginTop:20, display:'flex', gap:10}}>
            {[
              { k:'facebook',  d:'M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.6-1.6h1.7V4.2c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1v2.6H7.7V14h2.7v8h3.1z' },
              { k:'instagram', d:'M8 3h8a5 5 0 015 5v8a5 5 0 01-5 5H8a5 5 0 01-5-5V8a5 5 0 015-5zm0 2a3 3 0 00-3 3v8a3 3 0 003 3h8a3 3 0 003-3V8a3 3 0 00-3-3H8zm9 1.5a1 1 0 110 2 1 1 0 010-2zM12 7.5a4.5 4.5 0 110 9 4.5 4.5 0 010-9zm0 2a2.5 2.5 0 100 5 2.5 2.5 0 000-5z' },
              { k:'tiktok',    d:'M14 3h2.2c.2 1.3.9 2.4 1.9 3.2.9.7 2 1.1 3.2 1.1v2.4c-1.9 0-3.6-.6-5.1-1.6v6.7c0 3.6-2.9 6.5-6.5 6.5S3.2 18.4 3.2 14.8 6.1 8.3 9.7 8.3c.5 0 .9 0 1.4.1v2.5c-.4-.1-.9-.2-1.4-.2-2.3 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1 4.1-1.8 4.1-4.1V3z' },
              { k:'x',         d:'M17.7 3h2.8l-6.2 7.1L22 21h-5.7l-4.5-5.9L6.6 21H3.8l6.6-7.6L3 3h5.8l4 5.4L17.7 3zm-1 16h1.6L7.4 4.9H5.7L16.7 19z' },
              { k:'linkedin',  d:'M6 8.5h2.6v9H6zM7.3 4.7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10.4 8.5H13v1.2c.4-.7 1.3-1.4 2.7-1.4 2.9 0 3.4 1.9 3.4 4.3v4.9h-2.6v-3.4c0-1 0-2.3-1.4-2.3-1.4 0-1.6 1.1-1.6 2.2v3.5h-2.6v-9z' },
              { k:'youtube',   d:'M21.6 7.2c-.2-.9-.9-1.6-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4c-.9.2-1.6.9-1.8 1.8C2 8.8 2 12 2 12s0 3.2.4 4.8c.2.9.9 1.6 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4c.9-.2 1.6-.9 1.8-1.8.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5 3-5 3z' },
            ].map(s => (
              <a key={s.k} href="#" aria-label={s.k} style={{width:34, height:34, borderRadius:999, border:'1px solid #3a3a3a', display:'inline-flex', alignItems:'center', justifyContent:'center', textDecoration:'none', color:'#fff', transition:'background 140ms, border-color 140ms'}} onMouseEnter={e=>{e.currentTarget.style.background='#B11871'; e.currentTarget.style.borderColor='#B11871';}} onMouseLeave={e=>{e.currentTarget.style.background='transparent'; e.currentTarget.style.borderColor='#3a3a3a';}}>
                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d={s.d}/></svg>
              </a>
            ))}
          </div>
        </div>
        <FooterCol title="Info" items={["Home","Services","About","Contact"]}/>
        <FooterCol title="Resources" items={["Blog","Newsletter","Freebies","Podcast"]}/>
        <div>
          <FooterCol title="Contact Us" items={["(712) 274-3786","info@chatterkick.com"]}/>
          <div style={{height:12}}/>
          <FooterCol title="Careers" items={["Work For Us","The Creative Network"]}/>
        </div>
      </div>
      <div className="wrap" style={{marginTop:48, paddingTop:20, borderTop:'1px solid #1f1f1f', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:12, color:'#8a8a8a'}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <img src="../../assets/icon-white.png" alt="" style={{width:18, height:18, opacity:.8}}/>
          <span>© Chatterkick 2026 &nbsp;|&nbsp; <a href="#" style={{color:'#8a8a8a'}}>Privacy</a> &nbsp;|&nbsp; <a href="#" style={{color:'#8a8a8a'}}>Terms</a> &nbsp;|&nbsp; <a href="#" style={{color:'#8a8a8a'}}>Accessibility</a> &nbsp;|&nbsp; <a href="#" style={{color:'#8a8a8a'}}>MSA</a></span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{fontWeight:700, fontSize:15, marginBottom:12}}>{title}</div>
      {items.map(i => (
        <a key={i} href="#" style={{display:'block', fontSize:13, fontWeight:500, color:'#d4d4d4', textDecoration:'underline', textUnderlineOffset:3, marginBottom:6}}>{i}</a>
      ))}
    </div>
  );
}

window.Footer = Footer;