// ===================== Projetos 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.12, rootMargin:'0px 0px -6% 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 PNav({ 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 ${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 BrowserShot({ src, url='app.tutu.com.br' }){
  return (
    <div className="browser">
      <div className="browser-bar">
        <div className="browser-dots"><i></i><i></i><i></i></div>
        <div className="browser-url">
          <svg className="lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          {url}
        </div>
      </div>
      <img src={src} alt="Tutu" loading="lazy" />
    </div>
  );
}

function Projetos({ C }){
  const i = C.intro;
  return (
    <main className="pr-main">
      {/* intro */}
      <section className="pr-intro">
        <div className="wrap">
          <PReveal>
            <div className="pr-index"><span>{i.index}</span><span className="ln"></span></div>
            <h1 className="pr-title" {...PH(i.title_html)}></h1>
            <div className="pr-headrow">
              <div className="pr-client" {...PH(i.client_html)}></div>
              <div className="pr-tags">{i.tags.map((t,k)=>(<span className={`pr-tag ${k===0?'solid':''}`} key={k}>{t}</span>))}</div>
            </div>
            <p className="pr-lead" {...PH(i.lead_html)}></p>
            <div className="pr-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>

      {/* showcase dashboard */}
      <section className="pr-showcase">
        <div className="wrap">
          <div className="pr-showcase-head">
            <div>
              <div className="eyebrow">{C.showcase.eyebrow}</div>
              <h2>{C.showcase.h}</h2>
            </div>
            <p>{C.showcase.p}</p>
          </div>
          <PReveal><BrowserShot src="assets/tutu-dash.png" url={C.showcase.url} /></PReveal>
        </div>
      </section>

      {/* feature rows */}
      <section className="pr-feats">
        <div className="wrap">
          {C.feats.map((f,k)=>(
            <PReveal className={`feat-row ${f.flip?'flip':''}`} key={k}>
              <div className="feat-text">
                <div className="feat-num">{f.num}</div>
                <h3 {...PH(f.h_html)}></h3>
                <p>{f.p}</p>
                <ul className="feat-points">
                  {f.points.map((p,j)=>(<li key={j}><Check/>{p}</li>))}
                </ul>
              </div>
              <div className="feat-shot">
                {f.framed ? <BrowserShot src={f.shot} /> : <div className="shot"><img src={f.shot} alt="" loading="lazy"/></div>}
              </div>
            </PReveal>
          ))}
        </div>
      </section>

      {/* whatsapp AI */}
      <section className="pr-whats">
        <div className="wrap">
          <PReveal>
            <div className="feat-num">{C.whats.num}</div>
            <h3 {...PH(C.whats.h_html)}></h3>
            <p>{C.whats.p1}</p>
            <p>{C.whats.p2}</p>
            <ul className="feat-points">{C.whats.points.map((p,j)=>(<li key={j}><Check/>{p}</li>))}</ul>
            <div className="wa-chips">{C.whats.chips.map((c,j)=>(<span className="wa-chip" key={j}>{c}</span>))}</div>
          </PReveal>
          <PReveal delay={120}>
            <div className="phone-wrap">
              <div className="phone"><div className="phone-screen"><img src="assets/tutu-whatsapp.jpeg" alt="Tutu no WhatsApp" loading="lazy"/></div></div>
            </div>
          </PReveal>
        </div>
      </section>

      {/* amigos / split */}
      <section className="pr-feats" style={{paddingTop:'90px',paddingBottom:'90px'}}>
        <div className="wrap">
          <PReveal className="feat-row">
            <div className="feat-text">
              <div className="feat-num">{C.amigos.num}</div>
              <h3 {...PH(C.amigos.h_html)}></h3>
              <p>{C.amigos.p}</p>
              <ul className="feat-points">{C.amigos.points.map((p,j)=>(<li key={j}><Check/>{p}</li>))}</ul>
            </div>
            <div className="feat-shot"><BrowserShot src="assets/tutu-accounts.png" /></div>
          </PReveal>
        </div>
      </section>

      {/* gallery */}
      <section className="pr-gallery">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">{C.gallery.eyebrow}</div>
              <h2 className="sec-title">{C.gallery.h}</h2>
            </div>
          </div>
          <div className="gal-grid">
            {C.gallery.items.map((g,k)=>(
              <PReveal className="gal-item" key={k} delay={k*60}>
                <img src={g.img} alt={g.t} loading="lazy"/>
                <div className="gal-cap"><span className="t">{g.t}</span><span className="n">/ {g.n}</span></div>
              </PReveal>
            ))}
          </div>
        </div>
      </section>

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

function PApp(){
  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.PROJ[lang];
  return (<React.Fragment><PNav lang={lang} setLang={setLang} C={C}/><Projetos C={C}/></React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<PApp/>);