// Hero — asymmetric hero, dark background, photo collage right (no pink backdrop shape)
function Hero() {
  return (
    <section className="section bg-black-pink-radial" style={{paddingTop: 96, paddingBottom: 128, position:'relative', overflow:'hidden'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 56, alignItems: 'center', position:'relative', zIndex:1}}>
        <div>
          <h1 style={{fontWeight:800, fontSize:'clamp(48px, 6vw, 88px)', lineHeight:.98, letterSpacing:'-.015em', margin:0}}>
            The Agency<br/>
            That Brands<br/>
            Call When<br/>
            Social Gets{' '}
            <span style={{position:'relative', display:'inline-block', whiteSpace:'nowrap'}}>
              <span style={{fontWeight: 800}}>Messy.</span>
              {/* Lime hand-drawn squiggle, per brand */}
              <svg viewBox="0 0 260 14" preserveAspectRatio="none" style={{position:'absolute', left: 0, right: 18, bottom:-10, width:'calc(100% - 18px)', height: 12, overflow:'visible'}}>
                <path d="M2 8 Q 20 -2, 38 8 T 74 8 T 110 8 T 146 8 T 182 8 T 218 8 T 254 8" stroke="#DEE22A" strokeWidth="4" fill="none" strokeLinecap="round"/>
              </svg>
            </span>
          </h1>
          <p style={{marginTop: 34, maxWidth: 440, fontSize: 16, color:'#d4d4d4', lineHeight: 1.6}}>
            Full-service social media built by humans who get it. We turn comment-section chaos into measurable business growth, for mid-market brands ready to take social seriously.
          </p>
          <div style={{marginTop: 32, display:'flex', gap: 14}}>
            <a href="#" className="btn btn-primary">Start the Conversation</a>
            <a href="#work" className="btn btn-ghost">See Our Work</a>
          </div>
        </div>

        <div style={{position:'relative', height: 560}}>
          <div style={{position:'absolute', top: 30, left: 40, width: 280, height: 360, transform: 'rotate(-4deg)'}}>
            <img src="../../assets/photos/team-hug-brick.jpg" className="photo-tile" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
          </div>
          <div style={{position:'absolute', top: 140, right: 0, width: 240, height: 310, transform: 'rotate(3deg)'}}>
            <img src="../../assets/photos/two-phones-bridge.jpg" className="photo-tile" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
          </div>
          <div style={{position:'absolute', bottom: 0, left: 140, width: 220, height: 280, transform: 'rotate(-2deg)'}}>
            <img src="../../assets/photos/team-group-waving.jpg" className="photo-tile" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
          </div>
          {/* Pink backdrop shape removed per feedback */}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;