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

function NavBar(){
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const f=()=>setScrolled(window.scrollY>8);
    window.addEventListener('scroll',f); return ()=>window.removeEventListener('scroll',f);
  },[]);
  const links=[["About","#about"],["Resources","#resources"],["AI Policy","#ai"],["Events","#events"],["Partners","#partners"],["Membership","#join"]];
  return (
    <React.Fragment>
      <div className="topbar">
        <div className="wrap">
          <div className="tb-left">
            <span className="tb-flag">◆ ASIA-PACIFIC · 12 CHAPTERS</span>
            <a href="#events">Upcoming: Asia AI Summit 2026 · Jun 24</a>
          </div>
          <div className="tb-right">
            <a href="#resources">AI Academy</a>
            <a href="/members/portal/talent.html">Talent</a>
            <a href="/members/login.html" style={{display:'inline-flex',alignItems:'center',gap:6}}>Members 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/aaa_logo.svg" alt="Asia AI Association"/></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>
            <a className="btn btn-ghost" href="/members/login.html" style={{padding:'10px 16px'}}>Sign in</a>
            <a className="btn btn-primary" href="#join" style={{padding:'10px 18px'}}>Join now</a>
          </div>
          <button className="menu-btn" aria-label="Menu"><i></i><i></i><i></i></button>
        </div>
      </nav>
    </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>
  );
}

function HeroVisual({motif}){
  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">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 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>
              Asia&apos;s premier AI community
            </div>
            <h1 className="display">
              Fostering AI innovation, networking &amp; <span className="grad">ethics across Asia</span>
            </h1>
            <p className="lead">
              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.
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary btn-lg" href="#join">Join now <Icon.arrow size={17}/></a>
              <a className="btn btn-ghost btn-lg" href="#resources">Explore resources</a>
              <a className="btn-link" href="/members/login.html" style={{marginLeft:6}}>Members portal <span className="arr"><Icon.arrow size={15}/></span></a>
            </div>
            <div className="hero-stats">
              <div className="hero-stat"><div className="n"><b>5,800</b>+</div><div className="l">Members across Asia</div></div>
              <div className="hero-stat"><div className="n">12</div><div className="l">Countries &amp; chapters</div></div>
              <div className="hero-stat"><div className="n">50K+</div><div className="l">AI learners certified</div></div>
              <div className="hero-stat"><div className="n">100+</div><div className="l">Enterprise partners</div></div>
            </div>
          </div>
          <HeroVisual motif={t.motif}/>
        </div>
      </div>
    </header>
  );
}

function TrustBar(){
  return (
    <div className="trust">
      <div className="wrap">
        <span className="lbl">Trusted partners across Asia</span>
        <div className="logos">
          {PARTNERS.slice(0,6).map(p=>(
            <div className="plogo" key={p.n}><span className="mk">{p.m}</span>{p.n}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

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