/* global React, useReveal, SectionHead */

const groups = [
  { title: "Analytical", items: ["Power BI", "SQL", "Google Analytics", "Excel", "Data interpretation"] },
  { title: "Marketing", items: ["Campaign strategy", "Social strategy", "Content creation", "Performance mktg", "Canva"] },
  { title: "Operational", items: ["Operations strategy", "Stakeholder reporting", "Leadership", "Interviewing & HR", "Google Workspace"] },
];

window.Toolkit = function Toolkit() {
  const ref = useReveal();
  return (
    <section className="section section--border" id="toolkit" ref={ref}>
      <SectionHead num="05 — Toolkit" title="Tools &" titleEm="methods" meta={`${groups.reduce((a,g)=>a+g.items.length,0)} disciplines`} />

      <div className="toolkit">
        <div className="toolkit__label reveal">Instruments</div>
        {groups.map((g, i) => (
          <div className="toolkit__col reveal" key={i}>
            <h3>{g.title}</h3>
            <ul className="toolkit__list">
              {g.items.map((s, j) => <li key={j}>{s}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
};