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

function Pillars(){
  return (
    <section className="sect" id="about">
      <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];
            return (
              <article className="card hover pillar" key={i}>
                <div className="pillar-top">
                  <span className="pillar-n mono">{p.n}</span>
                  <div className="pillar-ico"><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)=>(
            <div className={"chapter"+(c.role==="Headquarters"?" hq":"")} key={i}>
              <span className="flag">{c.flag}</span>
              <div className="cn">{c.c}</div>
              <div className="cr">{c.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Team(){
  return (
    <section className="sect" id="team">
      <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 className="right" style={{flexShrink:0}}>
            <a className="btn btn-ghost" href="#">View full committee <Icon.arrow size={16}/></a>
          </div>
        </div>
        <div className="team-grid">
          {TEAM.map((m,i)=>(
            <article className="card hover team-card" key={i}>
              <div className="team-av" style={{background:m.c}}>{m.i}</div>
              <div className="team-info">
                <div className="tm-name">{m.n}</div>
                <div className="tm-role">{m.r}</div>
              </div>
              <a className="team-link" href="#" aria-label="LinkedIn"><Icon.link size={15}/></a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({q,a,open,onClick}){
  return (
    <div className={"faq-item"+(open?" open":"")}>
      <button className="faq-q" onClick={onClick}>
        <span>{q}</span>
        <span className="faq-ico"><Icon.arrow size={16}/></span>
      </button>
      <div className="faq-a"><div className="faq-a-in">{a}</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} open={open===i} onClick={()=>setOpen(open===i?-1:i)}/>
          ))}
        </div>
      </div>
    </section>
  );
}

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