// IntroBand — white section directly below the dark hero.
// Adds breathing room between the dark hero image and the dark service cards.
// Light-mode typography, modest scale, serves as a "reset" before the next dark band.
function IntroBand() {
  return (
    <section style={{background:'#fff', color:'#111', padding:'88px 0'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 72, alignItems:'start'}}>
        <div>
          <div style={{fontSize: 12, fontWeight: 700, letterSpacing:'.18em', textTransform:'uppercase', color:'#B11871', marginBottom: 22}}>
            What We Do
          </div>
          <h2 style={{fontSize: 52, fontWeight: 700, lineHeight: 1.04, letterSpacing:'-.012em', margin: 0, color:'#111'}}>
            Social that actually<br/>
            <span style={{fontFamily:'var(--font-display)', fontWeight: 400, fontStyle:'normal', color:'#B11871'}}>moves</span>{' '}
            the business.
          </h2>
        </div>
        <div style={{paddingTop: 12}}>
          <p style={{fontSize: 17, lineHeight: 1.65, color:'#333', margin: 0, maxWidth: 480}}>
            We partner with mid-market brands who already have momentum and need social to keep up. No vanity metrics, no templated content calendars. Just strategy, creative, and publishing built around how your buyers actually pay attention.
          </p>
          <div style={{marginTop: 28, display:'flex', gap: 24, alignItems:'center'}}>
            <a href="#services" style={{fontSize: 14, fontWeight: 700, color:'#B11871', textDecoration:'underline', textUnderlineOffset: 3}}>Explore our services</a>
            <a href="#work" style={{fontSize: 14, fontWeight: 700, color:'#111', textDecoration:'underline', textUnderlineOffset: 3}}>See the work</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.IntroBand = IntroBand;