// ===================== SoundPaper page app =====================
const { useState, useEffect, useRef } = React;

function Check(){
  return (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>);
}
function PReveal({ children, className='', delay=0 }){
  const ref = useRef(null); const [s,setS]=useState(false);
  useEffect(()=>{
    const io=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting){ setS(true); io.disconnect(); } }),{ threshold:0.10, rootMargin:'0px 0px -5% 0px' });
    if(ref.current) io.observe(ref.current); return ()=>io.disconnect();
  },[]);
  return <div ref={ref} className={`rv ${s?'in':''} ${className}`} style={{ transitionDelay:delay+'ms' }}>{children}</div>;
}
const PH = (html) => ({ dangerouslySetInnerHTML:{ __html:html } });

function SPNav({ lang, setLang, C }){
  const [sc,setSc]=useState(false);
  useEffect(()=>{ const on=()=>setSc(window.scrollY>40); on(); window.addEventListener('scroll',on,{passive:true}); return ()=>window.removeEventListener('scroll',on); },[]);
  return (
    <nav className={`nav sp-nav ${sc?'scrolled':''}`}>
      <div className="wrap">
        <a href="index.html" className="back"><span>←</span><span className="txt">{C.nav.back}</span></a>
        <div className="nav-right">
          <div className="lang">
            <button className={lang==='pt'?'on':''} onClick={()=>setLang('pt')}>PT</button>
            <button className={lang==='en'?'on':''} onClick={()=>setLang('en')}>EN</button>
          </div>
          <a href="index.html#contact" className="nav-cta">{C.nav.contact}</a>
        </div>
      </div>
    </nav>
  );
}

function MacWin({ src, title='SoundPaper', loop=true }){
  return (
    <div className="sp-macwin">
      <div className="sp-macbar">
        <div className="sp-macdots"><i></i><i></i><i></i></div>
        <span className="sp-mactitle">{title}</span>
      </div>
      <video src={src} autoPlay muted loop={loop} playsInline />
    </div>
  );
}

function SoundPaperPage({ C }){
  const i = C.intro;
  return (
    <main className="sp-main">

      {/* intro */}
      <section className="sp-intro">
        <div className="wrap">
          <PReveal>
            <div className="pr-index sp-index"><span>{i.index}</span><span className="ln"></span></div>
            <div className="sp-tag-badge">{i.tag}</div>
            <h1 className="pr-title sp-title" {...PH(i.title_html)}></h1>
            <div className="pr-headrow">
              <div className="pr-tags">{i.tags.map((t,k)=>(<span className={`pr-tag sp-pr-tag ${k===0?'solid':''}`} key={k}>{t}</span>))}</div>
            </div>
            <p className="pr-lead sp-lead" {...PH(i.lead_html)}></p>
            <div className="pr-meta sp-meta">
              {i.meta.map((m,k)=>(<div className="m" key={k}><div className="k">{m.k}</div><div className="v">{m.v}</div></div>))}
            </div>
          </PReveal>
        </div>
      </section>

      {/* loop video hero */}
      <section className="sp-hero-vid">
        <div className="wrap">
          <PReveal><MacWin src="assets/soundpaper_loop.mp4" /></PReveal>
        </div>
      </section>

      {/* feature rows */}
      <section className="sp-feats">
        <div className="wrap">
          {C.feats.map((f,k)=>(
            <PReveal className="sp-feat-row" key={k}>
              <div className="sp-feat-text">
                <div className="sp-feat-num">{f.num}</div>
                <h3 {...PH(f.h_html)}></h3>
                <p>{f.p}</p>
                <ul className="feat-points sp-points">
                  {f.points.map((p,j)=>(<li key={j}><Check/>{p}</li>))}
                </ul>
              </div>
              <div className="sp-feat-deco" aria-hidden="true">
                <span className="sp-bg-num">0{k+1}</span>
              </div>
            </PReveal>
          ))}
        </div>
      </section>

      {/* demo video */}
      <section className="sp-demo">
        <div className="wrap">
          <PReveal>
            <div className="sp-demo-head">
              <div className="eyebrow sp-eyebrow">{C.demo.eyebrow}</div>
              <h2>{C.demo.h}</h2>
              <p>{C.demo.p}</p>
            </div>
          </PReveal>
          <PReveal delay={80}><MacWin src="assets/soundpaper_demo.mp4" title="SoundPaper — Demo" /></PReveal>
        </div>
      </section>

      {/* cta */}
      <section className="sp-cta">
        <div className="wrap">
          <div className="eyebrow center sp-eyebrow">{C.next.eyebrow}</div>
          <h2 {...PH(C.next.h_html)}></h2>
          <div className="pr-next-btns">
            <a className="pr-btn sp-ghost" href="index.html">← {C.next.back}</a>
            <a className="pr-btn sp-primary" href="index.html#contact">{C.next.contact} →</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function SPApp(){
  const [lang,setLang]=useState(()=> localStorage.getItem('pc_lang') || 'pt');
  useEffect(()=>{ localStorage.setItem('pc_lang',lang); document.documentElement.lang = lang==='pt'?'pt-BR':'en'; },[lang]);
  const C = window.SP[lang];
  return (<React.Fragment><SPNav lang={lang} setLang={setLang} C={C}/><SoundPaperPage C={C}/></React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<SPApp/>);