// Skills + Experience sections
function Skills({ t }) {
  return (
    <section id="skills">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">{t.skills.kicker}</span>
          <Reveal as="h2">{t.skills.title}</Reveal>
          <Reveal as="p" delay={80}>{t.skills.sub}</Reveal>
        </div>

        <div className="skills-grid">
          {t.skills.categories.map((c, i) => (
            <Reveal key={i} className="cat" delay={i * 60}>
              <div className="cat-head">
                <div>
                  <div className="cat-desc">{c.desc}</div>
                  <div className="cat-name">{c.name}</div>
                </div>
                <span className="cat-tag"></span>
              </div>
              <div className="cat-items">
                {c.items.map((it, j) => (
                  <span key={j} className="chip">{it}</span>
                ))}
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="concepts" delay={200}>
          <span className="label">{t.skills.kicker === "// stack" ? "Conceitos" : "Concepts"}</span>
          {t.skills.concepts.map((c, i) => (
            <span key={i} className="chip">{c}</span>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function Experience({ t }) {
  return (
    <section id="experience">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">{t.experience.kicker}</span>
          <Reveal as="h2">{t.experience.title}</Reveal>
        </div>
        <div className="exp-list">
          {t.experience.items.map((it, i) => (
            <Reveal key={i} className="exp-row" delay={i * 80}>
              <div className="exp-when">{it.when}</div>
              <div className="exp-body">
                <div className="exp-role">{it.role}</div>
                <div className="exp-where">{it.where}</div>
                <div className="exp-desc">{it.desc}</div>
              </div>
              <div className="exp-arrow">→</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Skills, Experience });