/* ============================================================
   Knowledge Hub · Corporate Members · 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>
  );
}

/* CorporateMembers — admin editing mode allows inline changes to org name,
   logo URL, and website directly via PUT /api/corporate-orgs/:id. */
function CorporateMembers(){
  const [orgs,setOrgs]=React.useState(null);
  const { editing } = React.useContext(AdminContentContext);

  React.useEffect(()=>{
    fetch('/api/members/corporate/public')
      .then(r=>r.ok ? r.json() : [])
      .then(data=>setOrgs(Array.isArray(data)?data:[]))
      .catch(()=>setOrgs([]));
  },[]);

  if(!orgs || orgs.length===0) return null;

  const planStyle = (plan)=>{
    const p=(plan||'').toLowerCase();
    if(p==='gold') return {bg:'#fbf3df',fg:'#92702a',dot:'#d4a017'};
    if(p==='silver') return {bg:'#eef1f4',fg:'#5b6b7a',dot:'#94a3b8'};
    if(p==='bronze') return {bg:'#f6e9e0',fg:'#92532a',dot:'#c4623f'};
    return {bg:'var(--accent-soft)',fg:'var(--accent-deep)',dot:'var(--accent)'};
  };

  const initials = (name)=>(name||'').trim().split(/\s+/).map(w=>w[0]).slice(0,2).join('').toUpperCase();

  /* Save a field change back to the DB via the admin API */
  const saveOrgField = async (org, field, value) => {
    let token='';
    try{ token = localStorage.getItem('crm_token')||''; }catch(e){}
    if (!token) return;
    try {
      const body = {
        org_name: org.name, membership_tier: org.plan,
        website: org.website, company_logo: org.company_logo,
        show_on_homepage: true,
        [field]: value
      };
      await fetch('/api/corporate-orgs/'+org.id, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer '+token },
        body: JSON.stringify(body)
      });
      /* optimistic local update */
      setOrgs(prev=>prev.map(o=>o.id===org.id ? {...o,[field==='org_name'?'name':field]:value} : o));
    } catch(e) { console.warn('org field save failed', e); }
  };

  return (
    <section className="sect" id="corporate-members" style={{borderTop:'1px solid var(--line-soft)'}}>
      <div className="wrap">
        <div className="kicker-row center" style={{marginBottom:48}}>
          <span className="eyebrow center">Corporate partners</span>
          <h2 className="h2">Our Corporate Members</h2>
          <p className="lead">Organisations across Asia backing responsible AI adoption through corporate membership of the Asia AI Association.</p>
        </div>
        <div className="corpmem-grid">
          {orgs.map((o,i)=>{
            const pc=planStyle(o.plan);
            return (
              <article className="card hover corpmem-card" key={i}>
                <div className="corpmem-top">
                  <div className="corpmem-logo">
                    {o.company_logo
                      ? <img src={o.company_logo} alt={o.name}
                          className={editing?'admin-editable':''}
                          title={editing?'Click to edit logo URL':''}
                          onClick={editing ? ()=>{
                            const url=window.prompt('Logo URL:',o.company_logo);
                            if(url && url!==o.company_logo) saveOrgField(o,'company_logo',url.trim());
                          } : undefined}
                        />
                      : <Icon.bank size={22}/>}
                  </div>
                  {o.plan && (
                    <span className="corpmem-badge" style={{background:pc.bg,color:pc.fg}}>
                      <span className="dot" style={{background:pc.dot}}></span>{o.plan.toUpperCase()} MEMBER
                    </span>
                  )}
                </div>
                {editing ? (
                  <h3
                    className="corpmem-name admin-editable"
                    contentEditable
                    suppressContentEditableWarning
                    onBlur={e=>{ const v=e.target.innerText.trim(); if(v!==o.name) saveOrgField(o,'org_name',v); }}
                  >{o.name}</h3>
                ) : (
                  <h3 className="corpmem-name">{o.name}</h3>
                )}
                {o.website && (
                  editing ? (
                    <span
                      className="corpmem-link admin-editable"
                      contentEditable
                      suppressContentEditableWarning
                      onBlur={e=>{ const v=e.target.innerText.trim(); if(v!==o.website) saveOrgField(o,'website',v); }}
                    >{o.website}</span>
                  ) : (
                    <a className="corpmem-link" href={o.website} target="_blank" rel="noopener noreferrer">
                      <Icon.globe size={14}/> {o.website.replace(/^https?:\/\//,'').replace(/\/$/,'')}
                    </a>
                  )
                )}
                {!o.website && editing && (
                  <span
                    className="corpmem-link admin-editable"
                    contentEditable
                    suppressContentEditableWarning
                    onBlur={e=>{ const v=e.target.innerText.trim(); if(v) saveOrgField(o,'website',v); }}
                    style={{color:'var(--ink-3)'}}
                  >Click to add website URL</span>
                )}
                {o.contact_person && <div className="corpmem-contact">Contact: {o.contact_person}</div>}
                {o.corporate_members && o.corporate_members.length>0 && (
                  <div className="corpmem-avatars">
                    {o.corporate_members.map((m,j)=>(
                      <div className="cm-chip" key={j} title={m.name}>
                        {m.photo
                          ? <img src={m.photo} alt={m.name}/>
                          : <span className="cm-ini">{initials(m.name)}</span>}
                        <span>{m.name}</span>
                      </div>
                    ))}
                  </div>
                )}
              </article>
            );
          })}
        </div>
        {editing && (
          <p style={{textAlign:'center',fontSize:13,color:'var(--ink-3)',marginTop:24}}>
            ✏ Editing mode: click org names and websites to edit inline. Logo images click to change URL. Changes save directly to the database.
          </p>
        )}
      </div>
    </section>
  );
}

function PartnerBand(){
  const [PARTNER_CATS, setPartnerCats] = React.useState(null);
  const [memberCount, setMemberCount] = React.useState(null);
  React.useEffect(()=>{
    fetch('/api/members/count').then(r=>r.json()).then(d=>setMemberCount(d.total||0)).catch(()=>{});
    const CAT_META = {
      'Training Partners': { color:'#0f70d7', bg:'#e7f1fd', icon:'shield' },
      'Community & Media': { color:'#6b5ca5', bg:'#eeebf8', icon:'users' },
      'Industry Partners': { color:'#2f7d8f', bg:'#e6f1f3', icon:'briefcase' },
    };
    fetch('/api/partnerships/public').then(r=>r.json()).then(data=>{
      const g = {};
      data.forEach(p=>{
        const cat = p.category || 'Industry Partners';
        if (!g[cat]) g[cat] = [];
        g[cat].push(p);
      });
      setPartnerCats(Object.entries(CAT_META).map(([label, meta])=>({
        label, ...meta,
        partners: (g[label]||[])
          .sort((a,b)=>(a.display_order||99)-(b.display_order||99))
          .map(p=>({
            name: p.org_name,
            logo: p.logo_url||null,
            monogram: p.monogram||(p.org_name||'?').slice(0,2).toUpperCase(),
            url: p.website||'#'
          }))
      })).filter(cat=>cat.partners.length>0));
    }).catch(()=>setPartnerCats([]));
  },[]);

  if (!PARTNER_CATS || !PARTNER_CATS.length) return null;

  return (
    <React.Fragment>
      {/* 3-category partner section */}
      <section className="sect" id="partners" style={{borderTop:'1px solid var(--line-soft)'}}>
        <div className="wrap">
          <div className="kicker-row" style={{marginBottom:48}}>
            <span className="eyebrow">Our network</span>
            <h2 className="h2">Partners & community</h2>
            <p className="lead">Organisations co-building Asia&apos;s AI ecosystem — through training programmes, media partnerships, and industry collaboration.</p>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:28}}>
            {PARTNER_CATS.map((cat,ci)=>{
              const Ico=Icon[cat.icon]||Icon.users;
              return (
                <div key={ci} className="card" style={{padding:'24px 22px'}}>
                  <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:20}}>
                    <div style={{width:36,height:36,borderRadius:10,background:cat.bg,display:'flex',alignItems:'center',justifyContent:'center',color:cat.color}}>
                      <Ico size={18}/>
                    </div>
                    <h3 style={{fontSize:14,fontWeight:700,color:'var(--ink)',margin:0}}>{cat.label}</h3>
                  </div>
                  <div style={{display:'flex',flexDirection:'column',gap:10}}>
                    {cat.partners.map((p,pi)=>(
                      <a key={pi} href={p.url} target="_blank" rel="noopener noreferrer" style={{display:'flex',alignItems:'center',gap:12,padding:'8px 10px',borderRadius:10,textDecoration:'none',background:'var(--surface)',border:'1px solid var(--line-soft)',transition:'.15s',color:'var(--ink)',fontSize:13.5,fontWeight:600}}
                        onMouseEnter={e=>{e.currentTarget.style.borderColor=cat.color;e.currentTarget.style.background=cat.bg;}}
                        onMouseLeave={e=>{e.currentTarget.style.borderColor='';e.currentTarget.style.background='var(--surface)';}}>
                        {p.logo
                          ? <img src={p.logo} alt={p.name} style={{height:28,width:'auto',maxWidth:52,objectFit:'contain',flexShrink:0}}/>
                          : <div style={{width:36,height:36,borderRadius:8,background:cat.bg,color:cat.color,display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:800,letterSpacing:'.02em',flexShrink:0,fontFamily:"'JetBrains Mono',monospace"}}>{p.monogram}</div>}
                        <span style={{flex:1}}>{p.name}</span>
                        <Icon.arrow size={13} style={{color:'var(--ink-3)'}}/>
                      </a>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>

          {/* CTA band */}
          <div style={{marginTop:40,background:'linear-gradient(135deg,#0a2a4a,#0f70d7)',borderRadius:20,padding:'32px 36px',display:'flex',alignItems:'center',gap:28,flexWrap:'wrap'}}>
            <div style={{flex:1,minWidth:220}}>
              <div className="eyebrow" style={{color:'#7fd0ff',marginBottom:10}}>For organisations</div>
              <h3 style={{color:'#fff',fontSize:20,fontWeight:700,margin:'0 0 8px'}}>Partner with Asia&apos;s AI community</h3>
              <p style={{color:'rgba(255,255,255,.75)',fontSize:14,margin:0}}>Reach {memberCount ? (memberCount.toLocaleString()+'+') : '5,800+'} practitioners, co-host events, recruit verified AI talent, and shape responsible-AI standards across 12 countries.</p>
            </div>
            <div style={{display:'flex',gap:12,flexWrap:'wrap',flexShrink:0}}>
              <a className="btn btn-primary btn-lg" href="/members/portal/partners.html" style={{background:'#fff',color:'#0f70d7',border:'none'}}>Become a partner <Icon.arrow size={15}/></a>
              <a className="btn btn-ghost btn-lg" href="/join-corporate" style={{color:'#fff',borderColor:'rgba(255,255,255,.3)'}}>View corporate membership <Icon.arrow size={15}/></a>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* MediaCoverage — 4-card grid. Data from portal-content.json `media_coverage` key.
   Each item: {outlet, headline, date, url, logo?} */
function MediaCoverage(){
  const { content, editing, onEdit } = React.useContext(AdminContentContext);
  let items = [];
  try {
    const raw = content && content['media_coverage'];
    if (raw) items = typeof raw === 'string' ? JSON.parse(raw) : raw;
  } catch(e){}

  /* Default items if none stored */
  const defaultItems = [
    {outlet:"Channel NewsAsia", headline:"Singapore AI association launches ethics certification for enterprises across ASEAN", date:"2026-04-15", url:"#"},
    {outlet:"The Business Times", headline:"Asia AI Association partners with SIM to deliver next-generation AI workforce programmes", date:"2026-03-22", url:"#"},
    {outlet:"e27", headline:"How Asia AI Association is building the region's largest responsible-AI practitioner network", date:"2026-02-10", url:"#"},
    {outlet:"Forbes Asia", headline:"50 AI leaders shaping Southeast Asia's artificial intelligence landscape in 2026", date:"2026-01-30", url:"#"},
  ];
  const display = items.length > 0 ? items : defaultItems;

  if (!editing && display === defaultItems) return null; // hide placeholder in non-editing mode if no real data

  return (
    <section className="sect" id="media" style={{background:'var(--mist)',borderTop:'1px solid var(--line-soft)'}}>
      <div className="wrap">
        <div className="sec-head" style={{marginBottom:36}}>
          <div className="left">
            <span className="eyebrow">In the news</span>
            <h2 className="h2">Media coverage</h2>
          </div>
          {editing && (
            <div className="right">
              <button className="btn btn-ghost" style={{fontSize:13}} onClick={()=>{
                const json = window.prompt('Edit media_coverage JSON array:\n(array of {outlet,headline,date,url})', JSON.stringify(display,null,2));
                if (json) try { onEdit('media_coverage', JSON.parse(json)); } catch(e){ alert('Invalid JSON'); }
              }}>✏ Edit items</button>
            </div>
          )}
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(240px,1fr))',gap:20}}>
          {display.slice(0,4).map((item,i)=>(
            <a key={i} href={item.url||'#'} target="_blank" rel="noopener noreferrer" className="card hover" style={{padding:'20px 20px',textDecoration:'none',display:'flex',flexDirection:'column',gap:10}}>
              <div style={{fontSize:11,fontWeight:700,textTransform:'uppercase',letterSpacing:'.08em',color:'var(--accent)'}}>
                {item.outlet||'Media'}
              </div>
              <div style={{fontSize:14.5,fontWeight:600,color:'var(--ink)',lineHeight:1.45,flex:1}}>
                {item.headline}
              </div>
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:'auto'}}>
                <span style={{fontSize:12,color:'var(--ink-3)'}}>
                  {item.date ? new Date(item.date).toLocaleDateString('en-SG',{day:'numeric',month:'short',year:'numeric'}) : ''}
                </span>
                <span style={{fontSize:12,fontWeight:600,color:'var(--accent)',display:'flex',alignItems:'center',gap:4}}>
                  Read <Icon.arrow size={12}/>
                </span>
              </div>
            </a>
          ))}
        </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"><EditableText k="mem-title" fallback="Choose your membership" tag="span"/></h2>
          <p className="lead"><EditableText k="mem-subtitle" fallback="Every tier includes full access to Asia AI events, community forums, and our AI & Human Intelligence course library. All prices in SGD · annual billing." tag="span"/></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={t.name==='Free'?'/join?plan=free':'/join?plan='+t.name.toLowerCase()} 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="/join-corporate" 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","/members/portal/talent.html"],["Knowledge Hub","/members/portal/knowledge.html"],["Media coverage","media-coverage.html"]]},
    {h:"Members", links:[["Members Portal","/members/login.html"],["AI Policy Advisor","/members/portal/ai-tools.html"],["AI Tools","/members/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/aaia_logo.jpg" alt="Asia AI Association" style={{height:72,width:"auto",maxWidth:200,objectFit:"contain",filter:"none"}}/>
            </div>
            <p><EditableText k="footer-desc" fallback="Join the Asia AI Association to collaborate with leading experts, drive innovation, and shape ethical AI practices across Asia." tag="span"/></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 id="footer-copy"><EditableText k="footer-copy" fallback="© 2026 Asia AI Association · Fostering AI Innovation, Networking & Ethics Across Asia" tag="span"/></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, CorporateMembers, PartnerBand, MediaCoverage, Membership, Footer });