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

/* The two things someone can do from "Support the Mahi":
   give directly, or start a partnership conversation. Kept here so the
   desktop dropdown and the mobile menu can never drift apart. */
function supportOptions(){
  const cfg = window.KYDT_CONFIG || {};
  return [
    { key:'donate', icon:'heart', label:'Donate Now',
      sub:'Give securely online, one-off or monthly',
      href: cfg.donateUrl },
    { key:'partner', icon:'handshake', label:'Want to partner with us / more info',
      sub:'Sponsorship, partnership packages and the prospectus',
      nav:'partner' },
  ];
}

function SiteHeader({ current, onNav }){
  const { Button } = window.KYDTDesignSystem_1d4054;
  const [scrolled, setScrolled] = cUseState(false);
  const [open, setOpen] = cUseState(false);
  const [supportOpen, setSupportOpen] = cUseState(false);
  const supportRef = cUseRef(null);
  cUseEffect(()=>{
    if(!open) return;
    const onKey = (e)=>{ if(e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    return ()=> document.removeEventListener('keydown', onKey);
  },[open]);
  cUseEffect(()=>{
    if(!supportOpen) return;
    const onDown = (e)=>{ if(supportRef.current && !supportRef.current.contains(e.target)) setSupportOpen(false); };
    const onKey = (e)=>{ if(e.key === 'Escape'){
      setSupportOpen(false);
      /* hand focus back to the trigger, or Escape drops the user further down the page */
      const trigger = supportRef.current && supportRef.current.querySelector('button');
      if(trigger) trigger.focus();
    } };
    document.addEventListener('mousedown', onDown);
    document.addEventListener('keydown', onKey);
    return ()=>{ document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); };
  },[supportOpen]);
  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); setSupportOpen(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 ? 16 : 26, transition:'padding .3s var(--ease-out)'}}>
        <button onClick={()=>go('home')} style={{display:'flex',alignItems:'center',gap:14,background:'none',border:'none',cursor:'pointer',padding:0}} aria-label="KYDT home">
          <img src="assets/logo-manu.png" alt="KYDT manu" style={{height: scrolled?54:68, width:'auto', transition:'height .3s var(--ease-out)'}} />
          <span style={{textAlign:'left',lineHeight:1.06}}>
            <span className="kydt-wordmark-fade" style={{display:'block',fontFamily:'var(--font-wordmark)',fontWeight:400,fontSize:scrolled?30:36,lineHeight:1,letterSpacing:'0.02em',transition:'font-size .3s var(--ease-out)'}}>KYDT</span>
            <span style={{display:'block',marginTop:2,fontFamily:'var(--font-wordmark)',fontSize:scrolled?14:16,letterSpacing:'0.06em',color:'var(--brand-secondary-strong)',fontWeight:400,transition:'font-size .3s var(--ease-out)'}}>Kaipātiki 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,position:'relative'}} ref={supportRef}>
          <Button variant="secondary" size="sm" iconRight={window.KIcon(supportOpen?'chevron-up':'chevron-down',18)}
            onClick={()=>setSupportOpen(o=>!o)} aria-expanded={supportOpen}>Support the Mahi</Button>
          {supportOpen && (
            <div aria-label="Support the Mahi" style={{position:'absolute',top:'calc(100% + 10px)',right:0,minWidth:310,
              background:'var(--white)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',
              boxShadow:'var(--shadow-lg)',padding:8,zIndex:120}}>
              {supportOptions().map(o=>(
                <a key={o.key} className="kydt-support-item"
                  href={o.nav ? (window.KYDT_ROUTES ? window.KYDT_ROUTES[o.nav] : '/partner') : o.href}
                  {...(o.nav ? {} : {target:'_blank', rel:'noopener noreferrer'})}
                  onClick={o.nav ? (e)=>{ e.preventDefault(); setSupportOpen(false); go(o.nav); } : ()=>setSupportOpen(false)}
                  style={{display:'flex',gap:12,alignItems:'flex-start',padding:'12px 12px',borderRadius:'var(--radius-md)',
                    textDecoration:'none',color:'var(--text-heading)'}}>
                  <span style={{display:'grid',placeItems:'center',width:34,height:34,borderRadius:'var(--radius-pill)',
                    background:'var(--jade-100)',color:'var(--jade-700)',flexShrink:0}}>{window.KIcon(o.icon,17)}</span>
                  <span>
                    <span style={{display:'block',fontFamily:'var(--font-body)',fontWeight:600,fontSize:14.5}}>{o.label}</span>
                    <span style={{display:'block',marginTop:2,fontSize:12.5,lineHeight:1.45,color:'var(--text-muted)'}}>{o.sub}</span>
                  </span>
                </a>
              ))}
            </div>
          )}
        </div>

        <button className="kydt-burger" onClick={()=>setOpen(o=>!o)} aria-label="Menu" aria-expanded={open} 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:18}}>
            <div style={{fontFamily:'var(--font-body)',fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--brand-secondary)',fontWeight:700,marginBottom:10}}>Support the Mahi</div>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {supportOptions().map(o=>(
                <a key={o.key}
                  href={o.nav ? (window.KYDT_ROUTES ? window.KYDT_ROUTES[o.nav] : '/partner') : o.href}
                  {...(o.nav ? {} : {target:'_blank', rel:'noopener noreferrer'})}
                  onClick={o.nav ? (e)=>{ e.preventDefault(); go(o.nav); } : ()=>setOpen(false)}
                  style={{display:'flex',gap:10,alignItems:'center',padding:'13px 14px',borderRadius:'var(--radius-md)',
                    border:'1px solid var(--border-subtle)',textDecoration:'none',color:'var(--text-heading)',
                    fontFamily:'var(--font-body)',fontWeight:600,fontSize:15}}>
                  <span style={{color:'var(--jade-700)',display:'flex'}}>{window.KIcon(o.icon,18)}</span>{o.label}
                </a>
              ))}
            </div>
          </div>
        </div>
      )}
      <style>{`
        .kydt-navlink:hover{background:var(--sea-50);color:var(--brand-primary)!important}
        .kydt-support-item:hover{background:var(--sea-50)}
        @media(max-width:1040px){.kydt-desktop-nav{display:none!important}.kydt-burger{display:block!important}}
      `}</style>
    </header>
  );
}

function SiteFooter({ current, onNav }){
  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}}>
          {/* Cath's text is provisional — final wording promised week of 29 Sep (round 2 §2). */}
          <p style={{margin:0,fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:'var(--text-lg)',lineHeight:1.55,color:'var(--text-on-dark)'}}>
            The manu represents guidance, growth, and reaching one's potential. The blue tones reflect the life, healing, and connection carried by water. Together, they symbolise our commitment to helping young people thrive.
          </p>
        </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/kydt-manaia-white.png" alt="KYDT" style={{height:56,width:'auto'}} />
              <span className="kydt-wordmark-fade kydt-wordmark-fade--dark" style={{fontFamily:'var(--font-wordmark)',fontWeight:400,fontSize:32,lineHeight:1,letterSpacing:'0.02em'}}>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', <a href="mailto:support@kydt.org.nz" style={{color:'inherit',textDecoration:'none',borderBottom:'1px solid var(--border-on-dark)'}}>support@kydt.org.nz</a>),
            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;