function CTAFinal(){
  const AM=window[window.AM_NS];
  const {Portal,SectionHeader}=AM;
  const items=[
    {label:'Entrar',caption:'Drive Mental · o curso',href:'#drive'},
    {label:'Explorar',caption:'As Leis Invisíveis · o curso',href:'#leis',status:'Em breve'},
    {label:'Compreender',caption:'O Código da Realidade · o curso',href:'#codigo',status:'Em breve'},
    {label:'Aprofundar',caption:'Mentoria · com Ceci Alves',href:(window.AM_LINKS&&AM_LINKS.mentoria)||'#final',status:'Agenda fechada'}
  ];
  const [size,setSize]=React.useState(220);
  React.useEffect(()=>{
    const fit=()=>setSize(Math.max(170,Math.min(230,Math.round((Math.min(1440,window.innerWidth)-2*80-3*24)/4))));
    fit();window.addEventListener('resize',fit);return ()=>window.removeEventListener('resize',fit);
  },[]);
  return (
    <section className="am-chamber am-final" id="final">
      <div className="am-inner am-final-wrap">
        <div data-am-reveal>
          <SectionHeader align="center" rule={false} eyebrow="Escolha" title="Por onde" emphasis="você começa?" maxWidth="24ch"/>
        </div>
        <div className="am-portais" data-am-reveal data-am-delay="150">
          {items.map(it=>(
            <Portal key={it.label} label={it.label} caption={it.caption} href={it.href} size={size}>
              {it.status ? <span className="am-portal-badge">{it.status}</span> : null}
            </Portal>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{CTAFinal});
