const AM_LEIS=[
  {n:'Mentalismo',a:'do',m:'Tudo é mente',img:'01-mentalismo'},
  {n:'Correspondência',a:'da',m:'Como acima, assim é abaixo',img:'02-correspondencia'},
  {n:'Vibração',a:'da',m:'Tudo é energia',img:'03-vibracao'},
  {n:'Polaridade',a:'da',m:'Tudo é duplo',img:'04-polaridade'},
  {n:'Ritmo',a:'do',m:'Tudo vai e vem',img:'05-ritmo'},
  {n:'Causa e Efeito',a:'da',m:'Toda ação tem sua reação',img:'06-causa-efeito'},
  {n:'Gênero',a:'do',m:'O masculino e o feminino estão em tudo',img:'07-genero'}
];
function Leis(){
  const AM=window[window.AM_NS];
  const {Eyebrow,Button}=AM;
  const [sel,setSel]=React.useState(0);
  const [open,setOpen]=React.useState(false);
  const [hold,setHold]=React.useState(false);
  const n=AM_LEIS.length;
  const go=d=>{setSel(s=>(s+d+n)%n);setOpen(true);setHold(true);};
  React.useEffect(()=>{
    if(hold) return;
    const el=document.getElementById('leis'); if(!el) return;
    let t=null;
    const io=new IntersectionObserver(es=>{
      if(es[0].isIntersecting){ t=setInterval(()=>setSel(s=>(s+1)%n),AMMotion.reduced?3500:2200); }
      else { clearInterval(t); t=null; }
    },{threshold:.3});
    io.observe(el);
    return ()=>{clearInterval(t);io.disconnect();};
  },[hold,n]);
  React.useEffect(()=>{
    const el=document.getElementById('leis');
    if(!el) return;
    let x0=null;
    const down=e=>{x0=(e.touches?e.touches[0].clientX:e.clientX);};
    const up=e=>{
      if(x0===null) return;
      const x1=(e.changedTouches?e.changedTouches[0].clientX:e.clientX);
      if(Math.abs(x1-x0)>44) go(x1<x0?1:-1);
      x0=null;
    };
    const stage=el.querySelector('.am-leis-stage');
    if(!stage) return;
    stage.addEventListener('pointerdown',down);stage.addEventListener('pointerup',up);
    return ()=>{stage.removeEventListener('pointerdown',down);stage.removeEventListener('pointerup',up);};
  },[]);
  return (
    <section className="am-chamber am-u-chamber am-leis" id="leis">
      <div className="am-leis-plate" aria-hidden="true" style={{backgroundImage:"url('assets/nebulosa.jpg')"}}/>
      <div className="am-inner am-leis-wrap">
        <div className="am-leis-head" data-am-reveal>
          <div className="am-badge-row"><Eyebrow rule={false} tone="ivory">Portal 02 · Curso</Eyebrow><span className="am-badge am-badge-leis">Em breve</span></div>
          <h2 className="am-leis-brand">As Leis<em> Invisíveis</em></h2>
          <p className="am-leis-sub">As 7 Leis Universais para compreender e transformar sua Realidade</p>
          <p className="am-prod-text am-leis-text">Um curso, não sete produtos. As sete leis são o conteúdo interno
            deste universo: leia uma e as outras seis mudam de sentido.</p>
          <div className="am-prod-actions"><Button variant="soon">Em breve</Button></div>
        </div>
        <div className="am-leis-stage" data-am-reveal data-am-delay="180">
          <div className="am-leis-deck">
            {AM_LEIS.map((l,i)=>{
              let d=i-sel; if(d>n/2)d-=n; if(d<-n/2)d+=n;
              const a=Math.abs(d);
              return (
                <button key={l.n} className={'am-lei-card'+(d===0?' is-active':'')} onClick={()=>{setSel(i);setOpen(true);}}
                  aria-label={'A Lei '+l.a+' '+l.n} tabIndex={a>2?-1:0}
                  style={{
                    transform:'translate(-50%,-50%) translateX('+(d*34)+'%) translateZ(0) scale('+Math.max(.6,1-a*.12)+') rotate('+(d*3)+'deg)',
                    filter:'blur('+Math.min(6,a*2.2)+'px) saturate('+(d===0?1:.5)+')',
                    opacity:a>3?0:1-a*.2, zIndex:20-a, pointerEvents:a>2?'none':'auto'}}>
                  <img src={'assets/leis/'+l.img+'.jpg'} alt={'Capa — A Lei '+l.a+' '+l.n}/>
                </button>
              );
            })}
          </div>
          <div className="am-leis-nav">
            <button onClick={()=>go(-1)} aria-label="Lei anterior">←</button>
            <span className="am-leis-count">{String(sel+1).padStart(2,'0')} <i>/</i> 07</span>
            <button onClick={()=>go(1)} aria-label="Próxima lei">→</button>
          </div>
          <div className="am-leis-active">
            <h3 className="am-leis-name">A Lei {AM_LEIS[sel].a} {AM_LEIS[sel].n}</h3>
            <p className="am-leis-motto">{AM_LEIS[sel].m}</p>
          </div>
          <div className="am-leis-dots">
            {AM_LEIS.map((l,i)=><button key={l.n} className={i===sel?'is-on':''} onClick={()=>setSel(i)} aria-label={l.n}/>)}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{Leis,AM_LEIS});