// SLIDE 07 — UNDERSTANDING USER DEMOGRAPHICS
function UserDemographicsSlide() {
  return (
    <Slide eyebrow="March 2026" logo="white" style={{label:"07 User Demographics"}}>
      {/* Title — custom tighter layout so it doesn't overflow */}
      <div style={{position:'absolute', left:56, top:76, width:1168}}>
        <div style={{fontFamily:'var(--font-sans)', fontWeight:800, fontSize:54, lineHeight:1.0, letterSpacing:'-.015em'}}>Understanding</div>
        <div style={{fontFamily:'var(--font-display)', fontWeight:400, fontSize:88, lineHeight:.98, marginTop:6, marginLeft:4, color:'#fff'}}>User Demographics</div>
      </div>

      {/* Column 1 — Hit List of Companies (cyan header — same treatment across the 3 columns) */}
      <div style={{position:'absolute', left: 56, top: 276, width: 310}}>
        <div style={{color: R.handwriting, fontWeight:700, fontSize:15, marginBottom: 18, letterSpacing:'.06em', textTransform:'uppercase'}}>The Hit List of Companies</div>
        <WhiteCard style={{padding:'18px 20px', borderRadius:16}}>
          <div style={{fontSize:10.5, lineHeight:1.5, color:'#222'}}>
            <p style={{margin:'0 0 10px'}}><b>RSM US LLP:</b> Consulting firm supporting middle-market growth.<br/><b>The move:</b> Strategy-first thought leadership — they want integrated partnerships, not execution-only services.</p>
            <p style={{margin:'0 0 10px'}}><b>EMC Insurance Companies:</b> National insurer in a regulated, trust-driven industry.<br/><b>The move:</b> Brand authority and long-term content systems that sustain credibility.</p>
            <p style={{margin:'0'}}><b>Smithfield Foods:</b> Food manufacturer spanning employer brand and consumer engagement.<br/><b>The move:</b> Full-funnel strategies connecting talent acquisition with brand storytelling.</p>
          </div>
        </WhiteCard>
        <div style={{marginTop:10, fontSize:11, fontStyle:'italic', textDecoration:'underline', color:'#fff'}}>Full List of Engaged Companies HERE</div>
      </div>

      {/* Column 2 — High Value New Followers (cyan header) */}
      <div style={{position:'absolute', left: 396, top: 276, width: 310}}>
        <div style={{color: R.handwriting, fontWeight:700, fontSize:15, marginBottom: 18, letterSpacing:'.06em', textTransform:'uppercase'}}>High Value New Followers</div>
        <WhiteCard style={{padding:'18px 20px', borderRadius:16}}>
          <div style={{fontSize:10.5, lineHeight:1.5, color:'#222'}}>
            <p style={{margin:'0 0 9px'}}><b>Jamahl Wright</b><br/><i>Executive leader with a growth and ROI mindset — aligned with decision-makers scaling performance.</i></p>
            <p style={{margin:'0 0 9px'}}><b>Mandar Chougale</b><br/><i>Strategy-oriented leader with pipeline alignment — a buyer focused on revenue efficiency.</i></p>
            <p style={{margin:'0 0 9px'}}><b>Whitney Houser, MBA, MA</b><br/><i>Cross-functional leader — influence across marketing, ops, and business strategy.</i></p>
            <p style={{margin:'0'}}><b>Peter Oliveto</b><br/><i>Revenue-focused executive — high-impact decision-maker driven by results.</i></p>
          </div>
        </WhiteCard>
        <div style={{marginTop:10, fontSize:11, fontStyle:'italic', textDecoration:'underline', color:'#fff'}}>Full List of New Followers HERE</div>
      </div>

      {/* Column 3 — Geography (cyan header, matches other two) */}
      <div style={{position:'absolute', left: 736, top: 276, width: 488}}>
        <div style={{color: R.handwriting, fontWeight:700, fontSize:15, marginBottom: 18, textAlign:'center', letterSpacing:'.06em', textTransform:'uppercase'}}>Geography</div>
        <div style={{position:'relative', background:'#fff', borderRadius: 16, padding:'16px 20px', display:'flex', justifyContent:'center', alignItems:'center', minHeight: 240}}>
          {/* US state grid — a readable abstraction of the country. Each cell = a state,
              positioned in roughly its geographic location. Heat overlay highlights IA/SD/NE region.
              (A labeled grid reads faster than a hand-drawn silhouette at this scale.) */}
          <svg viewBox="0 0 520 260" width="440" height="220" style={{display:'block'}}>
            {(() => {
              const states = [
                ['AK',0,0],['ME',10,0],
                ['WA',1,1],['ID',2,1],['MT',3,1],['ND',4,1],['MN',5,1],['WI',6,1],['MI',7,1],['NY',8,1],['VT',9,1],['NH',10,1],
                ['OR',1,2],['UT',2,2],['WY',3,2],['SD',4,2],['IA',5,2],['IL',6,2],['IN',7,2],['OH',8,2],['PA',9,2],['NJ',10,2],['CT',11,2],['RI',12,2],
                ['CA',1,3],['NV',2,3],['CO',3,3],['NE',4,3],['MO',5,3],['KY',6,3],['WV',7,3],['VA',8,3],['MD',9,3],['DE',10,3],
                [null,1,4],['AZ',2,4],['NM',3,4],['KS',4,4],['AR',5,4],['TN',6,4],['NC',7,4],['SC',8,4],
                ['HI',0,5],[null,2,5],[null,3,5],['OK',4,5],['LA',5,5],['MS',6,5],['AL',7,5],['GA',8,5],
                [null,4,6],['TX',5,6],[null,6,6],[null,7,6],['FL',9,6],
              ];
              const cell = 38, pad = 4;
              const heat = new Set(['IA','SD','NE','MN']);
              const heat2 = new Set(['WI','IL','ND','MO','KS']);
              return states.map(([code, x, y]) => {
                if (!code) return null;
                const fill = heat.has(code) ? '#ef4444' : heat2.has(code) ? '#f97316' : '#f3eadc';
                const textColor = (heat.has(code) || heat2.has(code)) ? '#fff' : '#111';
                return (
                  <g key={code} transform={`translate(${x*cell+10}, ${y*cell+6})`}>
                    <rect width={cell-pad} height={cell-pad} fill={fill} stroke="#111" strokeWidth="1.2" rx="4"/>
                    <text x={(cell-pad)/2} y={(cell-pad)/2+4} textAnchor="middle" fontFamily="var(--font-sans)" fontSize="11" fontWeight="700" fill={textColor}>{code}</text>
                  </g>
                );
              });
            })()}
          </svg>
        </div>
        {/* Legend */}
        <div style={{marginTop:16, display:'flex', flexDirection:'column', gap:8, fontSize:12, fontStyle:'italic'}}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <span style={{width:12, height:12, borderRadius:999, background:'#ef4444'}}/>
            High Intent Markets - Clicks
          </div>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <span style={{width:12, height:12, borderRadius:999, background:'#f97316'}}/>
            High Visibility Markets - Impressions
          </div>
        </div>
      </div>
    </Slide>
  );
}

window.UserDemographicsSlide = UserDemographicsSlide;