const{Hero,About,Presentacion,Archive,Ficha,Contact,PaperWindow,PF_COPY}=window;

function usePointerFX(){
  React.useEffect(()=>{
    const move=e=>{
      const x=e.clientX/innerWidth-.5,y=e.clientY/innerHeight-.5;
      document.querySelectorAll('[data-par]').forEach(el=>{
        const k=parseFloat(el.dataset.par)||.1;
        el.style.transform=`translate3d(${(-x*k*110).toFixed(2)}px,${(-y*k*80).toFixed(2)}px,0)`;
      });
      const lamp=document.getElementById('pf-lamp');
      if(lamp){lamp.style.setProperty('--lx',(18+(e.clientX/innerWidth)*64)+'%');lamp.style.setProperty('--ly',(20+(e.clientY/innerHeight)*50)+'%');}
      document.documentElement.style.setProperty('--wind',(x*1.3).toFixed(2)+'deg');
    };
    addEventListener('pointermove',move,{passive:true});
    return()=>removeEventListener('pointermove',move);
  },[]);
}

function App(){
  const[lang,setLang]=React.useState(()=>localStorage.getItem('pf-lang')||'es');
  const[view,setView]=React.useState(null);
  const t=PF_COPY[lang];
  usePointerFX();
  React.useEffect(()=>{localStorage.setItem('pf-lang',lang);},[lang]);
  React.useEffect(()=>{
    const k=e=>{if(e.key==='Escape')setView(null);};
    addEventListener('keydown',k);return()=>removeEventListener('keydown',k);
  },[]);
  const open=!!view;
  const ficha=!!view&&(view.kind==='ficha'||view.kind==='sobre');
  const nav=[['sobre',t.nav[0]],['archivo',t.nav[1]],['contacto',t.nav[2]]];
  return (
    <React.Fragment>
      <div id="pf-lamp" aria-hidden style={{position:'fixed',inset:0,zIndex:40,pointerEvents:'none',background:'radial-gradient(110vh 80vh at var(--lx,34%) var(--ly,30%),rgba(255,249,237,.34),rgba(255,249,237,0) 56%),radial-gradient(130vh 110vh at calc(var(--lx,34%) + 34%) calc(var(--ly,30%) + 26%),rgba(80,50,40,.12),rgba(80,50,40,0) 60%)',mixBlendMode:'soft-light',transition:'background var(--dur-base) linear'}}></div>
      <div style={{position:'relative',height:'100%',transform:open&&!ficha?'scale(.965)':'none',filter:open&&!ficha?'blur(2px)':'none',transition:'transform var(--dur-slow) var(--ease-paper), filter var(--dur-slow) var(--ease-paper)'}}>
        <header style={{position:'absolute',top:0,left:0,right:0,zIndex:20,display:'flex',alignItems:'center',justifyContent:'space-between',gap:32,padding:'18px clamp(20px,4vw,48px)',background:'transparent'}}>
          <span style={{fontFamily:'var(--font-mono)',fontSize:12,fontWeight:700,textTransform:'uppercase',letterSpacing:'var(--tracking-label)',color:'var(--tierra-900)',textShadow:'0 1px 2px rgba(255,249,237,.55)'}}>Agustina Rodríguez Ares</span>
          <nav style={{display:'flex',alignItems:'center',gap:'clamp(12px,2.2vw,26px)'}}>
            {nav.map(([id,l])=><button key={id} onClick={()=>setView({kind:id})} style={{fontFamily:'var(--font-mono)',fontSize:11,fontWeight:700,textTransform:'uppercase',letterSpacing:'var(--tracking-label)',color:'var(--tierra-900)',textShadow:'0 1px 2px rgba(255,249,237,.55)',background:'transparent',border:'none',padding:'6px 2px',cursor:'pointer'}}>{l}</button>)}
            <button onClick={()=>setLang(lang==='es'?'en':'es')} className="pf-cloud" aria-label={lang==='es'?'English':'Español'}><span className="b"></span><span className="l">{lang==='es'?'EN':'ES'}</span></button>
          </nav>
        </header>
        <Hero t={t} lang={lang} onOpen={p=>setView({kind:'ficha',p})} onContact={()=>setView({kind:'contacto'})} onAbout={()=>setView({kind:'sobre'})} shift={!!view&&view.kind==='ficha'} />
      </div>
      {view&&view.kind==='ficha'&&<Ficha p={view.p} t={t} lang={lang} onClose={()=>setView(null)} />}
      {view&&view.kind==='sobre'&&<Presentacion t={t} lang={lang} onClose={()=>setView(null)} />}
      {view&&view.kind==='contacto'&&<PaperWindow glass onClose={()=>setView(null)} width="min(980px,96vw)"><Contact t={t} /></PaperWindow>}
      {view&&view.kind==='archivo'&&<PaperWindow onClose={()=>setView(null)}><Archive t={t} lang={lang} onOpen={p=>setView({kind:'ficha',p})} /></PaperWindow>}
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('pf-root')).render(<App />);