/* ============================================================
   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="/events">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="/events" 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>
  );
}


function PastEvents(){
  const [events, setEvents] = React.useState(null);
  React.useEffect(()=>{
    fetch('/api/events/past')
      .then(r=>r.ok?r.json():[])
      .then(d=>setEvents(Array.isArray(d)?d.filter(e=>e.status==='past'||e.media_count>0).slice(0,4):[]))
      .catch(()=>setEvents([]));
  },[]);

  if (events && events.length===0) return null;

  function fmtDate(iso){
    if(!iso) return '';
    const d=new Date(iso);
    return d.toLocaleDateString('en-SG',{day:'numeric',month:'short',year:'numeric'});
  }
  function fmtMon(iso){
    if(!iso) return '';
    return new Date(iso).toLocaleDateString('en-SG',{month:'short'}).toUpperCase();
  }
  function fmtDay(iso){
    if(!iso) return '';
    return new Date(iso).getDate();
  }
  function typeColor(t){
    const m={conference:'#0f70d7',workshop:'#6b5ca5',networking:'#2f7d8f',webinar:'#c4623f'};
    return m[(t||'').toLowerCase()]||'#3a6ea5';
  }

  const skeleton = Array.from({length:4},(_,i)=>(
    <article key={i} className="card event-card" style={{opacity:.35}}>
      <div className="event-media" style={{background:'var(--line-soft)'}}></div>
      <div className="event-body">
        <div style={{height:10,background:'var(--line-soft)',borderRadius:6,marginBottom:10,width:'40%'}}></div>
        <div style={{height:16,background:'var(--line-soft)',borderRadius:6,marginBottom:8}}></div>
        <div style={{height:12,background:'var(--line-soft)',borderRadius:6,width:'60%'}}></div>
      </div>
    </article>
  ));

  return (
    <section className="sect" id="past-events" style={{borderTop:'1px solid var(--line-soft)'}}>
      <div className="wrap">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">Event gallery</span>
            <h2 className="h2">Past events</h2>
            <p>Highlights from our community gatherings across Asia — summits, workshops, and networking nights.</p>
          </div>
          <div className="right" style={{flexShrink:0}}>
            <a className="btn btn-ghost" href="/events">Full calendar <Icon.calendar size={16}/></a>
          </div>
        </div>
        <div className="events-grid">
          {events === null ? skeleton : events.map((e,i)=>{
            const cover = e.cover_image || (e.photos&&e.photos[0]) || null;
            const tc = typeColor(e.event_type);
            return (
              <article className="card hover event-card" key={e.id||i}>
                <div className="event-media" style={{position:'relative',overflow:'hidden',background:'var(--mist)',minHeight:160}}>
                  {cover
                    ? <img src={cover} alt={e.title} style={{width:'100%',height:'100%',objectFit:'cover',position:'absolute',inset:0,display:'block'}}/>
                    : <NetworkMotif variant={['network','concentric','grid'][i%3]}/>}
                  {cover && <div style={{position:'absolute',inset:0,background:'linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.65) 100%)',pointerEvents:'none'}}/>}
                  <div className="event-date" style={{position:'absolute',top:14,left:14,background:'rgba(255,255,255,.96)',borderRadius:10,padding:'6px 12px',textAlign:'center',lineHeight:1.15}}>
                    <div className="d" style={{fontSize:20,fontWeight:800,color:'var(--ink)'}}>{fmtDay(e.start_date)}</div>
                    <div className="m" style={{fontSize:11,fontWeight:600,color:'var(--ink-3)',letterSpacing:'.05em'}}>{fmtMon(e.start_date)}</div>
                  </div>
                  {e.media_count>0 && (
                    <div style={{position:'absolute',bottom:14,right:14,background:'var(--accent)',color:'#fff',fontSize:12,fontWeight:700,padding:'5px 11px',borderRadius:999,backdropFilter:'blur(4px)',boxShadow:'0 2px 8px rgba(0,0,0,.3)',display:'flex',alignItems:'center',gap:5}}>
                      <svg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2.5' style={{display:'inline',verticalAlign:'middle'}}><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>{e.media_count} photos
                    </div>
                  )}
                </div>
                <div className="event-body">
                  <span className="tag" style={{background:'transparent',padding:0,color:tc,textTransform:'capitalize'}}>{(e.event_type||'event').replace(/-/g,' ')}</span>
                  <h3 style={{marginTop:8,fontSize:15,lineHeight:1.4}}>{e.title}</h3>
                  <div className="event-meta">
                    {e.location && <div className="mi"><Icon.pin size={14}/>{e.location}</div>}
                    <div className="mi"><Icon.calendar size={14}/>{fmtDate(e.start_date)}</div>
                  </div>
                  <div className="event-foot">
                    <span style={{fontSize:12,color:'var(--ink-3)'}}>{e.registration_count>0?e.registration_count+' attended':''}</span>
                    {e.media_count > 0 && <a className="btn btn-primary" href="#" style={{fontSize:12.5,padding:'6px 14px',borderRadius:8,lineHeight:'normal',display:'inline-flex',alignItems:'center',gap:6}} onClick={(evt)=>{ evt.preventDefault(); window.openHomeLightbox && window.openHomeLightbox(e.slug, e.title); }}>View photos <Icon.arrow size={13}/></a>}
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

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