/* global React, Icon, SectionHeader, Reveal */

const EXPERTISE = [
  { icon: "bar-chart-3",      title: "Data Analytics & BI",     desc: "Turning operational data into decision-ready dashboards and self-serve analytics." },
  { icon: "layout-dashboard", title: "Power BI Development",        desc: "End-to-end dashboards — modeling, DAX, design, and rollout." },
  { icon: "cpu",              title: "AI & Automation",         desc: "Connecting AI into real workflows that save teams hours every week." },
  { icon: "git-branch",       title: "Process Improvement",         desc: "Mapping, simplifying, and automating the work people repeat." },
  { icon: "package",          title: "Digital Products & Systems", desc: "Internal tools, web apps, and products that solve real problems." },
  { icon: "pen-tool",         title: "Content & UI/UX",         desc: "Educational content and clean interface design for data products." },
];

function Expertise() {
  return (
    <section id="expertise" className="section expertise">
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="Areas of expertise"
            eyebrowIcon="layers"
            title='Six disciplines, <span class="grad">one&nbsp;practice.</span>'
            subtitle="Everything I do connects data, systems, and design — moving the work from messy spreadsheets to tools people actually use."
          />
        </Reveal>

        <div className="expertise-grid">
          {EXPERTISE.map((e, i) => (
            <Reveal key={e.title} delay={(i % 3) * 60}>
              <div className="exp-card">
                <div className="exp-icon">
                  <Icon name={e.icon} size={22} />
                </div>
                <h3 className="exp-title" dangerouslySetInnerHTML={{ __html: e.title }} />
                <p className="exp-body">{e.desc}</p>
                <span className="exp-arrow">
                  Learn more <Icon name="arrow-right" size={12} />
                </span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Expertise = Expertise;