function Community() {
  const stats = [
    { n: "2,400+", l: "Women in the network" },
    { n: "47",     l: "Cities represented" },
    { n: "180",    l: "Mentor matches made" },
    { n: "12",     l: "Years convening" },
  ];
  const pillars = [
    { t: "Mentoring circles", b: "Small-group mentoring pods matched by career stage and sector — six-month cohorts, real accountability." },
    { t: "Peer network", b: "A members-only space to exchange introductions, referrals, and candid advice with women across industries." },
    { t: "Career resources", b: "Frameworks, scripts and playbooks for navigating the workplace challenges that rarely make it into textbooks." },
  ];

  return (
    <section id="community" className="section" style={{background:'var(--blush)', color:'var(--charcoal)'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(32px, 5vw, 80px)', alignItems:'center', marginBottom:'clamp(48px, 6vw, 80px)'}} className="grid-2">
          <div>
            <Eyebrow>CASC Global Community</Eyebrow>
            <h2 style={{marginTop:20, fontWeight:300, color:'var(--rose-deep)'}}>
              A place for women to be <span className="italic">championed</span>, not just sponsored.
            </h2>
            <p style={{marginTop:24, fontSize:17, lineHeight:1.7, color:'var(--ink)', maxWidth:520}}>
              We work directly with professional women — particularly those in the early to mid-stages of their careers — providing practical resources, frameworks and scripts to navigate workplace challenges with confidence.
            </p>
            <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
              <a href="#newsletter" className="btn btn-primary">Join the community</a>
              <a href="#events" className="btn btn-ghost">See upcoming events</a>
            </div>
          </div>
          <div>
            <ImgPh label="community event — roundtable" aspect="4 / 5" />
          </div>
        </div>

        <div style={{borderTop:'1px solid var(--blush-2)', borderBottom:'1px solid var(--blush-2)', padding:'clamp(32px, 4vw, 56px) 0', marginBottom:'clamp(48px, 6vw, 80px)'}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)'}} className="grid-4">
            {stats.map((s, i) => (
              <div key={s.l} style={{padding:'0 16px', borderLeft: i===0 ? 0 : '1px solid var(--blush-2)'}}>
                <div style={{fontFamily:'var(--heading-font)', fontSize:'clamp(36px,4vw,56px)', fontStyle:'italic', color:'var(--rose-deep)', lineHeight:1}}>{s.n}</div>
                <div style={{marginTop:10, fontSize:12, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--muted)'}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="grid-3">
          {pillars.map((p,i) => (
            <div key={p.t} style={{padding:'32px 0', borderTop:'1px solid var(--blush-2)'}}>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:16}}>
                <span className="diamond" style={{background:'var(--rose-deep)'}}></span>
                <span style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--muted)'}}>0{i+1}</span>
              </div>
              <h3 style={{fontStyle:'italic', fontWeight:400}}>{p.t}</h3>
              <p style={{marginTop:12, color:'var(--ink)', lineHeight:1.7}}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Community });