/* ============================================================
   Knowledge Hub · Partner band · Membership · Footer
   ============================================================ */

function KnowledgeHub(){
  const [active,setActive]=React.useState("All");
  const filters=["All","AI Policy","Certification","Ethics","Industry","Webinars"];
  const feat=INSIGHTS[0], rest=INSIGHTS.slice(1);
  return (
    <section className="hub sect" id="resources">
      <div className="wrap">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">Knowledge Hub</span>
            <h2 className="h2">Grow with AI</h2>
            <p>Educational resources, policy intelligence, case studies and recordings — with AI-powered search and auto-tagging from the Research Synthesizer.</p>
          </div>
        </div>

        <div className="hub-search">
          <Icon.search size={18}/>
          <input placeholder="Search 2,400+ resources — try &ldquo;Singapore model governance&rdquo;…"/>
          <span className="ai-pill"><Icon.spark size={13}/> AI search</span>
        </div>
        <div className="hub-filters">
          {filters.map(f=>(
            <button key={f} className={"fchip"+(active===f?" on":"")} onClick={()=>setActive(f)}>{f}</button>
          ))}
        </div>

        <div className="hub-grid" style={{marginTop:34}}>
          <article className="card hover hub-feature">
            <div className="media"><NetworkMotif variant="concentric"/>
              <div style={{position:'absolute',left:24,bottom:20}}><span className="chip chip-live"><span className="dot"></span>Live · updated weekly</span></div>
            </div>
            <div className="body">
              <span className="tag">{feat.tag}</span>
              <h3>{feat.title}</h3>
              <p>{feat.desc}</p>
              <div style={{marginTop:'auto',paddingTop:20,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                <span style={{fontSize:13,color:'var(--ink-3)',fontWeight:600}}>{feat.date} · {feat.read}</span>
                <a className="btn btn-dark" href="/members/portal/ai-tools.html" style={{padding:'10px 18px'}}>Read the digest <Icon.arrow size={15}/></a>
              </div>
            </div>
          </article>
          {rest.map((r,i)=>(
            <a className="card hover hub-small" key={i} href="/members/portal/knowledge.html">
              <div className="tags"><span className={"tag"+(r.alt?" alt":"")}>{r.tag}</span></div>
              <h3>{r.title}</h3>
              <div className="meta">
                {r.tag==="Webinar"
                  ? <span style={{display:'inline-flex',alignItems:'center',gap:6,color:'var(--accent)',fontWeight:600}}><Icon.play size={13}/> Watch · {r.read}</span>
                  : <span>{r.date} · {r.read} read</span>}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnerBand(){
  const ptiers=[
    {t:"Strategic partner", s:"Board seat · joint research", c:"linear-gradient(135deg,#1ba5fe,#0f70d7)", g:"S"},
    {t:"Corporate partner", s:"Co-branded events · talent pipeline", c:"linear-gradient(135deg,#2f7d8f,#246070)", g:"C"},
    {t:"Training partner", s:"WSQ & AI Academy delivery", c:"linear-gradient(135deg,#c4623f,#a84e2f)", g:"T"},
  ];
  return (
    <section className="sect-tight" id="partners">
      <div className="wrap">
        <div className="partner-band">
          <div className="partner-inner">
            <div>
              <span className="eyebrow" style={{color:'#7fd0ff'}}>For organisations</span>
              <h2 className="h2" style={{marginTop:14}}>Partner with Asia&apos;s AI community</h2>
              <p>Reach 5,800+ practitioners, co-host events, recruit verified talent, and shape responsible-AI standards across 12 countries. Choose the tier that fits your goals.</p>
              <div style={{display:'flex',gap:12,marginTop:26,flexWrap:'wrap'}}>
                <a className="btn btn-primary btn-lg" href="/members/portal/partners.html">Become a partner <Icon.arrow size={16}/></a>
                <a className="btn btn-light btn-lg" href="/members/portal/partners.html">View prospectus <Icon.doc size={16}/></a>
              </div>
            </div>
            <div className="tier-list">
              {ptiers.map((p,i)=>(
                <a className="tier-row" key={i} href="/members/portal/partners.html">
                  <div className="badge" style={{background:p.c,color:'#fff'}}>{p.g}</div>
                  <div className="ti"><b>{p.t}</b><s>{p.s}</s></div>
                  <Icon.arrow size={18}/>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Membership(){
  return (
    <section className="sect" id="join" style={{background:'var(--mist)',borderTop:'1px solid var(--line-soft)'}}>
      <div className="wrap">
        <div className="kicker-row center" style={{marginBottom:48}}>
          <span className="eyebrow center">Membership</span>
          <h2 className="h2">Choose your membership</h2>
          <p className="lead">Every tier includes full access to Asia AI events, community forums, and our AI &amp; Human Intelligence course library. All prices in SGD · annual billing.</p>
        </div>
        <div className="tiers tiers-4">
          {TIERS.map((t,i)=>(
            <div className={"card tier-card"+(t.featured?" featured":"")} key={i}>
              <span className="tname">{t.name}</span>
              <div className="price">{t.price}{t.per && <s>{t.per}</s>}</div>
              <div className="pdesc">{t.desc}</div>
              <ul className="tier-feats">
                {t.feats.map(([f,inc],j)=>(
                  <li key={j} className={inc?"":"off"}>
                    <span className={"ck"+(inc?"":" no")}>{inc?<Icon.check size={12}/>:<Icon.x size={11}/>}</span>{f}
                  </li>
                ))}
              </ul>
              <a className={"btn "+t.btn} href="#" style={{width:'100%'}}>{t.cta}</a>
            </div>
          ))}
        </div>

        {/* corporate band */}
        <div className="corp-band card">
          <div className="corp-left">
            <span className="chip chip-accent" style={{marginBottom:12}}><Icon.briefcase size={13}/> Corporate</span>
            <h3 className="h3">Organisation membership</h3>
            <p>Up to 10 named seats, all with Premium access — company logo on the public portal and a dedicated account manager.</p>
            <a className="btn btn-dark" href="/members/portal/partners.html" style={{marginTop:18}}>Enquire now <Icon.arrow size={15}/></a>
          </div>
          <div className="corp-tiers">
            {CORP_TIERS.map((c,i)=>(
              <div className={"corp-tier"+(i===2?" best":"")} key={i}>
                {i===2 && <span className="best-tag">Best value</span>}
                <div className="ct-name">{c.t}</div>
                <div className="ct-seats">{c.seats}</div>
                <div className="ct-price">{c.price}<s>{c.per}</s></div>
                <div className="ct-seat">{c.seat}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  const cols=[
    {h:"Association", links:[["About us","#about"],["Our team","#team"],["Partners","#partners"],["Asia chapters","#chapters"],["Impact","#"]]},
    {h:"Resources", links:[["AI Academy","#resources"],["Talent Marketplace","portal/talent.html"],["Knowledge Hub","portal/knowledge.html"],["Media coverage","media-coverage.html"]]},
    {h:"Members", links:[["Members Portal","login.html"],["AI Policy Advisor","portal/ai-tools.html"],["AI Tools","portal/ai-tools.html"],["FAQ","#faq"]]},
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <div style={{background:'#fff',display:'inline-block',padding:'10px 14px',borderRadius:12,marginBottom:18}}>
              <img src="assets/aaa_logo.svg" alt="Asia AI Association" style={{height:36,filter:'none'}}/>
            </div>
            <p>Join the Asia AI Association to collaborate with leading experts, drive innovation, and shape ethical AI practices across Asia.</p>
            <div className="foot-social">
              {["f","▶","in","✉"].map((s,i)=><a key={i} href="#">{s}</a>)}
            </div>
          </div>
          {cols.map(c=>(
            <div className="foot-col" key={c.h}>
              <h4>{c.h}</h4>
              {c.links.map(([l,h])=><a key={l} href={h}>{l}</a>)}
            </div>
          ))}
          <div className="foot-col">
            <h4>Stay in the loop</h4>
            <p style={{fontSize:14,lineHeight:1.6,marginBottom:4}}>Monthly AI insights from across Asia.</p>
            <div className="foot-news">
              <input placeholder="you@work.com"/>
              <button aria-label="Subscribe"><Icon.send size={16} fill="#fff"/></button>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Asia AI Association · Fostering AI Innovation, Networking &amp; Ethics Across Asia</span>
          <div className="links">
            <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Code of conduct</a><a href="#">Contact</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { KnowledgeHub, PartnerBand, Membership, Footer });