// ===================== Skills, Companies, Projects, Education, Contact, Footer =====================

// ---------- SKILLS ----------
function Skills(){
  const C = window.useC(); const s = C.skills; const Reveal = window.Reveal; const H = window.H;
  return (
    <section className="skills" id="skills">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{s.num} · {s.kicker}</div>
            <h2 className="sec-title" {...H(s.title_html)}></h2>
          </div>
          <span className="sec-num">/ {s.num}</span>
        </div>

        <Reveal className="stack-label">{s.stack_label}</Reveal>
        <div className="stack-grid">
          {window.STACK.map((t,i)=>(
            <Reveal className="stack-tile" key={t.n+i} delay={Math.min(i*40,400)}>
              <div className={`stack-logo ${t.trio?'trio':''}`}>
                {t.trio
                  ? t.trio.map((ic,k)=>(<img key={k} src={window.ASSET(ic)} alt="" loading="lazy" />))
                  : <img src={window.ASSET(t.i)} alt={t.n} loading="lazy"
                      onError={(e)=>{ e.target.style.display='none'; e.target.parentNode.classList.add('noimg'); e.target.parentNode.dataset.l=t.n[0]; }} />}
              </div>
              <span>{t.n}</span>
            </Reveal>
          ))}
        </div>
        <div className="stack-marquee">
          <div className="stack-marquee-track">
            {[...window.STACK,...window.STACK,...window.STACK].map((t,i)=>(
              <div className="stack-marquee-item" key={i}>
                <div className={`stack-logo ${t.trio?'trio':''}`}>
                  {t.trio
                    ? t.trio.map((ic,k)=>(<img key={k} src={window.ASSET(ic)} alt="" loading="lazy" />))
                    : <img src={window.ASSET(t.i)} alt={t.n} loading="lazy"
                        onError={(e)=>{ e.target.style.display='none'; e.target.parentNode.classList.add('noimg'); e.target.parentNode.dataset.l=t.n[0]; }} />}
                </div>
                <span>{t.n}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="exp-grid">
          {s.expertise.map((g,i)=>(
            <Reveal className="exp-card" key={i} delay={i*70}>
              <div className="exp-ico">{g.ico}</div>
              <h3>{g.h}</h3>
              <p>{g.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- COMPANIES ----------
function Companies(){
  const C = window.useC(); const c = C.companies; const Reveal = window.Reveal; const H = window.H;
  const all = [...c.list, ...c.list, ...c.list];
  return (
    <section className="companies" id="companies">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{c.num} · {c.kicker}</div>
            <h2 className="sec-title" {...H(c.title_html)}></h2>
          </div>
          <span className="sec-num">/ {c.num}</span>
        </div>
        <div className="co-row3">
          {c.list.map((co,i)=>(
            <Reveal className={`co-item ${co.feat?'feat':''}`} key={i} delay={i*90}>
              <div className="co-logo"><img src={window.ASSET(co.logo)} alt={co.name||co.role} /></div>
            </Reveal>
          ))}
        </div>
      </div>
      <div className="co-marquee">
        <div className="co-marquee-track">
          {all.map((co,i)=>(
            <div className="co-marquee-item" key={i}>
              <img src={window.ASSET(co.logo)} alt={co.name||co.role} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- PROJECTS ----------
function Projects(){
  const C = window.useC(); const p = C.projects; const Reveal = window.Reveal; const H = window.H;
  const f = p.featured; const sp = p.soundpaper;
  return (
    <section className="projects" id="projects">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">{p.num} · {p.kicker}</div>
            <h2 className="sec-title" {...H(p.title_html)}></h2>
          </div>
          <span className="sec-num">/ {p.num}</span>
        </div>

        <Reveal>
          <a className="proj-featured" href={f.href}>
            <div className="pf-text">
              <div className="pf-tag"><span className="pf-dot"></span>{f.tag}</div>
              <div className="pf-name"><span {...H(f.name_html)}></span><span className="pf-client">{f.client}</span></div>
              <p className="pf-desc">{f.desc}</p>
              <div className="pf-tags">{f.tags.map((t,k)=>(<span className="tag" key={k}>{t}</span>))}</div>
              <span className="pf-cta">{f.cta} <span className="pf-arr">→</span></span>
            </div>
            <div className="pf-shot">
              <div className="pf-browser">
                <div className="pf-bar"><i></i><i></i><i></i></div>
                <img src={window.ASSET(f.shot)} alt="Tutu" loading="lazy" />
              </div>
            </div>
          </a>
        </Reveal>

        <Reveal>
          <a className="proj-sp" href="soundpaper.html">
            <div className="sp-text">
              <span className="sp-eyebrow">{sp.tag}</span>
              <div className="sp-personal">{sp.personal}</div>
              <div className="sp-name" {...H(sp.name_html)}></div>
              <p className="sp-desc">{sp.desc}</p>
              <div className="sp-tags">{sp.tags.map((t,k)=>(<span className="tag" key={k}>{t}</span>))}</div>
              <span className="sp-cta">Ver o projeto <span className="sp-arr">→</span></span>
            </div>
            <div className="sp-shot">
              <div className="sp-win">
                <div className="sp-winbar">
                  <div className="sp-dots"><i></i><i></i><i></i></div>
                  <span className="sp-wintitle">SoundPaper</span>
                </div>
                <video src={sp.loop} autoPlay muted loop playsInline />
              </div>
            </div>
          </a>
        </Reveal>

        <div className="ach-head">{p.ach_title}</div>
        <div className="ach-grid">
          {p.achievements.map((a,i)=>(
            <Reveal className="ach" key={i} delay={i*80}>
              <div className="ach-badge">{a.badge}</div>
              <div className="ach-body">
                <div className="ach-name" {...H(a.name_html)}></div>
                <div className="ach-sub">{a.sub}</div>
                <p className="ach-desc">{a.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- EDUCATION (simple card) ----------
function Education(){
  const C = window.useC(); const e = C.edu; const Reveal = window.Reveal; const H = window.H;
  return (
    <section className="edu" id="edu">
      <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>

        <Reveal className="edu-simple">
          <div className="edu-badge">
            <img src={window.ASSET(e.logo)} alt="IFCE" loading="lazy"
              onLoad={(ev)=>ev.target.parentNode.classList.add('has-img')}
              onError={(ev)=>{ ev.target.style.display='none'; }} />
            <span className="edu-badge-ph">IFCE</span>
          </div>
          <div className="edu-body">
            <div className="edu-top">
              <span className="edu-tag">{e.degLabel}</span>
              <span className="edu-live"><span className="edu-dot"></span>{e.status}</span>
            </div>
            <h3 className="edu-course">{e.deg}</h3>
            <div className="edu-inst">{e.school}</div>
            <div className="edu-period">{e.when}</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- CONTACT + FOOTER ----------
function Contact(){
  const C = window.useC(); const c = C.contact; const f = C.footer; const H = window.H;
  return (
    <React.Fragment>
      <section className="contact" id="contact">
        <div className="wrap">
          <div className="eyebrow center">{c.eyebrow}</div>
          <h2 {...H(c.title_html)}></h2>
          <p className="lead">{c.lead}</p>
          <a className="mail-btn" href={`mailto:${c.mail}`}>✉ {c.mail}</a>
          <div className="contact-socials">
            {window.SOCIALS.map((s,i)=>(<a className="csoc" key={i} href={s.href} target="_blank" rel="noopener">{s.k} ↗</a>))}
          </div>
        </div>
      </section>
      <footer>
        <div className="wrap">
          <span>{f.left}</span>
          <span>{f.mid}</span>
          <span>{f.right} <span className="heart">✦</span></span>
        </div>
      </footer>
    </React.Fragment>
  );
}

Object.assign(window, { Skills, Companies, Projects, Education, Contact });