const Skills = () => {
  const groups = [
    { label: "Languages",  items: ["Python", "JavaScript", "HTML/CSS", "C++"] },
    { label: "Tools",      items: ["Git", "JetBrains", "GitHub", "Docker"] },
    { label: "Currently learning", items: ["Java", "Object-oriented programming", "ML systems engineering"] },
  ];
  return (
    <section className="section" id="skills">
      <div className="container">
        <div className="sec-head">
          <div className="eyebrow">Skills &amp; Tools</div>
          <h2>What I work with.</h2>
        </div>
        <div className="skills-grid">
          <div className="eyebrow" style={{paddingTop:'4px'}}>Stack</div>
          <div className="skills-groups">
            {groups.map(g => (
              <div className="skills-group" key={g.label}>
                <div className="skills-label">{g.label}</div>
                <div className="tag-row">
                  {g.items.map(i => <span className="tag" key={i}>{i}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Skills = Skills;