/* KYDT Take a Closer Look — gallery, outcomes matrix, what we accomplish. */
const { useState: clUseState } = React;

function OutcomeRow({ area, activities, outcomes, open, onToggle, index }){
  const I = window.KIcon;
  return (
    <div data-reveal="" data-reveal-delay={index*0.06} style={{borderBottom:'1px solid var(--border-subtle)'}}>
      <button onClick={onToggle} className="kydt-outcome-head" style={{width:'100%',display:'flex',alignItems:'center',gap:20,padding:'22px 8px',background:'none',border:'none',cursor:'pointer',textAlign:'left'}}>
        <span style={{fontFamily:'var(--font-mono)',fontSize:13,color:'var(--brand-secondary)',fontWeight:600,width:34}}>{String(index+1).padStart(2,'0')}</span>
        <span style={{flex:1,fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-xl)',color:'var(--text-heading)',letterSpacing:'-0.01em'}}>{area}</span>
        <span style={{display:'grid',placeItems:'center',width:38,height:38,borderRadius:'50%',background: open?'var(--brand-primary)':'var(--sea-50)',color: open?'#fff':'var(--brand-primary)',transition:'background .2s,transform .3s',transform: open?'rotate(180deg)':'none'}}>{I('chevron-down',20)}</span>
      </button>
      <div style={{display:'grid',gridTemplateRows: open?'1fr':'0fr',transition:'grid-template-rows .4s var(--ease-out)'}}>
        <div style={{overflow:'hidden'}}>
          <div className="kydt-outcome-body" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:32,padding:'4px 8px 28px 62px'}}>
            <div>
              <div style={{fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',fontWeight:700,color:'var(--brand-primary)',marginBottom:10}}><T k="closer.outcomes.activitiesLabel">Activities & actions</T></div>
              <p style={{margin:0,fontSize:15.5,lineHeight:1.6,color:'var(--text-body)'}}>{activities}</p>
            </div>
            <div>
              <div style={{fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',fontWeight:700,color:'var(--brand-secondary)',marginBottom:10}}><T k="closer.outcomes.outcomesLabel">Outcomes achieved</T></div>
              <p style={{margin:0,fontSize:15.5,lineHeight:1.6,color:'var(--text-body)'}}>{outcomes}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CloserLookPage({ onNav }){
  const DS = window.KYDTDesignSystem_1d4054;
  const { SectionHeading, Card, Button, Badge } = DS;
  const { Reveal, KIcon:I, MotifBackdrop, PageHero } = window;
  window.useScrollFX('closer');
  React.useEffect(()=>{ window.playPageHero && window.playPageHero(); },[]);
  const [openRow, setOpenRow] = clUseState(0);

  /* KYDT's own photography (brief section 5). Captions are Cath's own labels for each
     photo — kept as the alt text too rather than inventing a description of a
     scene we haven't been briefed on. Spans tile to full rows of 4. */
  const gallery = [
    { src:'assets/prepare-kai-together.jpg',   t:'Prepare kai together', span:2 },
    { src:'assets/woodturning.jpg',            t:'Woodturning',          span:1 },
    { src:'assets/art-space.jpg',              t:'Art space',            span:1 },
    /* pos: focal points from round 2 §5 — keep George (back row) in frame, and the shells in the hands */
    { src:'assets/building-connections.jpg',   t:'Building connections', span:2, pos:'50% 18%' },
    { src:'assets/out-on-the-whenua.jpg',      t:'Out on the whenua',    span:2, pos:'50% 86%' },
  ];
  /* Rebuilt from KYDT's 2024-2025 referral data in the site's own tokens
     (brief section 6). Each SVG carries its own title and source line; the block
     repeats the source once in HTML so it stays legible at any width, since the
     in-chart line is 12px inside an 880-wide viewBox and shrinks with the image. */
  const charts = [
    { title:'Who refers rangatahi to us', src:'assets/charts/chart-referrals-by-referrer.svg', alt:'Who refers rangatahi to us, 2024–2025: Schools 47%, Oranga Tamariki Youth Justice 31%, Community and other 12%, Police Youth Aid 8%, Oranga Tamariki Care and Protection 2%.' },
    { title:'Ethnicity of rangatahi referred', src:'assets/charts/chart-ethnicity.svg', alt:'Ethnicity of rangatahi referred, 2024–2025: Māori 48%, Pākehā/NZ European 21%, Pasifika 17%, Other 8%, Cook Islands 4%, Chinese 2%.' },
    { title:'Rangatahi by gender', src:'assets/charts/chart-gender.svg', alt:'Rangatahi by gender, all referrals 2024–2025: female 52%, male 48%.' },
    { title:'Status on exit', src:'assets/charts/chart-outcomes-on-exit.svg', alt:'Status on exit, 2024–2025: 81% into education, training or employment — back in school 65%, in a course 8%, Ministry of Education pathway 8%; not in education, employment or training 19%.' },
  ];

  const rows = [
    { area:'Engagement', activities:'Weekly mentoring, whānau visits, and consistent relationship building.', outcomes:'High participation, improved attendance, and stronger engagement.' },
    { area:'Personal development', activities:'Goal setting, strengths-based mentoring, and regular progress reviews.', outcomes:'Increased confidence, healthier choices, and greater accountability.' },
    { area:'Education & behaviour', activities:'School liaison, agency collaboration, and early intervention.', outcomes:'Improved school attendance, reduced offending, and better decision-making.' },
    { area:'Partnerships', activities:'MOUs, referral meetings, and clear communication pathways.', outcomes:'Positive feedback, stronger collaboration, and increased referrals.' },
    { area:'Quality & sustainability', activities:'Ethical practice, monitoring, staff development, and leadership.', outcomes:'Continuous improvement, quality service delivery, and sustained community demand.' },
  ];

  return (
    <div>
      <PageHero tone="jade" motif="band-top" eyebrow={<T k="closer.hero.eyebrow">Take a Closer Look</T>} title={<T k="closer.hero.title">See the mahi, and the difference it makes.</T>}
        lead={<T k="closer.hero.lead">A closer look at the everyday moments and the outcomes we track together.</T>} />

      {/* Gallery */}
      <section className="kydt-section" style={{position:'relative',overflow:'hidden'}}>
        <div className="kydt-container-wide">
          <Reveal style={{marginBottom:36,maxWidth:600}}>
            <SectionHeading eyebrow={<T k="closer.gallery.eyebrow">Photos</T>} title={<T k="closer.gallery.title">Everyday moments of connection and trust</T>} />
          </Reveal>
          <div className="kydt-gallery" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gridAutoRows:'190px',gap:16}}>
            {gallery.map((g,i)=>(
              <Reveal key={i} delay={(i%4)*0.06} className="kydt-gtile" style={{gridColumn:`span ${g.span}`}}>
                <figure className="kydt-gtile-inner" style={{margin:0,position:'relative',width:'100%',height:'100%',borderRadius:'var(--radius-lg)',overflow:'hidden',background:'linear-gradient(135deg,var(--sea-100),var(--jade-100))'}}>
                  <Img k={`closer.gallery.${i}.photo`} src={g.src} alt={g.t} loading="lazy" decoding="async" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',objectPosition:g.pos||'50% 50%',display:'block'}} />
                  <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,transparent 55%,rgba(0,20,40,0.65))',pointerEvents:'none'}} />
                  <figcaption style={{position:'absolute',left:16,bottom:14,color:'#fff',fontFamily:'var(--font-display)',fontWeight:600,fontSize:'var(--text-md)'}}><T k={`closer.gallery.${i}.caption`}>{g.t}</T></figcaption>
                </figure>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Outcomes matrix */}
      <section className="kydt-section" style={{position:'relative',overflow:'hidden'}}>
        <MotifBackdrop variant="band-jade" opacity={0.05} />
        <div className="kydt-container" style={{position:'relative'}}>
          <Reveal style={{marginBottom:16,maxWidth:640}}>
            <SectionHeading eyebrow={<T k="closer.outcomes.eyebrow">Outcomes framework</T>} title={<T k="closer.outcomes.title">How we measure the mahi</T>}
              lead={<T k="closer.outcomes.lead">Across five priority areas, we track the activities we deliver against the outcomes achieved. Select an area to explore.</T>} />
          </Reveal>
          <Reveal style={{marginTop:24}}>
            <Card padding="var(--space-4) var(--space-5)">
              {rows.map((r,i)=>(
                <OutcomeRow key={r.area} index={i} area={<T k={`closer.outcomes.${i}.area`}>{r.area}</T>}
                  activities={<T k={`closer.outcomes.${i}.activities`}>{r.activities}</T>} outcomes={<T k={`closer.outcomes.${i}.outcomes`}>{r.outcomes}</T>}
                  open={openRow===i} onToggle={()=>setOpenRow(openRow===i?-1:i)} />
              ))}
            </Card>
          </Reveal>

          {/* ---- What we accomplish (the four charts) ---- */}
          <Reveal style={{marginTop:64,maxWidth:640}}>
            <SectionHeading eyebrow={<T k="closer.results.eyebrow">By the numbers</T>} title={<T k="closer.results.title">What we accomplish</T>}
              lead={<T k="closer.results.lead">Who comes to us, and who they are when they leave.</T>} />
            <p style={{margin:'16px 0 0',fontSize:'var(--text-md)',lineHeight:1.65,color:'var(--text-body)'}}>
              <T k="closer.results.body">With each Rangatahi, the relationship continues beyond their allocated support. They are always welcome to reach out, call, or visit whenever they need encouragement, connection, or a familiar face as they continue on their journey.</T>
            </p>
          </Reveal>
          <div className="kydt-chart-stack" style={{marginTop:32,display:'flex',flexDirection:'column',gap:20}}>
            {charts.map((c,i)=>(
              <Reveal key={c.src} delay={i*0.06}>
                <Card padding="var(--space-5) var(--space-6)">
                  <div className="kydt-chart-scroll" tabIndex={0} role="region"
                    aria-label={`${c.title} — scrollable chart`}>
                    <Img k={`closer.results.${i}.chart`} src={c.src} alt={c.alt} loading="lazy" decoding="async" className="kydt-chart-img" />
                  </div>
                </Card>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.1} style={{marginTop:16,fontSize:13,color:'var(--text-muted)'}}>
            <T k="closer.results.source">Source: KYDT referral data, 2024–2025.</T>
          </Reveal>
        </div>
      </section>

      <window.PartnerCTA onNav={onNav}
        title={<T k="closer.cta.title">Impressed by the mahi? Help us do more of it</T>}
        lead={<T k="closer.cta.lead">{"Corporate partners and funders make this work possible. Let's kōrero about walking alongside us."}</T>} />
      <style>{`
        /* Charts render at their natural 880px where there's room. Below that the
           chart scrolls inside its own card rather than shrinking the 12px source
           line into illegibility, and the page itself never scrolls sideways. */
        .kydt-chart-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
        /* on phones let the chart use the full card width rather than sitting
           inside the card padding, so more of it is visible per scroll */
        @media(max-width:640px){.kydt-chart-scroll{margin-inline:calc(-1 * var(--space-6))}}
        .kydt-chart-scroll:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
        .kydt-chart-img{display:block;width:100%;min-width:620px;max-width:880px;height:auto}
        .kydt-gtile-inner{transition:transform .35s var(--ease-out),box-shadow .35s}
        .kydt-gtile-inner:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-lg)}
        .kydt-outcome-head:hover span:nth-child(2){color:var(--brand-primary)}
        @media(max-width:900px){.kydt-gallery{grid-template-columns:1fr 1fr!important}.kydt-gtile{grid-column:span 1!important}.kydt-outcome-body{grid-template-columns:1fr!important;padding-left:8px!important;gap:16px!important}}
      `}</style>
    </div>
  );
}
window.CloserLookPage = CloserLookPage;