/* KYDT About / Our Mahi — who we are, what we do, the team, Tuakana–Teina, values recap. */
function AboutPage({ onNav }){
  const DS = window.KYDTDesignSystem_1d4054;
  const { SectionHeading, Card, Button, Whakatauki, Badge, ValuePillar } = DS;
  const { Reveal, KIcon:I, MotifBackdrop, PageHero } = window;
  window.useScrollFX('about');
  React.useEffect(()=>{ window.playPageHero && window.playPageHero(); },[]);

  const doItems = [
    { icon:'users-round', t:'Weekly mentoring', d:'One-on-one relationship building that meets rangatahi where they are.' },
    { icon:'home', t:'Whānau support', d:'Walking alongside whānau, including through Family Group Conference processes.' },
    { icon:'school', t:'School & agency liaison', d:'Working with Oranga Tamariki and local schools to open safer pathways.' },
    { icon:'route', t:'Early intervention', d:'Restoring confidence, identity and belonging before challenges deepen.' },
  ];
  const values = [
    { motif:'assets/value-tika.png', name:'Tika', gloss:'Integrity' },
    { motif:'assets/value-pono.png', name:'Pono', gloss:'Honesty' },
    { motif:'assets/value-aroha.png', name:'Aroha', gloss:'Compassion' },
    { motif:'assets/value-whakapapa.png', name:'Whakapapa', gloss:'Identity' },
    { motif:'assets/value-whanaungatanga.png', name:'Whanaungatanga', gloss:'Connection' },
  ];

  return (
    <div>
      <PageHero eyebrow={<T k="about.hero.eyebrow">About Us · Our Mahi</T>} title={<T k="about.hero.title">Building trust, nurturing relationships, walking alongside.</T>}
        lead={<T k="about.hero.lead">KYDT is a registered charitable trust committed to supporting rangatahi and their whānau through times of challenge. Our mahi is grounded in whanaungatanga.</T>} />

      {/* 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'}}>
            <Reveal>
              <SectionHeading eyebrow={<T k="about.who.eyebrow">Ko wai mātou · Who we are</T>} title={<T k="about.who.title">A team here to walk alongside young people as they create change that lasts</T>} maxWidth="560px"
                lead={<T k="about.who.lead">Our team of qualified social workers, youth workers and student placements build trust and nurture relationships. Through mentoring and social work support, we walk alongside referred rangatahi and whānau in Kaipātiki, on the North Shore.</T>} />
              <div style={{marginTop:24,display:'flex',flexWrap:'wrap',gap:10}}>
                <Badge tone="jade"><T k="about.who.badge1">Whanaungatanga at the centre</T></Badge>
                <Badge tone="sea"><T k="about.who.badge2">Extensive long standing community connection with Oranga Tamariki</T></Badge>
              </div>
            </Reveal>
            <Reveal delay={0.1} data-parallax-scope="">
              <div style={{position:'relative',borderRadius:'var(--radius-xl)',overflow:'hidden',boxShadow:'var(--shadow-lg)',aspectRatio:'1/1',background:'var(--sea-100)'}}>
                <div data-parallax="50" style={{position:'absolute',inset:'-8% 0'}}>
                  <Img k="about.who.photo" src="assets/staff-photo-2026-10.jpg" alt="The four KYDT kaimahi in their KYDT uniforms, standing beneath the KYDT manaia" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* What we do */}
      <section className="kydt-section" style={{background:'var(--surface-sunken)',borderBlock:'1px solid var(--sea-100)'}}>
        <div className="kydt-container-wide">
          <Reveal style={{marginBottom:44,maxWidth:640}}>
            <SectionHeading eyebrow={<T k="about.do.eyebrow">Tā mātou mahi · What we do</T>} title={<T k="about.do.title">Support that upholds mana and recognises potential</T>}
              lead={<T k="about.do.lead">Working with Oranga Tamariki and local schools, we support rangatahi in ways that build safer pathways and restore confidence, identity and belonging.</T>} />
          </Reveal>
          <div className="kydt-do-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20}}>
            {doItems.map((m,i)=>(
              <Reveal key={m.t} delay={i*0.08}>
                <Card hover style={{height:'100%'}}>
                  <span style={{display:'grid',placeItems:'center',width:48,height:48,borderRadius:'var(--radius-md)',background:'var(--sea-50)',color:'var(--brand-primary)',marginBottom:16}}>{I(m.icon,22)}</span>
                  <h3 style={{margin:'0 0 8px',fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-lg)',color:'var(--text-heading)'}}><T k={`about.do.${i}.title`}>{m.t}</T></h3>
                  <p style={{margin:0,fontSize:14.5,lineHeight:1.6,color:'var(--text-body)'}}><T k={`about.do.${i}.text`}>{m.d}</T></p>
                </Card>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Tuakana–Teina feature */}
      <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={<T k="about.tuakana.eyebrow">Tuakana–Teina</T>} title={<T k="about.tuakana.title">Everyone has something to teach, and something to learn</T>} maxWidth="520px"
                lead={<T k="about.tuakana.lead">Our Tuakana–Teina approach reflects our commitment to Positive Youth Development. Staff walk alongside rangatahi, helping them recognise their strengths and make positive choices. As they develop, young people are encouraged to become role models themselves — strengthening the mana of their peers, whānau and community.</T>} />
              <p style={{marginTop:16,fontSize:15,lineHeight:1.65,color:'var(--text-muted)',fontStyle:'italic'}}><T k="about.tuakana.note">This creates a cycle of learning, leadership and empowerment.</T></p>
            </Reveal>
            <Reveal delay={0.12}>
              <Whakatauki tone="jade" align="left" translation={<T k="about.tuakana.translation">With your food basket and my food basket, the people will thrive.</T>} attribution={<T k="about.tuakana.attribution">Everyone contributes, everyone learns</T>}>
                <T k="about.tuakana.whakatauki">Nāu te rourou, nāku te rourou, ka ora ai te iwi.</T>
              </Whakatauki>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="kydt-section" style={{background:'var(--surface-sand)'}}>
        <div className="kydt-container-wide">
          <Reveal style={{marginBottom:44,maxWidth:600}}>
            <SectionHeading eyebrow={<T k="about.team.eyebrow">Tō mātou tira · Our team</T>} title={<T k="about.team.title">Qualified, grounded, and here for the long haul</T>}
              lead={<T k="about.team.lead">Meet the kaimahi who make this mahi possible.</T>} />
          </Reveal>
          <Reveal delay={0.1}>
            <figure style={{margin:0,borderRadius:'var(--radius-xl)',overflow:'hidden',boxShadow:'var(--shadow-lg)',background:'var(--white)'}}>
              <Img k="about.team.graphic" src="assets/yp-journey-of-growth.jpg" alt="A young person's journey of growth with KYDT, from referral through mentoring to positive pathways" style={{width:'100%',height:'auto',display:'block'}} />
            </figure>
          </Reveal>
          {/* TODO(KYDT): the individual staff portraits are gone as Cath asked, and this
              block now carries the YP Journey of Growth graphic. Worth checking with her
              whether the "Our team" heading above should change to match, since the block
              no longer shows kaimahi — not changing her headings without a steer. */}
        </div>
      </section>

      {/* Values recap */}
      <section className="kydt-section" style={{position:'relative',overflow:'hidden'}}>
        <div className="kydt-container-wide" style={{position:'relative'}}>
          <Reveal style={{marginBottom:44,textAlign:'center'}}>
            <SectionHeading align="center" eyebrow={<T k="about.values.eyebrow">Ō mātou uara · Our values</T>} title={<T k="about.values.title">Five uara at the heart of everything</T>} maxWidth="600px" />
          </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.07} style={{display:'grid',placeItems:'center'}}>
                <ValuePillar motif={v.motif} name={v.name} gloss={<T k={`about.values.${i}.gloss`}>{v.gloss}</T>} motifSize={66} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <window.PartnerCTA onNav={onNav} />
      <style>{`@media(max-width:1040px){.kydt-do-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:640px){.kydt-do-grid{grid-template-columns:1fr!important}}`}</style>
    </div>
  );
}
window.AboutPage = AboutPage;