// ===================== Core components: Reveal, Nav, Hero, About, Experience =====================
const { useState, useEffect, useRef, useContext } = React;

// scroll reveal wrapper
function Reveal({ children, delay=0, as='div', className='', ...rest }){
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(()=>{
    const el = ref.current;
    const io = new IntersectionObserver((es)=>{
      es.forEach(e=>{ if(e.isIntersecting){ setSeen(true); io.disconnect(); } });
    }, { threshold:0.12, rootMargin:'0px 0px -8% 0px' });
    if(el) io.observe(el);
    return ()=>io.disconnect();
  },[]);
  const Tag = as;
  return <Tag ref={ref} className={`rv ${seen?'in':''} ${className}`} style={{ transitionDelay:`${delay}ms` }} {...rest}>{children}</Tag>;
}

function useC(){ const { lang } = useContext(window.LangCtx); return window.CONTENT[lang]; }
const H = (html)=>({ dangerouslySetInnerHTML:{ __html:html } });

// ---------- NAV ----------
function Nav({ lang, setLang }){
  const C = window.CONTENT[lang];
  const [scrolled, setScrolled] = useState(false);
  useEffect(()=>{
    const on = ()=>setScrolled(window.scrollY > 40);
    on(); window.addEventListener('scroll', on, { passive:true });
    return ()=>window.removeEventListener('scroll', on);
  },[]);
  const N = C.nav;
  return (
    <nav className={`nav ${scrolled?'scrolled':''}`}>
      <div className="wrap">
        <a href="#top" className="brand"><span className="dot"></span>Patrick Chaves</a>
        <div className="navlinks">
          <a href="#about">{N.about}</a>
          <a href="#skills">{N.skills}</a>
          <a href="#companies">{N.companies}</a>
          <a href="projetos.html">{N.projects}</a>
        </div>
        <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="#contact" className="nav-cta">{N.contact}</a>
        </div>
      </div>
    </nav>
  );
}

// ---------- HERO ----------
function Hero(){
  const C = useC(); const h = C.hero;
  return (
    <header className="hero" id="top">
      <div className="hero-left">
        <div className="wrap-left">
          <div className="eyebrow">{h.tag}</div>
          <h1 className="hero-name">Patrick<br/><span className="c">Chaves</span></h1>
          <p className="hero-role" {...H(h.role_html)}></p>
          <div className="socials">
            {window.SOCIALS.map((s,i)=>(
              <a className="soc" key={i} href={s.href} target="_blank" rel="noopener">
                <span className="k">{s.k}</span>
                <span className="v">{s.v} ↗</span>
              </a>
            ))}
          </div>
        </div>
      </div>
      <div className="hero-right">
        <div className="hero-grid"></div>
        <div className="hero-corner">{h.corner}</div>
        <div className="hero-badge b1">{h.b1}<svg className="wave" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg></div>
        <div className="hero-ground"></div>
        <img className="hero-fig" src={window.ASSET('assets/patrick-art.png')} alt="Ilustração do Patrick por @sunnie.ilustra" />
      </div>
    </header>
  );
}

// ---------- ABOUT ----------
function About(){
  const C = useC(); const a = C.about;
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(()=>{
    const io = new IntersectionObserver((es)=>{ es.forEach(e=>{ if(e.isIntersecting) setVis(true); }); }, { threshold:0.3 });
    if(ref.current) io.observe(ref.current);
    return ()=>io.disconnect();
  },[]);
  return (
    <section className="about" id="about">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{a.num} · Patrick Chaves</div>
            <h2 className="sec-title" {...H(a.title_html)}></h2>
          </div>
          <span className="sec-num">/ {a.num}</span>
        </div>
        <div className="about-grid">
          <Reveal>
            <p className="about-lead" {...H(a.lead_html)}></p>
            <div className="quote">{a.quote}</div>
            <div className="about-stats">
              {a.stats.map((s,i)=>(<div className="stat" key={i}><div className="n">{s.n}</div><div className="l">{s.l}</div></div>))}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="about-body">
              {a.body.map((p,i)=>(<p key={i}>{p}</p>))}
            </div>
            <div className="langs" ref={ref}>
              <div className="eyebrow" style={{marginBottom:'4px'}}>{a.langs_title}</div>
              {a.langs.map((L,i)=>(
                <div className="langbar" key={i}>
                  <div className="lr"><span>{L.n}</span><span className="lv">{L.l}</span></div>
                  <div className="track"><i style={{ width: vis ? L.v+'%' : '0%', transitionDelay:(i*150)+'ms' }}></i></div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- EXPERIENCE ----------
function Experience(){
  const C = useC(); const e = C.exp;
  return (
    <section className="exp" id="exp">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{e.num} · {e.kicker}</div>
            <h2 className="sec-title" {...H(e.title_html)}></h2>
          </div>
          <span className="sec-num">/ {e.num}</span>
        </div>
        <div className="timeline">
          {e.jobs.map((j,i)=>(
            <Reveal className="job" key={i} delay={i*80}>
              <div className="job-when">
                {j.when}
                {j.live && <div className="live"><span className="pulse"></span>{j.live}</div>}
              </div>
              <div className="job-main">
                <div className="job-co">{j.co}{j.ceo && <span className="ceo-pill">CEO</span>}</div>
                <div className="job-role">{j.role}</div>
                <div className="job-tags">{j.tags.map((t,k)=>(<span className="tag" key={k}>{t}</span>))}</div>
                <ul className="job-list">{j.items.map((it,k)=>(<li key={k}>{it}</li>))}</ul>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reveal, useC, H, Nav, Hero, About, Experience });