function CommunityPage(){
  const { Receipt } = window.WongaToursDesignSystem_8d122a;
  const Curve = window.Curve, Block = window.Block;
  const P = 'assets/photos/';
  const circle = (src,alt,cap,shape) => (
    <div>
      <div className="kenburns lift" style={{borderRadius:shape||'50%',overflow:'hidden',aspectRatio:'1',boxShadow:'var(--shadow-lg)'}}>
        <img src={src} alt={alt} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
      </div>
      <p className="label" style={{marginTop:'14px',color:'#5A4426',textAlign:'center'}}>{cap}</p>
    </div>
  );
  return (
    <div>
      <section className="grain" style={{background:'var(--spinach)',padding:'clamp(64px,10vw,120px) clamp(24px,6vw,80px)',position:'relative'}}>
        <div style={{maxWidth:'1160px',margin:'0 auto'}}>
          <p className="label" style={{color:'#5A4426',marginBottom:'16px'}}>Where the money goes</p>
          <h1 style={{fontSize:'clamp(2.6rem,6vw,4.8rem)',letterSpacing:'-0.02em',color:'#5A4426',maxWidth:'820px'}}>We keep the receipts.</h1>
          <p style={{color:'#5A4426',fontSize:'1.15rem',maxWidth:'620px',marginTop:'20px',lineHeight:1.7}}>The Wonga Tours Community Garden sits on a stretch of the Penzance Estate Greenbelt that used to be a dumping ground. It now grows spinach for HIV and TB care workers, for patients dealing with vitamin deficiencies. Every week, tour income buys groceries for families in the neighbourhood.</p>
        </div>
      </section>
      <Curve from="var(--spinach)" to="#D8D2C6" />
      <section style={{background:'#D8D2C6',padding:'clamp(56px,8vw,100px) clamp(24px,6vw,80px)'}}>
        <div className="reveal g-split" style={{maxWidth:'1160px',margin:'0 auto',display:'grid',gridTemplateColumns:'minmax(0,1fr) auto',gap:'clamp(32px,6vw,90px)',alignItems:'center'}}>
          <Block title="One tour, itemised." body="No donut charts. No impact reports. A till slip, the way Wonga actually keeps them: who cooked, what the groceries cost, what went into the garden." chip="R1050 per guest" />
          <Receipt lineTitle="1 x TOWNSHIP TOUR + MEAL" items={[
            {label:'COOK (family)', amount:'R 350'},
            {label:'GROCERIES', amount:'R 220'},
            {label:'GARDEN', amount:'R  80'},
            {label:'GUIDE', amount:'R 400'},
          ]} total="R1050" />
        </div>
      </section>
      <Curve from="#D8D2C6" to="var(--enamel)" flip />
      <section style={{background:'var(--enamel)',padding:'clamp(56px,8vw,100px) clamp(24px,6vw,80px)'}}>
        <div style={{maxWidth:'1160px',margin:'0 auto'}}>
          <h2 style={{fontSize:'clamp(1.8rem,3.5vw,2.6rem)',letterSpacing:'-0.01em',marginBottom:'40px'}}>What we build together</h2>
          <div className="reveal g-3" style={{display:'grid',gridTemplateColumns:'repeat(3,minmax(0,1fr))',gap:'clamp(16px,3vw,40px)'}}>
            {circle(P+'chicks.avif','Week-old chicks in a bucket','New chicks, hatched on site','var(--blob-1)')}
            {circle(P+'incubator.avif','Wonga holding the egg incubator trays','The egg incubator','var(--blob-2)')}
            {circle(P+'skatepark.avif','Kids with skateboards and helmets at the Hout Bay skatepark','Skate Saturdays, all neighbourhoods in one park','var(--blob-3)')}
          </div>
        </div>
      </section>
    </div>
  );
}
window.CommunityPage = CommunityPage;