function HomePage({onNav}){
  const Curve = window.Curve, Block = window.Block;
  const P = 'assets/photos/';
  const blob = (src,alt,shape) => (
    <div className="kenburns lift" style={{borderRadius:shape,overflow:'hidden',aspectRatio:'1',width:'100%',boxShadow:'var(--shadow-md)'}}>
      <img src={src} alt={alt} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
    </div>
  );
  const stat = (value,label,icon,shape) => (
    <div key={label} className="lift" style={{width:'clamp(120px,15vw,150px)',aspectRatio:'1',borderRadius:shape,background:'var(--coal)',color:'var(--enamel)',boxShadow:'var(--shadow-lg)',display:'grid',placeItems:'center',textAlign:'center',padding:'14px'}}>
      <span>
        <img src={window.ICON(icon,'#BCD0DC',52)} alt="" style={{width:'24px',height:'24px',display:'block',margin:'0 auto 8px'}} />
        <span style={{display:'block',fontFamily:'var(--font-display)',fontWeight:600,fontSize:'1.5rem',lineHeight:1}}>{value}</span>
        <span className="label" style={{display:'block',marginTop:'6px',fontSize:'9px',color:'var(--speckle)',letterSpacing:'0.1em'}}>{label}</span>
      </span>
    </div>
  );
  const step = (num,title,body,chip) => <Block key={num} num={num} title={title} body={body} chip={chip} />;
  return (
    <div>
      <section className="grain" style={{position:'relative',minHeight:'min(92vh,760px)',display:'flex',alignItems:'flex-end',overflow:'hidden'}}>
        <img src={P+'wonga-chicken.avif'} alt="Wonga holding one of the garden chickens, kids around him" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 30%',transform:'scale(1.04)'}} />
        <div style={{position:'absolute',inset:0,background:'linear-gradient(to top,rgba(18,36,50,0.86) 0%,rgba(18,36,50,0.62) 38%,rgba(18,36,50,0.30) 70%,rgba(18,36,50,0.18) 100%)'}}></div>
        <div style={{position:'relative',padding:'clamp(24px,6vw,80px)',paddingTop:'clamp(104px,18vw,140px)',paddingBottom:'calc(88px + clamp(40px,8vh,90px))',maxWidth:'1100px',color:'var(--enamel)',textShadow:'0 2px 18px rgba(12,26,38,0.55)'}}>
          <p className="label" style={{color:'var(--enamel)',marginBottom:'20px',fontSize:'12px'}}>Imizamo Yethu &middot; Hout Bay &middot; Cape Town</p>
          <h1 style={{color:'var(--enamel)',fontSize:'clamp(3rem,8.5vw,7rem)',lineHeight:1.02,letterSpacing:'-0.02em',fontWeight:600}}>Come sit<br/>at our table.</h1>
          <p style={{fontSize:'clamp(1.05rem,2vw,1.35rem)',marginTop:'24px',maxWidth:'540px',lineHeight:1.6}}>I'm Wonga. Come meet my neighbours, see what we're building, and eat what we cook. You arrive as a guest. You leave as a friend.</p>
          <div style={{display:'flex',gap:'16px',marginTop:'36px',flexWrap:'wrap',alignItems:'center'}}>
            <a href="https://wa.me/27844536076?text=Hi%20Wonga%2C%20I%27d%20like%20to%20come%20eat%20with%20you." target="_blank" rel="noopener noreferrer" className="label blobbtn" style={{background:'var(--accent)',color:'var(--enamel)',padding:'15px 28px',textDecoration:'none',boxShadow:'var(--shadow-accent)'}}>Say hello on WhatsApp</a>
            <a href="#" className="label" onClick={(e)=>{e.preventDefault();onNav('Tours');}} style={{color:'var(--enamel)',textDecoration:'underline',textUnderlineOffset:'6px'}}>See the tours</a>
          </div>
          <p className="label" style={{marginTop:'16px',fontSize:'10px',color:'var(--enamel)',opacity:0.8}}>Wonga answers himself, usually the same day</p>
        </div>
      </section>
      <div aria-hidden="true" style={{lineHeight:0,marginTop:'calc(-0.62 * clamp(100px,13.9vw,200px))',marginBottom:'-1px',position:'relative'}}>
        <svg viewBox="0 0 1440 200" preserveAspectRatio="none" style={{display:'block',width:'100%',height:'clamp(100px,13.9vw,200px)',overflow:'hidden'}}>
          <path d="M0,120 C300,120 360,200 720,200 C1080,200 1140,120 1440,120 L1440,200 L0,200 Z" fill="var(--enamel)" />
          <path d="M0,40 C300,40 360,120 720,120 C1080,120 1140,40 1440,40 L1440,120 C1140,120 1080,200 720,200 C360,200 300,120 0,120 Z" fill="var(--accent)" />
          <path id="tickerPath" d="M-1440,88 C-1140,88 -1080,168 -720,168 C-360,168 -300,88 0,88 C300,88 360,168 720,168 C1080,168 1140,88 1440,88 C1740,88 1800,168 2160,168 C2520,168 2580,88 2880,88" fill="none" />
          <text fill="var(--enamel)" className="tickertext" style={{fontFamily:'var(--font-label)',fontWeight:500,fontSize:'19px',letterSpacing:'4px',textTransform:'uppercase'}}>
            <textPath href="#tickerPath" startOffset="0">
              {'COME AS A GUEST · LEAVE AS A FRIEND · '.repeat(14)}
              <animate attributeName="startOffset" from="0" to="-1112" dur="26s" repeatCount="indefinite" />
            </textPath>
          </text>
        </svg>
      </div>
      <section style={{background:'var(--enamel)',padding:'clamp(80px,12vw,150px) clamp(24px,6vw,80px)',position:'relative'}}>
        <div className="reveal g-split" style={{maxWidth:'1160px',margin:'0 auto',display:'grid',gridTemplateColumns:'minmax(0,1.4fr) minmax(0,1fr)',gap:'clamp(32px,6vw,90px)',alignItems:'center'}}>
          <div>
            <p className="label" style={{color:'var(--text-on-light-secondary)',marginBottom:'20px'}}>What this really is</p>
            <p style={{fontSize:'clamp(1.5rem,3vw,2.3rem)',lineHeight:1.35,fontWeight:300,margin:0,color:'var(--text-on-light)'}}>The best way to know a place is to share a meal in it. You'll sit in a real kitchen, cook alongside people who live here, and hear what we're building: the garden, the chickens, the skate Saturdays. Good food, real company, and a proper evening together.</p>
            <div style={{display:'flex',gap:'10px',flexWrap:'wrap',marginTop:'28px'}}>
              {['Home cooking','Small groups','The garden','Skate Saturdays'].map(c=>(
                <span key={c} className="chip" style={{background:'var(--surface-card)',color:'var(--text-on-light-secondary)',boxShadow:'var(--shadow-xs)'}}>{c}</span>
              ))}
            </div>
          </div>
          <div style={{display:'flex',gap:'clamp(12px,2vw,24px)',flexWrap:'wrap',justifyContent:'center'}}>
            {stat('12','max guests','account-group','var(--blob-1)')}
            {stat('R2000','groceries / week','basket-outline','var(--blob-2)')}
            {stat('15yrs','guiding Hout Bay','compass-outline','var(--blob-3)')}
          </div>
        </div>
      </section>
      <section style={{background:'var(--enamel)',padding:'0 clamp(24px,6vw,80px) clamp(90px,12vw,160px)'}}>
        <div className="reveal g-3" style={{maxWidth:'1160px',margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(3,minmax(0,1fr))',gap:'clamp(16px,3vw,40px)',alignItems:'end'}}>
          <div style={{transform:'translateY(-24px)'}}>{blob(P+'chicks.avif','New chicks in a bucket at the community garden','var(--blob-1)')}<p className="label" style={{marginTop:'14px',color:'var(--text-on-light-secondary)',textAlign:'center'}}>The garden's new arrivals</p></div>
          <div>{blob(P+'skatepark.avif','Wonga talking with kids at the Hout Bay skatepark','var(--blob-2)')}<p className="label" style={{marginTop:'14px',color:'var(--text-on-light-secondary)',textAlign:'center'}}>Where the neighbourhoods meet</p></div>
          <div style={{transform:'translateY(-40px)'}}>{blob(P+'incubator.avif','Wonga showing the egg incubator','var(--blob-3)')}<p className="label" style={{marginTop:'14px',color:'var(--text-on-light-secondary)',textAlign:'center'}}>The egg incubator project</p></div>
        </div>
      </section>
      <Curve from="var(--enamel)" to="var(--coal)" />
      <section className="grain" style={{background:'var(--coal)',color:'var(--enamel)',padding:'clamp(80px,12vw,150px) 0 clamp(80px,12vw,140px)',overflow:'hidden',position:'relative'}}>
        <div style={{padding:'0 clamp(24px,6vw,80px)',maxWidth:'1160px',margin:'0 auto',position:'relative',zIndex:1}}>
          <p className="label" style={{color:'var(--speckle)',marginBottom:'16px'}}>Built to connect</p>
          <h2 style={{color:'var(--enamel)',fontSize:'clamp(2.6rem,7vw,5.5rem)',letterSpacing:'-0.02em',lineHeight:1}}>The skatepark<br/><span style={{color:'transparent',WebkitTextStroke:'1.5px var(--speckle)'}}>where everyone meets.</span></h2>
        </div>
        <div className="g-split" style={{padding:'clamp(40px,6vw,72px) clamp(24px,6vw,80px) 0',maxWidth:'1160px',margin:'0 auto',display:'grid',gridTemplateColumns:'minmax(0,1.3fr) minmax(0,1fr)',gap:'clamp(32px,6vw,80px)',alignItems:'center'}}>
          <div style={{position:'relative'}}>
            <div className="kenburns" style={{borderRadius:'var(--radius-soft)',overflow:'hidden',transform:'rotate(-2deg)',boxShadow:'var(--shadow-lg)',aspectRatio:'3/4'}}>
              <img src={'assets/photos/skatepark.avif'} alt="Wonga and kids with skateboards at the Hout Bay skatepark, mountains behind" loading="lazy" width="1200" height="1600" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
            </div>
          </div>
          <div>
            <p style={{fontSize:'1.2rem',lineHeight:1.7,margin:0}}>Down the hill there's a skatepark the community pushed for, a place where kids from different neighbourhoods, speaking different languages, end up on the same ramps. That's the whole idea of everything we do, on four wheels.</p>
            <p style={{fontSize:'1.2rem',lineHeight:1.7,margin:'16px 0 0'}}>Every Saturday we skate with the kids. Guests are welcome to come watch, cheer, or fall over trying.</p>
            <a href="#" className="label" onClick={(e)=>{e.preventDefault();onNav('Community & Garden');}} style={{display:'inline-block',marginTop:'28px',color:'var(--enamel)',borderBottom:'2px solid var(--accent)',paddingBottom:'4px',textDecoration:'none'}}>See what else we build &rarr;</a>
          </div>
        </div>
      </section>
      <Curve from="var(--coal)" to="var(--enamel)" flip />
      <section style={{background:'var(--enamel)',padding:'clamp(70px,10vw,130px) clamp(24px,6vw,80px)'}}>
        <div className="reveal g-split" style={{maxWidth:'1160px',margin:'0 auto',display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1.3fr)',gap:'clamp(32px,6vw,90px)'}}>
          <h2 style={{fontSize:'clamp(2rem,4.5vw,3.4rem)',letterSpacing:'-0.02em'}}>You'll be with me<br/>the whole way.</h2>
          <div>
            <p style={{fontSize:'1.2rem',lineHeight:1.7,margin:0}}>This is my street. I grew up here. You walk with me, you eat where I eat, and you meet the people whose home you’re in. Fifteen years of guests, never a problem. Whatever you’re wondering about, ask me first. I’d rather answer it than have you wonder.</p>
            <a href="#" className="label" onClick={(e)=>{e.preventDefault();onNav('Contact');}} style={{display:'inline-block',marginTop:'24px',color:'var(--sky)'}}>More questions, answered &rarr;</a>
          </div>
        </div>
      </section>
      <Curve from="var(--enamel)" to="var(--paper)" />
      <section style={{background:'var(--paper)',padding:'clamp(70px,10vw,120px) 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:'48px'}}>How it works</h2>
          <div className="reveal" style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:'clamp(24px,4vw,40px)'}}>
            {step('01','Say hello','One WhatsApp message. No forms, no deposit. Tell me when you\u2019re in Hout Bay.','Takes 30 seconds')}
            {step('02','We pick a table','I check which neighbour is cooking and we settle a date, a time, and the menu.','Same-day reply')}
            {step('03','Come eat with us','You walk with me, meet everyone, and sit down to dinner. Pay on the day, card or cash.','No deposit')}
          </div>
        </div>
      </section>
      <Curve from="var(--paper)" to="var(--spinach)" flip />
      <section className="grain" style={{background:'var(--spinach)',padding:'clamp(70px,10vw,130px) clamp(24px,6vw,80px)',textAlign:'center',position:'relative'}}>
        <h2 style={{fontSize:'clamp(2.2rem,5vw,4rem)',letterSpacing:'-0.02em',color:'#5A4426'}}>There's a seat for you.<br/>And your family and friends.</h2>
        <p style={{color:'#5A4426',fontSize:'1.15rem',marginTop:'16px'}}>One message and it's arranged.</p>
        <a href="https://wa.me/27844536076?text=Hi%20Wonga%2C%20I%27d%20like%20to%20come%20eat%20with%20you." target="_blank" rel="noopener noreferrer" className="label blobbtn" style={{display:'inline-block',marginTop:'32px',background:'var(--coal)',color:'var(--enamel)',padding:'16px 30px',textDecoration:'none',boxShadow:'var(--shadow-md)'}}>Message +27 84 453 6076</a>
      </section>
    </div>
  );
}
window.HomePage = HomePage;