/* KYDT site chrome — sticky header with quick go-to shortcuts + build CTA, and a deep-sea footer. */
const { useState: cUseState, useEffect: cUseEffect } = React;

function SiteHeader({ current, onNav }){
  const { Button } = window.KYDTDesignSystem_1d4054;
  const [scrolled, setScrolled] = cUseState(false);
  const [open, setOpen] = cUseState(false);
  cUseEffect(()=>{
    const on = ()=> setScrolled(window.scrollY > 24);
    on(); window.addEventListener('scroll', on, {passive:true});
    return ()=> window.removeEventListener('scroll', on);
  },[]);
  const nav = [
    { id:'home', label:'Home' },
    { id:'about', label:'About Us / Our Mahi' },
    { id:'closer', label:'Take a Closer Look' },
    { id:'partner', label:'Partner With Us' },
  ];
  const go = (id)=>{ setOpen(false); onNav(id); };
  return (
    <header style={{position:'sticky',top:0,zIndex:100,
      background: scrolled ? 'rgba(251,252,253,0.9)' : 'rgba(251,252,253,0.4)',
      backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)',
      borderBottom: scrolled ? '1px solid var(--border-subtle)' : '1px solid transparent',
      boxShadow: scrolled ? '0 4px 20px rgba(0,20,40,0.05)' : 'none',
      transition:'background .3s var(--ease-out), border-color .3s, box-shadow .3s'}}>
      <div className="kydt-container-wide" style={{display:'flex',alignItems:'center',gap:20,
        paddingBlock: scrolled ? 10 : 16, transition:'padding .3s var(--ease-out)'}}>
        <button onClick={()=>go('home')} style={{display:'flex',alignItems:'center',gap:12,background:'none',border:'none',cursor:'pointer',padding:0}} aria-label="KYDT home">
          <img src="assets/logo-manu.png" alt="KYDT manu" style={{height: scrolled?38:46, width:'auto', transition:'height .3s var(--ease-out)'}} />
          <span style={{textAlign:'left',lineHeight:1.04}}>
            <span style={{display:'block',fontFamily:'var(--font-display)',fontWeight:700,fontSize:20,color:'var(--text-heading)',letterSpacing:'-0.01em'}}>KYDT</span>
            <span style={{display:'block',fontSize:10,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--brand-secondary)',fontWeight:600}}>Youth Development Trust</span>
          </span>
        </button>

        <nav className="kydt-desktop-nav" style={{display:'flex',gap:2,marginLeft:'auto',alignItems:'center'}}>
          {nav.map(n=>(
            <button key={n.id} onClick={()=>go(n.id)} className="kydt-navlink" data-active={current===n.id} style={{
              background:'none',border:'none',cursor:'pointer',padding:'9px 15px',borderRadius:'var(--radius-pill)',
              fontFamily:'var(--font-body)',fontSize:14.5,fontWeight: current===n.id?700:500,position:'relative',
              color: current===n.id?'var(--brand-primary)':'var(--text-body)',
              transition:'color .2s, background .2s'}}>{n.label}</button>
          ))}
        </nav>

        <div className="kydt-desktop-nav" style={{marginLeft:8}}>
          <Button variant="secondary" size="sm" iconRight={window.KIcon('heart-handshake',18)} onClick={()=>go('partner')}>Support the build</Button>
        </div>

        <button className="kydt-burger" onClick={()=>setOpen(o=>!o)} aria-label="Menu" style={{display:'none',marginLeft:'auto',background:'none',border:'none',cursor:'pointer',color:'var(--text-heading)'}}>
          {window.KIcon(open?'x':'menu',26)}
        </button>
      </div>

      {open && (
        <div className="kydt-mobile-menu" style={{borderTop:'1px solid var(--border-subtle)',background:'var(--white)',padding:'12px 24px 20px'}}>
          {nav.map(n=>(
            <button key={n.id} onClick={()=>go(n.id)} style={{display:'block',width:'100%',textAlign:'left',background:'none',border:'none',borderBottom:'1px solid var(--border-subtle)',padding:'14px 4px',fontFamily:'var(--font-body)',fontSize:16,fontWeight: current===n.id?700:500,color: current===n.id?'var(--brand-primary)':'var(--text-body)',cursor:'pointer'}}>{n.label}</button>
          ))}
          <div style={{marginTop:16}}><Button full variant="secondary" onClick={()=>go('partner')} iconRight={window.KIcon('heart-handshake',18)}>Support the build</Button></div>
        </div>
      )}
      <style>{`
        .kydt-navlink:hover{background:var(--sea-50);color:var(--brand-primary)!important}
        @media(max-width:1040px){.kydt-desktop-nav{display:none!important}.kydt-burger{display:block!important}}
      `}</style>
    </header>
  );
}

function SiteFooter({ current, onNav }){
  const { Whakatauki } = window.KYDTDesignSystem_1d4054;
  const go = (id)=> onNav(id);
  const col = (title, items)=>(
    <div>
      <div style={{fontFamily:'var(--font-body)',fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--brand-highlight)',fontWeight:700,marginBottom:14}}>{title}</div>
      <div style={{display:'flex',flexDirection:'column',gap:10}}>{items}</div>
    </div>
  );
  const flink = (label,id)=> <button key={label} onClick={()=>go(id)} style={{background:'none',border:'none',padding:0,textAlign:'left',cursor:'pointer',fontFamily:'var(--font-body)',fontSize:14.5,color:'var(--text-on-dark-muted)'}} onMouseEnter={e=>e.currentTarget.style.color='#fff'} onMouseLeave={e=>e.currentTarget.style.color='var(--text-on-dark-muted)'}>{label}</button>;
  const info = (icon,text)=> <div style={{display:'flex',gap:10,alignItems:'flex-start',fontFamily:'var(--font-body)',fontSize:14.5,color:'var(--text-on-dark-muted)'}}><span style={{color:'var(--brand-highlight)',marginTop:1}}>{window.KIcon(icon,17)}</span><span>{text}</span></div>;
  return (
    <footer style={{position:'relative',background:'linear-gradient(180deg,var(--sea-900),var(--sea-950))',color:'var(--text-on-dark)',overflow:'hidden'}}>
      <img src="assets/pattern-pasifika-wave-light.png" alt="" aria-hidden="true" style={{position:'absolute',top:0,left:0,width:'100%',opacity:0.1,pointerEvents:'none',transform:'scaleY(-1)'}} />
      <div className="kydt-container-wide" style={{position:'relative',paddingTop:80,paddingBottom:40}}>
        <div style={{maxWidth:760,marginBottom:56}}>
          <Whakatauki tone="deep" align="left" translation="With your food basket and my food basket, the people will thrive." attribution="Ngā mihi nui">
            Nāu te rourou, nāku te rourou, ka ora ai te iwi.
          </Whakatauki>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr 1.2fr',gap:40}} className="kydt-footer-grid">
          <div>
            <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:16}}>
              <img src="assets/logo-manu.png" alt="KYDT" style={{height:44}} />
              <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20}}>KYDT</span>
            </div>
            <p style={{margin:0,maxWidth:300,fontSize:14.5,lineHeight:1.65,color:'var(--text-on-dark-muted)'}}>Kaipātiki Youth Development Trust — walking alongside rangatahi and whānau on Auckland's North Shore.</p>
          </div>
          {col('Explore',[flink('Home','home'),flink('About Us / Our Mahi','about'),flink('Take a Closer Look','closer'),flink('Partner With Us','partner')])}
          {col('Get in touch',[
            info('mail', <span>hello@kydt.org.nz <em style={{opacity:.6,fontStyle:'italic'}}>(placeholder)</em></span>),
            info('phone', <span>+64 9 000 0000 <em style={{opacity:.6,fontStyle:'italic'}}>(placeholder)</em></span>),
            info('map-pin', <span>Kaipātiki, North Shore, Tāmaki Makaurau</span>),
          ])}
          {col('Accreditation',[
            info('shield-check','MSD Level 2 approved'),
            info('file-badge','Registered charity CC48458'),
            <div key="cta" style={{marginTop:6}}><button onClick={()=>go('partner')} style={{cursor:'pointer',fontFamily:'var(--font-body)',fontWeight:600,fontSize:14,color:'var(--sea-950)',background:'var(--brand-highlight)',border:'none',borderRadius:'var(--radius-pill)',padding:'10px 18px',display:'inline-flex',alignItems:'center',gap:8}}>Partner with us {window.KIcon('arrow-right',16)}</button></div>
          ])}
        </div>
        <div style={{marginTop:56,paddingTop:24,borderTop:'1px solid var(--border-on-dark)',display:'flex',flexWrap:'wrap',gap:12,justifyContent:'space-between',fontSize:13,color:'var(--text-on-dark-muted)'}}>
          <span>© {new Date().getFullYear()} Kaipātiki Youth Development Trust. All rights reserved.</span>
          <span style={{fontFamily:'var(--font-display)',fontStyle:'italic'}}>He waka eke noa — we are all in this together.</span>
        </div>
      </div>
      <style>{`@media(max-width:900px){.kydt-footer-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:560px){.kydt-footer-grid{grid-template-columns:1fr!important}}`}</style>
    </footer>
  );
}

/* Shared partner call-to-action band, reused across pages. */
function PartnerCTA({ onNav, title, lead }){
  const { Button } = window.KYDTDesignSystem_1d4054;
  const I = window.KIcon;
  return (
    <section style={{position:'relative',overflow:'hidden',background:'var(--surface-sand)'}}>
      <div className="kydt-container kydt-section" style={{position:'relative',textAlign:'center'}}>
        <div data-reveal="" className="kydt-eyebrow-caps" style={{color:'var(--brand-secondary)',marginBottom:14}}>He waka eke noa</div>
        <h2 data-reveal="" data-reveal-delay="0.05" style={{margin:'0 auto',maxWidth:760,fontFamily:'var(--font-display)',fontWeight:600,fontSize:'clamp(1.9rem,3.4vw,2.9rem)',lineHeight:1.1,letterSpacing:'-0.02em',color:'var(--text-heading)'}}>{title||'Walk alongside us — together we can create lasting change'}</h2>
        <p data-reveal="" data-reveal-delay="0.1" style={{margin:'18px auto 0',maxWidth:560,fontSize:'var(--text-md)',lineHeight:1.6,color:'var(--text-body)'}}>{lead||'Partner with KYDT to help rangatahi and whānau thrive, and to build safer, stronger communities.'}</p>
        <div data-reveal="" data-reveal-delay="0.15" style={{display:'flex',flexWrap:'wrap',gap:14,justifyContent:'center',marginTop:32}}>
          <Button variant="secondary" size="lg" iconRight={I('arrow-right')} onClick={()=>onNav('partner')}>Partner with us</Button>
          <Button variant="outline" size="lg" iconLeft={I('mail')} onClick={()=>onNav('partner')}>Enquire now</Button>
        </div>
      </div>
    </section>
  );
}

window.SiteHeader = SiteHeader;
window.SiteFooter = SiteFooter;
window.PartnerCTA = PartnerCTA;

/* Compact inner-page hero: deep-sea gradient, faded motif, eyebrow/title/lead. */
function PageHero({ eyebrow, title, lead, motif='wave-bottom', tone='sea' }){
  const bg = tone==='jade' ? 'linear-gradient(160deg,var(--jade-900),var(--sea-900))' : 'linear-gradient(160deg,var(--sea-800),var(--sea-950))';
  return (
    <section style={{position:'relative',overflow:'hidden',background:bg,color:'var(--text-on-dark)'}}>
      <img src={motif==='band-top'?'assets/pattern-diamond-band-light.png':'assets/pattern-pasifika-wave-light.png'} alt="" aria-hidden="true" style={{position:'absolute',bottom:0,left:0,width:'100%',opacity:0.12,pointerEvents:'none'}} />
      <div className="kydt-container" style={{position:'relative',paddingTop:150,paddingBottom:96}}>
        <div className="ph-eyebrow" style={{opacity:0,display:'inline-flex',alignItems:'center',gap:10,color:'var(--brand-highlight)',fontFamily:'var(--font-body)',fontWeight:700,fontSize:13.5,letterSpacing:'0.16em',textTransform:'uppercase'}}>
          <span style={{width:28,height:2,background:'var(--brand-highlight)',display:'inline-block'}} />{eyebrow}
        </div>
        <h1 className="ph-title" style={{opacity:0,margin:'20px 0 0',maxWidth:840,fontFamily:'var(--font-display)',fontWeight:600,fontSize:'clamp(2.3rem,4.6vw,3.7rem)',lineHeight:1.06,letterSpacing:'-0.02em',color:'#fff'}}>{title}</h1>
        {lead && <p className="ph-lead" style={{opacity:0,margin:'24px 0 0',maxWidth:620,fontSize:'var(--text-md)',lineHeight:1.65,color:'var(--text-on-dark)'}}>{lead}</p>}
      </div>
    </section>
  );
}

/* Run the inner-page hero intro once. Call inside a page effect. */
function playPageHero(){
  if(!window.gsap) return;
  const g = window.gsap;
  g.set(['.ph-eyebrow','.ph-title','.ph-lead'],{opacity:0});
  g.timeline({defaults:{ease:'power3.out'},delay:0.1})
    .fromTo('.ph-eyebrow',{y:16},{opacity:1,y:0,duration:0.6})
    .fromTo('.ph-title',{y:30},{opacity:1,y:0,duration:0.85},'-=0.3')
    .fromTo('.ph-lead',{y:20},{opacity:1,y:0,duration:0.7},'-=0.5');
}
window.PageHero = PageHero;
window.playPageHero = playPageHero;