// Skills — 3 cards with chips
function Skills() {
  const data = window.PORTFOLIO_DATA.skills;
  return (
    <section className="skills" id="skills">
      <div className="container">
        <div className="skills__head" data-reveal>
          <span className="eyebrow">TOOLS & CAPABILITIES</span>
          <h2 className="h-section skills__title" style={{ marginTop: 18 }}>
            我能幫團隊解決什麼樣的問題。
          </h2>
        </div>
        <div className="skills__grid">
          {data.map((g, i) => (
            <div className="skills-card" key={i} data-reveal="stagger-up" data-reveal-delay={String(i + 1)}>
              <span className="skills-card__num">{g.num}</span>
              <h3 className="skills-card__title">{g.title}</h3>
              <div className="skills-card__list">
                {g.items.map((it) => <span className="chip" key={it}>{it}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Skills = Skills;