/* ============================================================
   AI Features · Events · Working Groups
   ============================================================ */

function RingMeter({score=92}){
  const r=27, c=2*Math.PI*r, off=c*(1-score/100);
  return (
    <div className="ring-meter">
      <svg width="62" height="62">
        <circle cx="31" cy="31" r={r} fill="none" stroke="rgba(255,255,255,.12)" strokeWidth="5"/>
        <circle cx="31" cy="31" r={r} fill="none" stroke="#22b367" strokeWidth="5"
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}/>
      </svg>
      <div className="val"><b>{score}</b><s>/100</s></div>
    </div>
  );
}

function AIFeatures(){
  return (
    <section className="ai-band sect" id="ai">
      <div className="wrap">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">AI agents, built in</span>
            <h2 className="h2">Member AI tools that keep<br/>you ahead of the field</h2>
            <p>Not a chatbot bolted on the side. The Asia AI Assistant, Ethics Auditor and Policy Advisor are powered by AI research agents — grounded in our ethical-AI principles.</p>
          </div>
          <div className="right" style={{flexShrink:0}}>
            <a className="btn btn-light" href="/members/portal/ai-tools.html">Explore AI tools <Icon.arrow size={16}/></a>
          </div>
        </div>

        <div className="ai-grid">
          {/* Assistant */}
          <div className="ai-card span">
            <div className="ico"><Icon.spark size={22} fill="#fff"/></div>
            <span className="ai-tag">Asia AI Assistant</span>
            <h3 style={{marginTop:12}}>Ask anything about membership, events &amp; courses</h3>
            <p>Get instant answers, event recommendations and course suggestions — with citations back to the Knowledge Hub and AI Academy.</p>
            <div className="assistant">
              <div className="asst-line">
                <div className="asst-av usr">YV</div>
                <div className="asst-bub usr">What does Singapore&apos;s new model AI governance update mean for my startup?</div>
              </div>
              <div className="asst-line">
                <div className="asst-av bot"><Icon.spark size={13} fill="#fff"/></div>
                <div className="asst-bub">
                  The <b>AI Policy Advisor</b> flagged this on Monday. Key change: voluntary testing now expected for high-risk deployments. I&apos;ve drafted a 3-point action list and found a <b>Jul 2 webinar</b> on it — register you?
                  <div className="typing" style={{marginTop:8}}><i></i><i></i><i></i></div>
                </div>
              </div>
              <div className="asst-input">
                <Icon.spark size={15} fill="#5cc2ff"/>
                <span className="ph">Message the Asia AI Assistant…</span>
                <span className="send"><Icon.send size={14} fill="#fff"/></span>
              </div>
            </div>
          </div>

          {/* Ethics checker */}
          <div className="ai-card">
            <div className="ico" style={{background:'linear-gradient(135deg,#22b367,#179a55)',boxShadow:'0 10px 24px rgba(34,179,103,.3)'}}><Icon.shield size={22}/></div>
            <span className="ai-tag" style={{color:'#5fe0a0',background:'rgba(34,179,103,.14)'}}>AI Ethics Auditor</span>
            <h3 style={{marginTop:12}}>Score any AI document for risk</h3>
            <p>Upload a model card or policy → get a compliance score, risk summary, and concrete fixes.</p>
            <div className="ethics-score">
              <RingMeter score={92}/>
              <div className="ethics-rows">
                <div className="erow"><span style={{width:64}}>Fairness</span><span className="b"><i style={{width:'88%',background:'#22b367'}}></i></span></div>
                <div className="erow"><span style={{width:64}}>Transparency</span><span className="b"><i style={{width:'94%',background:'#22b367'}}></i></span></div>
                <div className="erow"><span style={{width:64}}>Privacy</span><span className="b"><i style={{width:'71%',background:'#f0a92b'}}></i></span></div>
              </div>
            </div>
            <div className="feat"><a className="btn-link" href="/members/portal/ai-tools.html" style={{color:'#5cc2ff',fontSize:14}}>Run an audit <Icon.arrow size={14}/></a></div>
          </div>

          {/* Insights */}
          <div className="ai-card">
            <div className="ico" style={{background:'linear-gradient(135deg,#1ba5fe,#0f70d7)',boxShadow:'0 10px 24px rgba(15,112,215,.32)'}}><Icon.gavel size={22}/></div>
            <span className="ai-tag">AI Policy Advisor</span>
            <h3 style={{marginTop:12}}>8 jurisdictions, tracked weekly</h3>
            <p>AI agents scan the web every Monday and flag the regulation changes that matter for your business.</p>
            <div className="feat" style={{display:'flex',flexDirection:'column',gap:9}}>
              <div className="asst-bub" style={{fontSize:12.5}}><b style={{color:'#fff'}}>This week ·</b> 3 high-priority alerts — SG testing guidance, EU-AI-Act deadline, India advisory.</div>
              <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
                <span className="ai-tag" style={{textTransform:'none'}}>#singapore</span>
                <span className="ai-tag" style={{textTransform:'none'}}>#eu-ai-act</span>
                <span className="ai-tag" style={{textTransform:'none'}}>#asean</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Events(){
  return (
    <section className="sect" id="events">
      <div className="wrap">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">What&apos;s on</span>
            <h2 className="h2">Upcoming events across Asia</h2>
            <p>Summits, webinars and member roundtables — with QR check-in, reminders, and certificates handled for you.</p>
          </div>
          <div className="right" style={{flexShrink:0}}>
            <a className="btn btn-ghost" href="/members/portal/events.html">View full calendar <Icon.calendar size={16}/></a>
          </div>
        </div>
        <div className="events-grid">
          {EVENTS.map((e,i)=>(
            <article className="card hover event-card" key={i}>
              <div className="event-media">
                <NetworkMotif variant={i===0?"network":i===1?"concentric":"grid"}/>
                <div className="event-date"><div className="d">{e.d}</div><div className="m">{e.m}</div></div>
                <div className="event-type">
                  <span className={"chip "+(e.live?"chip-live":"chip-accent")}>
                    <span className="dot"></span>{e.live?"Registering now":e.type}
                  </span>
                </div>
              </div>
              <div className="event-body">
                <span className="tag" style={{background:'transparent',padding:0,color:e.typeColor}}>{e.type}</span>
                <h3 style={{marginTop:8}}>{e.title}</h3>
                <div className="event-meta">
                  <div className="mi"><Icon.pin size={15}/>{e.place}</div>
                  <div className="mi"><Icon.clock size={15}/>{e.time}</div>
                </div>
                <div className="event-foot">
                  <div style={{display:'flex',alignItems:'center',gap:10}}>
                    <div className="avatars">
                      {e.avs.map((c,j)=><span key={j} style={{background:c}}></span>)}
                      <span className="more">+</span>
                    </div>
                    <span style={{fontSize:12.5,color:'var(--ink-3)',fontWeight:600}}>{e.att}</span>
                  </div>
                  <a className="btn-link" href="/members/portal/events.html" style={{fontSize:14}}>Register</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkingGroups(){
  return (
    <section className="sect" id="workinggroups" style={{background:'var(--mist)',borderTop:'1px solid var(--line-soft)',borderBottom:'1px solid var(--line-soft)'}}>
      <div className="wrap">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">Where the work happens</span>
            <h2 className="h2">Featured working groups</h2>
            <p>Member-led spaces with discussion feeds, resource libraries, monthly calls, and volunteer leads driving each domain forward.</p>
          </div>
          <div className="right" style={{flexShrink:0}}>
            <a className="btn btn-ghost" href="/members/portal/groups.html">Browse all groups <Icon.arrow size={16}/></a>
          </div>
        </div>
        <div className="wg-grid">
          {GROUPS.map((g,i)=>{
            const Ico = Icon[g.icon];
            return (
              <article className="card hover wg-card" key={i}>
                <div className="glow" style={{background:g.color}}></div>
                <div className="wg-ico" style={{background:g.color}}><Ico size={24}/></div>
                <h3>{g.name}</h3>
                <p>{g.desc}</p>
                <div className="wg-stats">
                  <div><span className="n">{g.members}</span><span className="l">Members</span></div>
                  <div><span className="n">{g.posts}</span><span className="l">This week</span></div>
                  <div><span className="n">Monthly</span><span className="l">Group call</span></div>
                </div>
                <div className="wg-foot">
                  <div className="wg-leads"><Icon.badge size={15}/> Leads: {g.leads}</div>
                  <a className="btn-link" href="/members/portal/groups.html" style={{fontSize:13.5}}>Join <Icon.arrow size={14}/></a>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AIFeatures, Events, WorkingGroups });