/* KYDT Home — immersive ocean hero, who we are, impact, values, Tuakana–Teina, Te Whare Aranga teaser. */
function HomePage({ onNav }){
  const DS = window.KYDTDesignSystem_1d4054;
  const { Button, SectionHeading, Card, ValuePillar, Whakatauki, Badge } = DS;
  const { Reveal, KIcon:I, MotifBackdrop, OceanCanvas } = window;
  window.useScrollFX('home');

  React.useEffect(()=>{
    if(!window.gsap) return;
    const g = window.gsap;
    g.set(['.hero-eyebrow','.hero-line','.hero-lead','.hero-cta'],{opacity:0});
    const tl = g.timeline({defaults:{ease:'power3.out'}, delay:0.2});
    tl.fromTo('.hero-eyebrow',{opacity:0,y:20},{opacity:1,y:0,duration:0.7})
      .fromTo('.hero-line',{opacity:0,y:40},{opacity:1,y:0,duration:0.9,stagger:0.12},'-=0.35')
      .fromTo('.hero-lead',{opacity:0,y:24},{opacity:1,y:0,duration:0.8},'-=0.5')
      .fromTo('.hero-cta',{opacity:0,y:20},{opacity:1,y:0,duration:0.7},'-=0.5');
    return ()=> tl.kill();
  },[]);

  const quick = [
    { id:'about', icon:'compass', label:'Our mahi', sub:'Who we are' },
    { id:'closer', icon:'sparkles', label:'Our impact', sub:'Take a closer look' },
    { id:'partner', icon:'building-2', label:'Te Whare Aranga', sub:'The build appeal' },
    { id:'partner', icon:'heart-handshake', label:'Partner with us', sub:'Start a kōrero' },
  ];
  const stats = [
    { n:120, suf:'+', label:'Rangatahi and whānau walked alongside' },
    { n:92, suf:'%', label:'Improved school attendance among referred rangatahi' },
    { n:15, suf:'', label:'Years of mahi on the North Shore' },
    { n:6, suf:'', label:'Partner organisations and funders' },
  ];
  const values = [
    { motif:'assets/value-tika.png', name:'Tika', gloss:'Integrity', description:'Doing that which is right in everything we do.' },
    { motif:'assets/value-pono.png', name:'Pono', gloss:'Honesty', description:'Being true to ourselves and honest in all our mahi.' },
    { motif:'assets/value-aroha.png', name:'Aroha', gloss:'Compassion', description:'Empathy, generosity — the act of giving.' },
    { motif:'assets/value-whakapapa.png', name:'Whakapapa', gloss:'Identity', description:'Knowing who we are and where we are from — our tīpuna and whenua.' },
    { motif:'assets/value-whanaungatanga.png', name:'Whanaungatanga', gloss:'Connection', description:'Strengthening ties between kin and community — the glue that binds people together.' },
  ];

  return (
    <div>
      {/* ---------------- HERO ---------------- */}
      <section style={{position:'relative',minHeight:'100vh',display:'flex',alignItems:'center',background:'var(--sea-950)',color:'var(--text-on-dark)',overflow:'hidden'}}>
        <OceanCanvas />
        <div style={{position:'absolute',inset:0,zIndex:1,background:'linear-gradient(180deg, rgba(0,20,40,0.55) 0%, rgba(0,20,40,0.15) 40%, rgba(0,20,40,0.35) 75%, var(--sea-950) 100%)',pointerEvents:'none'}} />
        <div className="kydt-container" style={{position:'relative',zIndex:2,paddingBlock:'140px 200px',width:'100%'}}>
          <div style={{maxWidth:820}}>
            <div className="hero-eyebrow" style={{opacity:0,transform:'translateY(20px)',display:'inline-flex',alignItems:'center',gap:10,color:'var(--brand-highlight)',fontFamily:'var(--font-body)',fontWeight:700,fontSize:14,letterSpacing:'0.18em',textTransform:'uppercase'}}>
              <span style={{width:30,height:2,background:'var(--brand-highlight)',display:'inline-block'}} />Nau mai, haere mai
            </div>
            <h1 className="hero-title" style={{margin:'22px 0 0',fontFamily:'var(--font-display)',fontWeight:600,fontSize:'clamp(2.8rem,6.2vw,5rem)',lineHeight:1.04,letterSpacing:'-0.02em',color:'#fff'}}>
              <span className="hero-line" style={{display:'block'}}>Walking alongside</span>
              <span className="hero-line" style={{display:'block'}}>rangatahi and their</span>
              <span className="hero-line" style={{display:'block',color:'var(--jade-300)'}}>whānau.</span>
            </h1>
            <p className="hero-lead" style={{opacity:0,margin:'28px 0 0',maxWidth:600,fontFamily:'var(--font-body)',fontSize:'clamp(1.05rem,1.6vw,1.3rem)',lineHeight:1.6,color:'var(--text-on-dark)'}}>
              He whakahirahira, he whakamīharo ia tamaiti, ia taiohi — all children and young people are special and significant. This is where our mahi begins.
            </p>
            <div className="hero-cta" style={{opacity:0,display:'flex',flexWrap:'wrap',gap:14,marginTop:36}}>
              <Button variant="secondary" size="lg" iconRight={I('arrow-right')} onClick={()=>onNav('partner')}>Support Te Whare Aranga</Button>
              <button onClick={()=>onNav('closer')} className="hero-ghost" style={{cursor:'pointer',display:'inline-flex',alignItems:'center',gap:10,padding:'16px 28px',borderRadius:'var(--radius-pill)',border:'1.5px solid rgba(255,255,255,0.45)',background:'rgba(255,255,255,0.06)',color:'#fff',fontFamily:'var(--font-body)',fontWeight:600,fontSize:'var(--text-md)',backdropFilter:'blur(4px)'}}>{I('play-circle',20)} Take a closer look</button>
            </div>
          </div>
        </div>
        <div className="hero-scroll" style={{position:'absolute',bottom:150,left:'50%',transform:'translateX(-50%)',zIndex:2,display:'flex',flexDirection:'column',alignItems:'center',gap:8,color:'var(--text-on-dark-muted)',fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase'}}>
          <span>Scroll</span>
          <span className="hero-scroll-line" />
        </div>
      </section>

      {/* ---------------- QUICK SHORTCUTS (overlap hero) ---------------- */}
      <section style={{position:'relative',zIndex:5,marginTop:-96}}>
        <div className="kydt-container-wide">
          <div className="kydt-quick-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16}}>
            {quick.map((q,i)=>(
              <Reveal key={q.label} delay={i*0.08}>
                <button onClick={()=>onNav(q.id)} className="kydt-quick" style={{width:'100%',textAlign:'left',cursor:'pointer',background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:'22px 22px',boxShadow:'var(--shadow-md)',transition:'transform .25s var(--ease-out),box-shadow .25s'}}>
                  <span style={{display:'grid',placeItems:'center',width:48,height:48,borderRadius:'var(--radius-pill)',background:'var(--jade-100)',color:'var(--jade-700)',marginBottom:16}}>{I(q.icon,22)}</span>
                  <span style={{display:'block',fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-lg)',color:'var(--text-heading)'}}>{q.label}</span>
                  <span style={{display:'flex',alignItems:'center',gap:6,marginTop:4,fontSize:13.5,color:'var(--text-muted)'}}>{q.sub} {I('arrow-right',14)}</span>
                </button>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- WHO WE ARE ---------------- */}
      <section className="kydt-section" style={{position:'relative',overflow:'hidden'}}>
        <MotifBackdrop variant="band-jade" opacity={0.05} />
        <div className="kydt-container" style={{position:'relative'}}>
          <div className="kydt-split" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:56,alignItems:'center'}}>
            <div>
              <Reveal><SectionHeading eyebrow="Ko wai mātou · Who we are" title="A registered charitable trust, grounded in whanaungatanga" maxWidth="560px"
                lead="KYDT (Kaipātiki Youth Development Trust) supports rangatahi and their whānau through times of challenge. Our team of qualified social workers, youth workers and student placements build trust, nurture relationships, and walk alongside young people as they create change that lasts." /></Reveal>
              <Reveal delay={0.1} style={{marginTop:28,display:'flex',flexWrap:'wrap',gap:12}}>
                <Badge tone="jade">MSD Level 2 approved</Badge>
                <Badge tone="sea">Charity CC48458</Badge>
                <Badge tone="sand">North Shore · Kaipātiki</Badge>
              </Reveal>
              <Reveal delay={0.16} style={{marginTop:28}}>
                <Button variant="outline" iconRight={I('arrow-right')} onClick={()=>onNav('about')}>Read about our mahi</Button>
              </Reveal>
            </div>
            <Reveal delay={0.12} data-parallax-scope="">
              <div style={{position:'relative',borderRadius:'var(--radius-xl)',overflow:'hidden',boxShadow:'var(--shadow-lg)',aspectRatio:'4/5',background:'var(--sea-100)'}}>
                <div data-parallax="60" style={{position:'absolute',inset:'-8% 0',backgroundImage:'url(assets/photo-ocean-pasifika.png)',backgroundSize:'cover',backgroundPosition:'center'}} />
                <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,transparent 45%,rgba(0,20,40,0.6))'}} />
                <div style={{position:'absolute',left:24,right:24,bottom:24,color:'#fff'}}>
                  <div style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--jade-200)',fontWeight:600}}>{I('image',15)} Placeholder — community photography</div>
                  <p style={{margin:'8px 0 0',fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:'var(--text-lg)',lineHeight:1.3}}>Rangatahi, whānau and kaimahi of Kaipātiki.</p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ---------------- IMPACT STATS ---------------- */}
      <section style={{position:'relative',background:'linear-gradient(160deg,var(--sea-800),var(--sea-950))',color:'var(--text-on-dark)',overflow:'hidden'}}>
        <MotifBackdrop variant="wave-bottom" opacity={0.12} />
        <div className="kydt-container-wide kydt-section" style={{position:'relative'}}>
          <Reveal style={{textAlign:'center',marginBottom:48}}>
            <SectionHeading align="center" onDark eyebrow="Our impact" title="Small trust, lasting change" maxWidth="640px"
              lead="Every relationship we build ripples outward — into schools, homes and the wider community." />
          </Reveal>
          <div className="kydt-stat-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:24}}>
            {stats.map((s,i)=>(
              <Reveal key={s.label} delay={i*0.1} style={{textAlign:'center'}}>
                <div style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:'clamp(3rem,5vw,4.2rem)',lineHeight:1,color:'var(--jade-300)'}}>
                  <span data-count={s.n} data-suffix={s.suf}>0{s.suf}</span>
                </div>
                <div style={{marginTop:12,fontSize:14.5,lineHeight:1.5,color:'var(--text-on-dark-muted)',maxWidth:210,marginInline:'auto'}}>{s.label}</div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.2} style={{textAlign:'center',marginTop:36,fontSize:12.5,color:'var(--text-on-dark-muted)',fontStyle:'italic',opacity:0.8}}>
            * Indicative figures — final impact data to be supplied by KYDT.
          </Reveal>
        </div>
      </section>

      {/* ---------------- VALUES ---------------- */}
      <section className="kydt-section" style={{position:'relative',overflow:'hidden',background:'var(--surface-sand)'}}>
        <div className="kydt-container-wide" style={{position:'relative'}}>
          <Reveal style={{marginBottom:48,textAlign:'center'}}>
            <SectionHeading align="center" eyebrow="Ō mātou uara · Our values" title="Five uara that guide every relationship" maxWidth="620px" />
          </Reveal>
          <div className="kydt-values-grid" style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:20}}>
            {values.map((v,i)=>(
              <Reveal key={v.name} delay={i*0.08}>
                <Card hover padding="var(--space-6) var(--space-5)" style={{height:'100%'}}>
                  <ValuePillar motif={v.motif} name={v.name} gloss={v.gloss} description={v.description} motifSize={70} />
                </Card>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- TUAKANA–TEINA + WHAKATAUKĪ ---------------- */}
      <section className="kydt-section" style={{position:'relative',overflow:'hidden'}}>
        <div className="kydt-container">
          <div className="kydt-split" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'center'}}>
            <Reveal>
              <SectionHeading eyebrow="Tuakana–Teina" title="A cycle of learning, leadership and empowerment" maxWidth="520px"
                lead="Our Tuakana–Teina approach reflects our commitment to Positive Youth Development. As rangatahi grow, they are encouraged to become role models themselves — supporting others and strengthening the mana of their peers, whānau and community." />
              <div style={{marginTop:24,display:'flex',flexDirection:'column',gap:12}}>
                {['Everyone contributes, everyone learns','Strengths-based mentoring that upholds mana','Role models growing the next generation'].map((t,i)=>(
                  <div key={i} style={{display:'flex',gap:12,alignItems:'center',fontSize:15.5,color:'var(--text-body)'}}>
                    <span style={{display:'grid',placeItems:'center',width:26,height:26,borderRadius:'50%',background:'var(--jade-100)',color:'var(--jade-700)',flexShrink:0}}>{I('check',15)}</span>{t}
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal delay={0.12}>
              <Whakatauki tone="deep" align="left" translation="With your food basket and my food basket, the people will thrive." attribution="A whakataukī that captures our philosophy">
                Nāu te rourou, nāku te rourou, ka ora ai te iwi.
              </Whakatauki>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ---------------- TE WHARE ARANGA TEASER ---------------- */}
      <section style={{position:'relative',overflow:'hidden',background:'linear-gradient(160deg,var(--jade-900),var(--sea-900))',color:'var(--text-on-dark)'}}>
        <MotifBackdrop variant="band-top" opacity={0.12} />
        <div className="kydt-container-wide kydt-section" style={{position:'relative'}}>
          <div className="kydt-split" style={{display:'grid',gridTemplateColumns:'1.05fr 1fr',gap:48,alignItems:'center'}}>
            <Reveal>
              <div className="kydt-eyebrow-caps" style={{color:'var(--brand-highlight)',marginBottom:16}}>Growing our future</div>
              <h2 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:600,fontSize:'clamp(2rem,3.4vw,3rem)',lineHeight:1.08,letterSpacing:'-0.02em',color:'#fff'}}>Te Whare Aranga — a place to belong</h2>
              <p style={{margin:'20px 0 0',maxWidth:520,fontSize:'var(--text-md)',lineHeight:1.65,color:'var(--text-on-dark)'}}>We're building an extension with a dedicated kitchen and additional facilities — more than a building, a place where relationships are strengthened over kai and kōrero. Your support will help bring it to life.</p>
              <div style={{marginTop:32,display:'flex',flexWrap:'wrap',gap:14}}>
                <Button variant="secondary" size="lg" iconRight={I('arrow-right')} onClick={()=>onNav('partner')}>Back the build</Button>
                <Button variant="outline" size="lg" iconLeft={I('download')} onClick={()=>onNav('partner')} style={{color:'#fff',borderColor:'rgba(255,255,255,0.5)'}}>Download prospectus</Button>
              </div>
            </Reveal>
            <Reveal delay={0.12}>
              <div style={{position:'relative',borderRadius:'var(--radius-xl)',border:'1px dashed rgba(255,255,255,0.35)',background:'rgba(255,255,255,0.06)',minHeight:320,display:'grid',placeItems:'center'}}>
                <div style={{textAlign:'center',color:'var(--text-on-dark-muted)',display:'flex',flexDirection:'column',alignItems:'center',gap:12}}>{I('building-2',40)}<span style={{fontSize:14,fontWeight:600,letterSpacing:'0.04em'}}>Te Whare Aranga render</span><span style={{fontSize:12.5,opacity:0.8}}>Placeholder — architectural render to come</span></div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ---------------- PARTNER CTA ---------------- */}
      {window.PartnerCTA ? <window.PartnerCTA onNav={onNav} /> : null}
    </div>
  );
}
window.HomePage = HomePage;