/* ============================================================
   Who We Are (pillars) · Chapters · Team · FAQ
   ============================================================ */

function Pillars(){
  const PILLAR_ACCENTS=['#0f70d7','#1ba5fe','#22b367'];
  return (
    <section className="sect" id="about" style={{background:'linear-gradient(180deg,#f8faff 0%,#fff 100%)',paddingBottom:48}}>
      <div className="wrap">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">Who we are</span>
            <h2 className="h2">A collective advancing AI across Asia</h2>
            <p>Committed to AI innovation, collaboration, and ethical practices — through three pillars that shape everything we do.</p>
          </div>
        </div>
        <div className="pillars">
          {PILLARS.map((p,i)=>{
            const Ico=Icon[p.icon];
            const accent=PILLAR_ACCENTS[i]||'var(--accent)';
            return (
              <article className="card hover pillar" key={i} style={{borderTop:'4px solid '+accent}}>
                <div className="pillar-top">
                  <span className="pillar-n mono">{p.n}</span>
                  <div className="pillar-ico" style={{background:accent+'18',color:accent}}><Ico size={22}/></div>
                </div>
                <h3 className="h3">{p.title}</h3>
                <p>{p.desc}</p>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Chapters(){
  return (
    <section className="sect-tight" id="chapters" style={{background:'var(--surface)',borderTop:'1px solid var(--line-soft)',borderBottom:'1px solid var(--line-soft)'}}>
      <div className="wrap">
        <div className="sec-head" style={{marginBottom:34}}>
          <div className="left">
            <span className="eyebrow">Asia chapters</span>
            <h2 className="h2">A network across the region</h2>
            <p>Connecting AI professionals through eight active chapters — and growing toward 12 countries.</p>
          </div>
        </div>
        <div className="chapters">
          {CHAPTERS.map((c,i)=>{
            const isHQ=c.role==="Headquarters";
            return (
              <div className={"chapter"+(isHQ?" hq":"")} key={i}
                style={isHQ?{background:'linear-gradient(135deg,#fffbeb,#fef3c7)',borderColor:'#f59e0b',animation:'hq-pulse 3s ease infinite'}:{}}>
                <span className="flag" style={{fontSize:18,lineHeight:1.2}}>{c.flag}</span>
                <div className="cn">{c.c}</div>
                <div className="cr">{isHQ?"★ "+c.role:c.role}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const colorPal=['#0f70d7','#2f7d8f','#6b5ca5','#c4623f','#3a6ea5','#1ba5fe','#d9904b','#22b367'];

function Team(){
  const [members, setMembers] = React.useState(window.TEAM || []);

  React.useEffect(()=>{
    if(document.getElementById('team-css-s')) return;
    var s=document.createElement('style');
    s.id='team-css-s';
    s.textContent='.tg-s{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:1100px){.tg-s{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.tg-s{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.tg-s{grid-template-columns:1fr}} .tc-s{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07);border:1px solid #e8ecf0;transition:transform .18s,box-shadow .18s} .tc-s:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.14)} .tc-ph{height:240px;position:relative;overflow:hidden} .tc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top} .tc-ov{position:absolute;bottom:0;left:0;right:0;height:130px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);pointer-events:none} .tc-rb{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tc-nm{position:absolute;bottom:34px;left:14px;color:#fff;font-size:17px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);line-height:1.2;max-width:85%} .tc-jt{position:absolute;bottom:12px;left:14px;color:rgba(255,255,255,.82);font-size:11px;line-height:1.3;max-width:85%} .tc-body{padding:12px 14px;display:flex;gap:8px;flex-wrap:wrap} .tc-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:8px;border:1px solid #dde4ea;font-size:12px;font-weight:600;color:#42505d;text-decoration:none;background:#fff;transition:.15s} .tc-btn:hover{border-color:#0f70d7;color:#0f70d7}';
    document.head.appendChild(s);
  },[]);

  React.useEffect(()=>{
    fetch('/api/team/public')
      .then(function(r){ return r.json(); })
      .then(function(data){ if(data&&data.length) setMembers(data); })
      .catch(function(){});
  },[]);

  if(!members.length) return null;

  return (
    <section className="sect" id="team" style={{background:'var(--mist)',borderTop:'1px solid var(--line-soft)'}}>
      <div className="wrap">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">Meet the committee</span>
            <h2 className="h2">Our team</h2>
            <p>Dedicated AI professionals driving innovation and community across Asia.</p>
          </div>
        </div>
        <div className="tg-s">
          {members.map(function(m,i){
            var initials=(m.name||m.n||'').split(' ').slice(0,2).map(function(w){return w[0]||'';}).join('').toUpperCase();
            var color=colorPal[i%colorPal.length];
            var photo=m.photo||null;
            var name=m.name||m.n||'';
            var role=m.role_title||m.r||'';
            var jobTitle=m.job_title||'';
            var linkedin=m.linkedin_url||null;
            var email=m.email||null;
            return (
              <div className="tc-s" key={m.id||i}>
                <div className="tc-ph" style={{background:photo?'#e8ecf0':'linear-gradient(135deg,'+color+'cc,'+color+'88)'}}>
                  {photo&&<img src={photo} alt={name} onError={function(e){e.target.style.display='none'}}/>}
                  {!photo&&<div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
                    <div style={{width:72,height:72,borderRadius:'50%',background:'rgba(255,255,255,.2)',border:'2px solid rgba(255,255,255,.4)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:24,fontWeight:700,color:'#fff'}}>{initials}</div>
                  </div>}
                  <div className="tc-ov"/>
                  {role&&<div className="tc-rb">{role}</div>}
                  <div className="tc-nm">{name}</div>
                  {jobTitle&&<div className="tc-jt">{jobTitle}</div>}
                </div>
                <div className="tc-body">
                  {linkedin&&linkedin!=='#'&&<a className="tc-btn" href={linkedin} target="_blank" rel="noopener noreferrer">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1.5 1.5M14 11a5 5 0 00-7 0l-3 3a5 5 0 007 7L11.5 19"/></svg>
                    {' '}LinkedIn
                  </a>}
                  {email&&<a className="tc-btn" href={'mailto:'+email}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></svg>
                    {' '}Email
                  </a>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
function FAQItem({q,a,qKey,aKey,open,onClick}){
  return (
    <div className={"faq-item"+(open?" open":"")}>
      <button className="faq-q" onClick={onClick}>
        <span><EditableText k={qKey} fallback={q} tag="span"/></span>
        <span className="faq-ico"><Icon.arrow size={16}/></span>
      </button>
      <div className="faq-a"><div className="faq-a-in"><EditableText k={aKey} fallback={a} tag="span"/></div></div>
    </div>
  );
}

function FaqSection(){
  const [open,setOpen]=React.useState(0);
  return (
    <section className="sect" id="faq" style={{background:'var(--mist)',borderTop:'1px solid var(--line-soft)'}}>
      <div className="wrap faq-wrap">
        <div className="faq-head">
          <span className="eyebrow">FAQ</span>
          <h2 className="h2" style={{marginTop:14}}>Frequently asked questions</h2>
          <p className="lead" style={{marginTop:14}}>Everything you need to know about the Asia AI Association.</p>
          <a className="btn btn-dark" href="/members/login.html" style={{marginTop:24}}>Go to Members Portal <Icon.arrow size={15}/></a>
        </div>
        <div className="faq-list">
          {FAQ.map((f,i)=>(
            <FAQItem key={i} q={f.q} a={f.a} qKey={"faq"+(i+1)+"-q"} aKey={"faq"+(i+1)+"-a"} open={open===i} onClick={()=>setOpen(open===i?-1:i)}/>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PillarsSection: Pillars, ChaptersSection: Chapters, TeamSection: Team, FaqSection });