const AM_SEQ=[
  {w:'Percepção',n:'Só existe realidade onde há percepção — e ela nunca é completa.'},
  {w:'Consciência',n:'O que parecia solto revela relação.'},
  {w:'Princípios',n:'O que se repete deixa de ser acaso.'},
  {w:'Escolhas',n:'Onde a estrutura encontra a pessoa.'},
  {w:'Realidade',n:'O resultado não é destino: é arquitetura.'}
];
function Sequencia(){
  const AM=window[window.AM_NS];
  const {BrandLock}=AM;
  const ref=React.useRef(null);
  const [p,setP]=React.useState(0);
  const [q,setQ]=React.useState(0);   // saída da cena: o sticky sempre percorre um viewport ao sair
  React.useEffect(()=>AMMotion.scroll(()=>{
    const el=ref.current; if(!el) return;
    const r=el.getBoundingClientRect(), vh=window.innerHeight;
    const pinRange=Math.max(1,r.height-vh);
    const pin=Math.min(1,Math.max(0,-r.top/pinRange));
    const exit=Math.min(1,Math.max(0,(-r.top-pinRange)/vh));
    setP(Math.round(pin*200)/200);
    setQ(Math.round(exit*100)/100);
  }),[]);
  const n=AM_SEQ.length;
  const pos=Math.min(n-.001,p*(n-.05));
  const active=Math.max(0,Math.floor(pos));
  return (
    <section className="am-seq" id="sequencia" ref={ref}>
      <div className="am-seq-stage" style={AMMotion.reduced?undefined:{opacity:(1-q*.92).toFixed(2),transform:'scale('+(1-q*.05).toFixed(3)+')',filter:'blur('+(q*7).toFixed(1)+'px)'}}>
        <div className="am-seq-labirinto" style={{opacity:(.08+p*.78).toFixed(3),transform:'scale('+(.86+p*.16).toFixed(3)+')'}} aria-hidden="true">
          <BrandLock variant="am-icon" height="min(62vh,560px)" assetBase="assets"/>
        </div>
        <div className="am-seq-field">
        <ol className="am-stairway">
          {AM_SEQ.map((s,i)=>{
            const done=pos>i, on=active===i;
            const k=i/(n-1);
            return (
              <li key={s.w} className={'am-step'+(done?' is-done':'')+(on?' is-on':'')}
                style={{bottom:(68-k*62)+'%',left:(16-k*9)+'%',width:(70+k*16)+'%',transitionDelay:(i*40)+'ms'}}>
                <span className="am-step-tread"/>
                <span className="am-step-label">
                  <b>{String(i+1).padStart(2,'0')}</b>
                  <span className="am-step-word">{s.w}</span>
                </span>
              </li>
            );
          })}
        </ol>
        </div>
        <div className="am-seq-foot">
          <p key={active} aria-live="polite">{AM_SEQ[active].n}</p>
          <i className="am-seq-arrow" aria-hidden="true" style={{opacity:p>.9?0:1}}/>
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{Sequencia,AM_SEQ});