/* ============================================================
   Nav · Hero · Trust bar
   ============================================================ */

function LangToggle(){
  var curr = (window._getLang&&window._getLang())||'en';
  var langs=[['en','EN'],['zh','中文'],['ta','தமிழ்']];
  return (
    <div style={{display:'flex',gap:2,alignItems:'center',background:'rgba(0,0,0,.07)',borderRadius:20,padding:'3px 4px'}}>
      {langs.map(function(x){ var c=x[0],l=x[1]; return (
        <button key={c} onClick={function(){ (window._setLang||function(cc){localStorage.setItem('aaia_lang',cc);location.reload();})(c); }}
          style={{fontSize:'10.5px',padding:'2px 8px',border:'none',cursor:'pointer',borderRadius:14,fontWeight:curr===c?700:400,background:curr===c?'var(--primary,#1ba5fe)':'transparent',color:curr===c?'#fff':'var(--ink-3)',transition:'.15s',lineHeight:1.4}}>
          {l}
        </button>
      ); })}
    </div>
  );
}

function NavBar(){
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(()=>{
    const f=()=>setScrolled(window.scrollY>8);
    window.addEventListener('scroll',f); return ()=>window.removeEventListener('scroll',f);
  },[]);
  const links=[[_t('nav.about'),'#about'],[_t('nav.resources'),'#resources'],[_t('nav.ai-policy'),'#ai'],[_t('nav.events'),'/events'],[_t('nav.directory'),'/directory'],[_t('nav.partners'),'#partners'],[_t('nav.membership'),'#join']];
  return (
    <React.Fragment>
      <div className="topbar">
        <div className="wrap">
          <div className="tb-left">
            <span className="tb-flag">{_t('topbar.chapters')}</span>
            <a href="#events">{_t('topbar.event')}</a>
          </div>
          <div className="tb-right">
            <a href="#resources">{_t('topbar.academy')}</a>
            <a href="/members/portal/talent.html">{_t('topbar.talent')}</a>
            <a href="/members/login.html" style={{display:'inline-flex',alignItems:'center',gap:6}}>{_t('topbar.portal')} <Icon.arrow size={13}/></a>
          </div>
        </div>
      </div>
      <nav className={"nav"+(scrolled?" scrolled":"")}>
        <div className="wrap">
          <a className="brand" href="#top"><img src="/assets/aaia_logo.jpg" alt="Asia AI Association" style={{height:'52px',width:'auto',objectFit:'contain'}}/></a>
          <div className="nav-links">
            {links.map(([l,h])=><a key={l} href={h}>{l}</a>)}
          </div>
          <div className="nav-cta">
            <button className="nav-search" aria-label="Search"><Icon.search size={17}/></button>
            <LangToggle/>
            <a className="btn btn-ghost" href="/members/login.html" style={{padding:'10px 16px'}}>{_t('nav.sign-in')}</a>
            <a className="btn btn-primary" href="#join" style={{padding:'10px 18px'}}>{_t('nav.join')}</a>
          </div>
          <button className="menu-btn" aria-label="Menu" onClick={()=>setMenuOpen(m=>!m)}><i></i><i></i><i></i></button>
        </div>
      </nav>
    {menuOpen && (
      <div style={{position:'fixed',inset:0,zIndex:9999,display:'flex',flexDirection:'column'}} onClick={()=>setMenuOpen(false)}>
        <div style={{background:'var(--surface)',padding:'16px 20px 20px',display:'flex',flexDirection:'column',gap:4,borderBottom:'1px solid var(--line)',boxShadow:'0 4px 24px rgba(0,0,0,.15)'}} onClick={e=>e.stopPropagation()}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
            <img src="/assets/aaia_logo.jpg" alt="Asia AI" style={{height:36,objectFit:'contain'}}/>
            <button onClick={()=>setMenuOpen(false)} style={{background:'none',border:'none',fontSize:24,cursor:'pointer',color:'var(--ink)',padding:'4px 8px'}}>&#x2715;</button>
          </div>
          {links.map(([l,h])=><a key={l} href={h} onClick={()=>setMenuOpen(false)} style={{display:'block',padding:'11px 12px',borderRadius:8,color:'var(--ink)',textDecoration:'none',fontSize:15,fontWeight:500}}>{l}</a>)}
          <div style={{display:'flex',gap:10,paddingTop:12}}>
            <a className="btn btn-ghost" href="/members/login.html" style={{flex:1,textAlign:'center',padding:'10px 0'}}>{_t('nav.sign-in')}</a>
            <a className="btn btn-primary" href="#join" onClick={()=>setMenuOpen(false)} style={{flex:1,textAlign:'center',padding:'10px 0'}}>{_t('nav.join')}</a>
          </div>
        </div>
        <div style={{flex:1,background:'rgba(0,0,0,.5)'}}/>
      </div>
    )}
    </React.Fragment>
  );
}

/* deterministic network motif */
function NetworkMotif({variant="network"}){
  const W=520,H=520;
  const nodes = React.useMemo(()=>{
    if(variant==="concentric"){
      const arr=[{x:.62,y:.42,r:7,big:true}];
      [[.16,60],[.28,90],[.4,120]].forEach(([rad,n])=>{
        const count=Math.round(rad*22);
        for(let i=0;i<count;i++){const a=(i/count)*Math.PI*2 + rad*4;
          arr.push({x:.62+Math.cos(a)*rad, y:.42+Math.sin(a)*rad, r:2.4});}
      });
      return arr;
    }
    if(variant==="grid"){
      const arr=[]; for(let r=0;r<6;r++)for(let c=0;c<6;c++){
        arr.push({x:.18+c*.13, y:.16+r*.13, r:(r+c)%5===0?4.5:2.6, big:(r+c)%5===0});}
      return arr;
    }
    // network — seeded pseudo-random
    let s=7; const rnd=()=>{s=(s*9301+49297)%233280;return s/233280;};
    const arr=[{x:.6,y:.42,r:8,big:true}];
    for(let i=0;i<26;i++) arr.push({x:.12+rnd()*.78, y:.1+rnd()*.78, r:1.8+rnd()*3.4, big:rnd()>.82});
    return arr;
  },[variant]);

  const edges = React.useMemo(()=>{
    const e=[]; for(let i=0;i<nodes.length;i++){
      for(let j=i+1;j<nodes.length;j++){
        const dx=nodes[i].x-nodes[j].x, dy=nodes[i].y-nodes[j].y;
        const dist=Math.hypot(dx,dy);
        const thr = variant==="grid"?.15 : variant==="concentric"?.13 : .19;
        if(dist<thr) e.push([i,j,1-dist/thr]);
      }
    }
    return e;
  },[nodes,variant]);

  return (
    <svg className="hv-net" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="ng" cx="60%" cy="42%" r="60%">
          <stop offset="0%" stopColor="#1ba5fe" stopOpacity=".9"/>
          <stop offset="100%" stopColor="#1ba5fe" stopOpacity=".25"/>
        </radialGradient>
      </defs>
      {edges.map(([i,j,w],k)=>(
        <line key={k} x1={nodes[i].x*W} y1={nodes[i].y*H} x2={nodes[j].x*W} y2={nodes[j].y*H}
          stroke="#5cc2ff" strokeOpacity={0.07+w*0.22} strokeWidth={0.8}/>
      ))}
      {nodes.map((n,k)=>(
        <circle key={k} cx={n.x*W} cy={n.y*H} r={n.r}
          fill={n.big?"url(#ng)":"#7fd0ff"} fillOpacity={n.big?1:.55}>
          {n.big && <animate attributeName="r" values={`${n.r};${n.r+2};${n.r}`} dur={`${3+k%3}s`} repeatCount="indefinite"/>}
        </circle>
      ))}
    </svg>
  );
}

var _mc = null;
function useMemberCount(){
  const [n, setN] = React.useState(_mc);
  React.useEffect(()=>{
    if (_mc !== null){ setN(_mc); return; }
    fetch('/api/members/count').then(r=>r.json()).then(d=>{ _mc=d.total||0; setN(_mc); }).catch(()=>{ _mc=610; setN(610); });
  },[]);
  return n;
}

function HeroVisual({motif}){
  const count = useMemberCount();
  return (
    <div className="hero-visual-wrap">
      <div className="hero-visual">
        <div className="ring">
          <div className="hv-grid-overlay"></div>
          <NetworkMotif variant={motif}/>
          <div className="hv-center">
            <div className="glyph"><Icon.spark size={42} fill="#fff"/></div>
            <div className="cap">Asia&apos;s AI network</div>
          </div>
        </div>
        <div className="hv-card c1">
          <div className="row">
            <div className="ico" style={{background:'#e7f1fd',color:'#0f70d7'}}><Icon.users size={17}/></div>
            <div><div className="t">{count ? (count.toLocaleString()+'+ members') : '5,800+ members'}</div><div className="s">across 12 countries</div></div>
          </div>
        </div>
        <div className="hv-card c2">
          <div className="row">
            <div className="ico" style={{background:'#eafaf1',color:'#1f7a4d'}}><Icon.shield size={17}/></div>
            <div><div className="t">Ethics score: 92</div><div className="s">AI Ethics Auditor ✓</div></div>
          </div>
        </div>
        <div className="hv-card c3">
          <div className="row">
            <div className="ico" style={{background:'#fdf0e8',color:'#c4623f'}}><Icon.calendar size={17}/></div>
            <div><div className="t">8 jurisdictions</div><div className="s">policy tracked weekly</div></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero({t}){
  const count = useMemberCount();
  const variantClass = t.heroLayout==="centered" ? "v-center" : t.heroLayout==="stat" ? "v-stat" : "v-split";
  return (
    <header className={"hero "+variantClass} id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="hero-badge">
              <span className="pill">EST. ASIA</span>
              {(window._getLang&&window._getLang()!=='en')?_t('hero.badge'):<EditableText k="hero-badge-text" fallback="Asia's premier AI community"/>}
            </div>
            <h1 className="display">
              {(window._getLang&&window._getLang()!=='en')?_t('hero.title'):<EditableText k="hero-title" fallback="Fostering AI innovation, networking & ethics across Asia" tag="span"/>}
            </h1>
            <p className="lead">
              {(window._getLang&&window._getLang()!=='en')?_t('hero.lead'):<EditableText k="hero-subtitle" fallback="Promoting technological advancement in Artificial Intelligence, facilitating professional connections, and championing ethical practices across Asia — backed by a community of 5,800+ members and AI-native member tools." tag="span"/>}
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary btn-lg" href="#join">{_t('hero.join')} <Icon.arrow size={17}/></a>
              <a className="btn btn-ghost btn-lg" href="#resources">{_t('hero.explore')}</a>
              <a className="btn-link" href="/members/login.html" style={{marginLeft:6}}>{_t('hero.portal')} <span className="arr"><Icon.arrow size={15}/></span></a>
            </div>
            <div className="hero-stats">
              <div className="hero-stat"><div className="n"><b>{count ? count.toLocaleString() : '5,800'}</b>+</div><div className="l">{_t('hero.stat1')}</div></div>
              <div className="hero-stat"><div className="n">12</div><div className="l">{_t('hero.stat2')}</div></div>
              <div className="hero-stat"><div className="n">50K+</div><div className="l">{_t('hero.stat3')}</div></div>
              <div className="hero-stat"><div className="n">100+</div><div className="l">{_t('hero.stat4')}</div></div>
            </div>
          </div>
          <HeroVisual motif={t.motif}/>
        </div>
      </div>
    </header>
  );
}

/* TrustBar — partner names/monograms editable via portal-content.json.
   Reads trust_bar key from AdminContentContext: array of {n, m, role}.
   Falls back to static PARTNERS from data.jsx if no override stored. */
function TrustBar(){
  const { content, editing, onEdit } = React.useContext(AdminContentContext);
  const [livePartners, setLivePartners] = React.useState(PARTNERS);
  React.useEffect(function(){
    fetch('/api/partnerships/public')
      .then(function(r){ return r.json(); })
      .then(function(rows){
        if (Array.isArray(rows) && rows.length) {
          setLivePartners(rows.map(function(p){
            return {n:p.org_name, m:(p.monogram&&p.monogram!==p.org_name)?p.monogram:p.org_name.charAt(0).toUpperCase(), role:p.category||'Partner'};
          }));
        }
      })
      .catch(function(){});
  }, []);
  /* Stored as JSON string under key "trust_bar" to keep portal-content.json simple */
  let partners = livePartners;
  try {
    const raw = content && content['trust_bar'];
    if (raw) {
      const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
      if (Array.isArray(parsed) && parsed.length) partners = parsed;
    }
  } catch(e) {}

  const savePartners = (updated) => {
    onEdit('trust_bar', JSON.stringify(updated));
  };

  return (
    <div className="trust">
      <div className="wrap">
        <span className="lbl">{_t('trust.title')}</span>
        <div className="logos">
          {partners.slice(0,6).map((p,i)=>(
            <div className="plogo" key={i}>
              {editing ? (
                <React.Fragment>
                  <span
                    className="mk admin-editable"
                    contentEditable
                    suppressContentEditableWarning
                    onBlur={e=>{
                      const updated=[...partners];
                      updated[i]={...updated[i],m:e.target.innerText};
                      savePartners(updated);
                    }}
                  >{p.m}</span>
                  <span
                    className="admin-editable"
                    contentEditable
                    suppressContentEditableWarning
                    onBlur={e=>{
                      const updated=[...partners];
                      updated[i]={...updated[i],n:e.target.innerText};
                      savePartners(updated);
                    }}
                  >{p.n}</span>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  {p.logo_url
                    ? <img src={p.logo_url} alt={p.n} onError={function(e){e.target.style.display='none';}}/>
                    : <span className="mk">{p.m}</span>}
                  {p.n}
                </React.Fragment>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NavBar, Hero, TrustBar, NetworkMotif });